Jump to content

Captions under Lightbox images

Recommended Posts

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?

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

 

Contact Us for detailed help

Common Squarespace Tips

Sharing Your Site Link

Squarespace web designers in Perth WA.

Link to comment
  • 3 weeks later...

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.

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
  • 1 year later...
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  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.