Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
dan3

Gallery Caption workarounds for 7.1? ROUND TWO

Recommended Posts

Brandon. Thank you so much for this. I got it to work in Google Chrome, but the titles do not show up in Safari. Is there code I need to add to be able to see them in that browser?

Share this post


Link to post
Posted (edited)

Hi @Brandon I am using the original code in a gallery page (grid) in 7.1 it works except that I'd like both title and description over the image. 

For example Name, title on first line / description underneath. no matter what I do to the code it seems to only move the description up or down under the photo under the title, but never over the photo. I am usually good at CSS, but not with the absolute/relative positioning that 7.1 seems to use. 

And I assume I need to add an override for the description so that it appear over the photo also? i did have a rollover code that did this, but yours overwrites it. Can I just go back to it and add an !important to that piece of code? 

I can send you the website link if that's necessary. 

 

 

 

Edited by deaton72

Share this post


Link to post

Alright, I've had enough. I've been working through this for the last little bit. CSS is new to me like most others who've posted. I've got everything the way I want except for centering the text to the middle of my image. Here's the code I've Frankensteined together.

section.gallery-section [class*='-item']:not([class*='-item-']) {
  position: relative;
}
.gallery-caption-grid-simple, .gallery-caption-content, {
  display: none;
}
.gallery-grid-item {
  padding-bottom: 0;
}
.gallery-grid, {
  .gallery-item-description {
    text-align: center;
    font-style: italic;
    font-variant: small-caps;
    font-size: 28px;
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

  }
}

Edit 1: Many thanks to everyone who has contributed both with questions and answers.

Edit 2: After some sleep I was able to get it figured out and updated it here. If there is a cleaner way to do this I would appreciate the feedback.

Edited by sblackhurst

Share this post


Link to post

hi @brandon

Just saw this in Circle Forum.

Captions for gallery section images in 7.1

You and your clients can now add captions to gallery section images for all gallery layouts. To display, hide, and style gallery captions, switch the Captions toggle on or off in the section editor.


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

Thank you, Squarespace, for adding the caption feature on slideshows in 7.1! 

I am working on adding captions to a slideshow now, but I notice when captions are toggled on, the overall slideshow images get a smaller. Is there any way to keep the slideshow the same size it was before turning on captions, and still have the captions show up underneath the images? I have both the height and width of the slideshow set to Large (as it was before and also after toggling on captions.)

Thanks!

Share this post


Link to post

@tuanphan

Following up here, I guess I wasn't quite all resolved! Using the CSS you and @brandon have provided I've gotten my homepage close to how I want it. Thank you both! One question- When I do the click to hover only the top half of the image is clickable. Is there any way to fix that? I'd like people to be able to click-through anywhere on the image. 

site: https://coral-icosahedron-7rhx.squarespace.com/

Pw: NOTREADY100

Thank you!

Edited by goosegoosegoose

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...