Captions under Lightbox images

Site URL: https://cod-goby-e96y.squarespace.com/

I'm building a Squarespace 7.1 site and need to show the gallery captions under the lightbox images. This is more difficult than I thought. Can anyone help point me to the CSS code I would need to do this?  Thanks!

Hi Art o/

We will need to know the password you created in Settings > Site Availability in order to help

I have the same issue here: gallery (PW: deek)

All the solutions I've found have involved using Code Injection, which is only available for Business plans.

I'm working for a client who doesn't need any other function from a business plan, and I'm not going to push them to upgrade just for this.

Right now my options are:

1. go back to 7.0 (I really, really prefer working with 7.1. and 7.0's options aren't that great either)

2. add each image individually and form a kind of masonry grid with organizing & spacers in the hopes that SS will update the lightbox caption options before I need to add more images (will probably be a stupid amount of work and I'm worried about responsiveness - a lot of iPads being used in the target audience)

Is there any other option? Or, is there an idea of when Squarespace might include this function?

On 1/25/2022 at 7:51 PM, bishbashbosh said:

I have the same issue here: gallery (PW: deek)

All the solutions I've found have involved using Code Injection, which is only available for Business plans.

I'm working for a client who doesn't need any other function from a business plan, and I'm not going to push them to upgrade just for this.

Right now my options are:

1. go back to 7.0 (I really, really prefer working with 7.1. and 7.0's options aren't that great either)

2. add each image individually and form a kind of masonry grid with organizing & spacers in the hopes that SS will update the lightbox caption options before I need to add more images (will probably be a stupid amount of work and I'm worried about responsiveness - a lot of iPads being used in the target audience)

Is there any other option? Or, is there an idea of when Squarespace might include this function?

Hiya Bish,

You can add styles in a code block within that page, between <style> tags, rather than using the Custom CSS area.  It is not considered best practice, but it will work.

If you want any specific help I'd start a new post so people can find, and help you.

there are a lot of solutions on here for this kind of thing that require business plan and that's because at the moment there is no suitable element that contains the caption that we can use inside the lightbox version of the image. So any solution that is going to automatically copy the caption from the grid into the lightbox will need to use javascript to read the caption from somewhere and move a copy into a new element. 

I'm adding this answer here as this is a CSS only option which isn't quite right in that it won't allow you to automatically copy captions it will allow you to get the desired effect. Essentially what I'm suggesting is to use CSS rules that target the lightbox photo and fill in the content. this means that your captions end up inside css rules so you'd have to duplicate them if you wanted them in the gallery grid too.

What we do here is create one rule that styles all our captions. we put an absolute position on it and I pin it to the bottom of the container element. I've centered it too because I haven't done anything about orientation of the picture here so this will work on landscape and portrait as it will centre.

Here's the rules, with two caption examples:

<style>
  
figure.gallery-lightbox-item .gallery-lightbox-item-img::after {
  display:block;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:25px;
  padding:2px;
  text-align:center;
  color:white;
  content:''
} 

  figure.gallery-lightbox-item[data-slide-url=eh93bxzp9wth135k95a1y8qkpopbv7] 
   .gallery-lightbox-item-img::after {
     content: 'Caption One'
   }

 figure.gallery-lightbox-item[data-slide-url=hfasdiorzzr0hmhb3shs8m0huja711-mcbhh-cfzz9] 
   .gallery-lightbox-item-img::after {
     content: 'Caption Two'
   }
  
</style>

so what you need to do is add a code block to your page in an empty section beneath the gallery section (or you could do this in the main site css but it seems better to contain the code inside the page that has the gallery) and add the code above to your page. non business plans will be able to add an HTML code block and embed the rules in a style block as I have done here.

What you will need to do is find your data-slide-url attributes and sub them in to the rules to set the captions. You can do this by looking in the source code of your site, or by publishing your gallery and then when you click the photo to open it in the url you'll see that the URL at the top of your browser will get an itemId appended to it. you need to copy those out and replace the data slide ids in your rules.

just keep adding rules underneath the main one changing each data-slide-url to the itemId you've noted down above and then set the content to the caption you want. 

as we've said, this is specifically a non-javascript version, so it won't update automatically and you'll have to edit your code block each time you edit pictures or captions to line up, but this could provide a stop-gap until squarespace either allow the feature or give us a better element to style.

Addendum: incidentally, just for css nerds, you can so nearly do this automatically with css, as there's an attr() function that can read attributes and so you could almost get it from the img tag's attributes (which do have the caption in) but unfortunately the img element is a self-closing tag and the pseudo-elements don't work.

I've tried to implement the code, but get "syntax error" on the line with <style> which means I don't get very far. Any ideas how I can solve this? 

5 hours ago, Benedicteeeee said:

I've tried to implement the code, but get "syntax error" on the line with <style> which means I don't get very far.

If you are trying to add this to the Custom CSS panel (instead of a Code Block) you will need to remove the style tags (<style> and </style>) at the start and end.

Did this help? Please give feedback by clicking an icon below  ⬇️