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

Gallery Caption workarounds for 7.1? ROUND TWO


dan3

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?

Link to post
  • Replies 173
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Update 5/26/2020: Squarespace has added the ability to add image descriptions/captions to 7.1 gallery sections. See here. There are some limitations, such as not appearing in lightbox view and not sup

Has Squarespace hinted at when they will make image captions readily available? It's ludicrous that it's not, knowing Squarespace has a trillion sites requiring this very basic feature. 

Hi @NuprinBoy. You understood correctly. You can control which galleries get descriptions by sending a CSS selector to the function. In your case, try this: In the first line of code in the funct

Posted Images

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
Link to post
Posted (edited)

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
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 detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

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!

Link to post
Posted (edited)

@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
Link to post
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post

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

Link to post
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 3 weeks later...

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!

Link to post
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. 

Link to post
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post

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

 

Screenshot (1464).png

Link to post

 

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!

Link to post
  • 3 weeks later...

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.

Link to post
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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
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!

Link to post
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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

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...