Gallery Caption workarounds for 7.1?

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. 

Hi @brandon  -- you're an absolute star! Thank you so much. How would I vertically center the caption text over the image? Thank you!

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.

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.

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!

@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!

15 hours ago, goosegoosegoose said:

@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!

Add to Home > Design > Custom CSS

a.gallery-masonry-image-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

On 5/27/2020 at 3:40 AM, shaplow said:

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!

Can you share link to page where you use slideshow?

Hi Brandon, thanks for this i'm trying to apply it to my site and have a couple of questions. 

1. I would like the captions to appear as they do when selected in the Gallery Section Design panel, but only as a hover state. Is this possible?

2. Is it possible to have the captions appear in the lightbox view, but underneath the image rather than overlaid?

Thanks for your help

@tuanphan

Thank you! Works great for desktop, but when I switch to mobile, this happens (see before and after attached). Anyway to fix? Thank you so much for your help!

Hi @brandon thank you 4 the code - worked beautifully. K

On 5/28/2020 at 10:29 PM, goosegoosegoose said:

@tuanphan

Thank you! Works great for desktop, but when I switch to mobile, this happens (see before and after attached). Anyway to fix? Thank you so much for your help!

remove above & try this

@media screen and (min-width:768px) {
a.gallery-masonry-image-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}
}

On 5/30/2020 at 1:34 AM, tuanphan said:

remove above & try this

@media screen and (min-width:768px) {
a.gallery-masonry-image-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}
}

 

@tuanphan Worked! Thank you!

This worked perfectly! Thank you!

hi @brandon

Thank you so much for providing the code for captions. I'm new to Squarespace and a photographer so captions are so important for my work! 

I've followed your instructions and all seem to be working perfectly. However when I looked at my site on an ipad and click on a photo the website spins out and then goes to an error page. Is there any extra code to add for tablets? All seems to be working fine on my iphone it's just the ipad. 

Any help would be much appreciated. My website is www.photosbyhelen.com

Cheers!

On 5/21/2020 at 10:46 PM, fiona.sloan said:

Hi @brandon  -- you're an absolute star! Thank you so much. How would I vertically center the caption text over the image? Thank you!

Piling on here with a similar question for you, @brandon! I'd like to get the masonry grid at the top of this page to mimic the text style of the descriptions over the image grid here.  I don't want them to only show on hover, I'd just like the descriptions up all the time. The images are links to Business Insider and Ad Age articles, so I just want them to say "Business Insider" or "Ad Age" - I am going nuts trying to figure this out. Is it just a matter of styling your initial code? That did work for me but I couldn't vertically center the text and also some padding seemed to appear below each image. Thank you for your help, if you can, and I hope this makes sense! Thank you again. 

On 6/21/2020 at 9:22 PM, HMphots said:

hi @brandon

Thank you so much for providing the code for captions. I'm new to Squarespace and a photographer so captions are so important for my work! 

I've followed your instructions and all seem to be working perfectly. However when I looked at my site on an ipad and click on a photo the website spins out and then goes to an error page. Is there any extra code to add for tablets? All seems to be working fine on my iphone it's just the ipad. 

Any help would be much appreciated. My website is www.photosbyhelen.com

Cheers!

SS supported gallery caption, without using custom code. You can edit Gallery Section > Enable Caption.

On 6/24/2020 at 12:44 AM, hilaurakatz said:

Piling on here with a similar question for you, @brandon! I'd like to get the masonry grid at the top of this page to mimic the text style of the descriptions over the image grid here.  I don't want them to only show on hover, I'd just like the descriptions up all the time. The images are links to Business Insider and Ad Age articles, so I just want them to say "Business Insider" or "Ad Age" - I am going nuts trying to figure this out. Is it just a matter of styling your initial code? That did work for me but I couldn't vertically center the text and also some padding seemed to appear below each image. Thank you for your help, if you can, and I hope this makes sense! Thank you again. 

Can you share access password?

Hi guys

Does anyone here know how to make all the captions under all images in a gallery reel stay visable (7.1)? At the moment the caption is only visable when its the image in the middle of the reel, but would like all the captions to be visable...

Thanks for your help

Richie

On 6/25/2020 at 8:17 AM, tuanphan said:

SS supported gallery caption, without using custom code. You can edit Gallery Section > Enable Caption.

 

Can you share access password?

@tuanphan sorry, it's bew. Thanks!

Hello,

I have scoured this thread in search of an answer with no luck, but I apologize if it is here and I missed it somehow.

I am using Gallery - Masonry in 7.1 and I would like the captions to ONLY show up in lightbox mode, not just in the Gallery page itself. I have tried messing with the code in this thread with no luck. If it is possible, can you tell me which section of the code to edit to make it appear as I have described?

Thank you.

On 7/21/2020 at 2:08 AM, GabyMSeasons said:

Hello,

I have scoured this thread in search of an answer with no luck, but I apologize if it is here and I missed it somehow.

I am using Gallery - Masonry in 7.1 and I would like the captions to ONLY show up in lightbox mode, not just in the Gallery page itself. I have tried messing with the code in this thread with no luck. If it is possible, can you tell me which section of the code to edit to make it appear as I have described?

 

Thank you.

Can you share link to gallery page? WE can check easier

On 7/22/2020 at 4:21 AM, tuanphan said:

Can you share link to gallery page? WE can check easier

Thanks for your quick response. I sent you an email directly with the link and more information.

Thank you again!

@brandon, Thanks so much code works great and is so flexible, the hover effect affects the whole gallery not just the one image. thoughts?

https://tammy-hudgeon-online.squarespace.com/paintings-test

password: hover

4 hours ago, bryan said:

@brandon, Thanks so much code works great and is so flexible, the hover effect affects the whole gallery not just the one image. thoughts?

https://tammy-hudgeon-online.squarespace.com/paintings-test

password: hover

You can add code to Page Settings > Advanced > Header

On 6/29/2020 at 8:29 PM, hilaurakatz said:

 

@tuanphan sorry, it's bew. Thanks!

Have you solved it yet?

Sorry I'm not sure what you mean, what code should I add there?