Gallery Caption workarounds for 7.1?

Hi @ClareLaLou. Having spent a few minutes poking around, I think that gets a little too complicated, and not something I can do with the time I have. Because Squarespace has it setup so that images are typically matching in height, I'd have to do a bit more study on CSS grids, then test quite a lot to ensure there were no side-effects for the various galleries. So, I'm afraid, there's nothing I can do about it at the moment.

@brandon okay thanks for checking. If I want that functionality do you suggest I go back to 7.0?

I think the answer to that would depend on two things:

1. How long before Squarespace releases this caption/description feature officially.
2. Will Squarespace allow captions underneat, not over top, of the images if/when they do release the feature.

I wish I knew the answer to those, @ClareLaLou, but I honestly cannot even guess!

Thanks for your response @brandon. I just hired someone to do it for me since learning CSS wasn't going to happen this week! I think i'ts a valuable skill to have as a Squarespace designer!

Hi! I'm wondering if anyone knows how to have image captions and titles only display in Lightbox mode for 7.0 Brine templates? I'm writing this here since it's very similar topic to the topic of this original post. Thanks in advance!

Hi @brandon

I've read through this thread and forgive me if I missed the answer. Thank you so much for putting this together - I have a huge job coming up that relies totally on labelled gallery images.

But for my current project, I have a site with five galleries and I only want labels/descriptions on one of these. So, I determined the section data ID and placed it in the code injection as this:

document.addEventListener("DOMContentLoaded", function() {
  addGalleryItemDescriptions(section[data-section-id="5e584f84750bff750e72e2a8"]);

but it doesn't work. I tried a dot before the word section, no go. Have I misunderstood?

I did consider 'hiding' the description on the other 4 galleries (lol) but if client in future wants to add a gallery they won't have the skill to do this.

I've double checked the id a few times - I'm sure it's correct.

Thanks for your advice, if I sort this - it's gonna make a huge difference for future projects!

Jude

https://caper-cinnamon-7xmy.squarespace.com/history-of-the-fair?p

farmers

Hi @goodwincreative. The function receives a string as its only parameter. That means what you pass must be a string, wrapped in quotes. You can then use single quotes inside the string. Like this:

addGalleryItemDescriptions("section[data-section-id='5e584f84750bff750e72e2a8']");

Also, consider using the "<>" button in the toolbar when posting code on the forums. That makes it easier to read and check your code (and helps assure that the forum doesn't mess with it in some way when posting).
    
 

Hi @brandon. I tried adding the CSS you suggested. I am familiar with CSS, but far from expert. My client does not have the higher level account that lets me insert JS. Any chance you could take a look at what I'm missing? I tried adding some sample captions to the "Nature" page, which you can find under the menu item "Work." Of course, nothing is showing when I open an image in the lightbox.

The site is jorgepenastudio.com. The Passcode is Jorgeartstudio.    Thank you!

@EllieC: You'll need to add both the JavaScript and the CSS components (both parts are required). The JavaScript adds the captions. The CSS styles how they display. In some cases, you can add the JavaScript to a Markdown block on the page in question. That might not work due to how the script is initialized, but you can give it a try.

@brandon, I tried injecting the code directly into the page using a code block. It displays the JavaScript and did not provide any functionality. 

@EllieC: You mentioned that you do not have an account that allows adding custom code. Therefore you cannot add it via a code block either. That is why I mentioned the Markdown block (not the code block).

@brandon, I am slowly figuring this out. Thank you for offering so much help to all of us. Now I am trying to find the comment in here that talks about the lag issue when switching between images in lightbox mode.

Ivan O B experienced the same "lag" issue. When you switch from image to another in lightbox mode the previous caption overlaps for half a second. If you know how to fix that, I would be grateful. Thank you.

jorgepenastudio.com.  pass:jorge. I am still using the "Nature" page as my test: https://www.jorgepenastudio.com/nature 

Hi, does anyone know how to only have a caption on the image when it's in the lightbox?

@wildwithin, specify the light box in this section of the javascript that appears after the comments, at the beginning of the code (see highlighted red):

document.addEventListener("DOMContentLoaded", function() {
  addGalleryItemDescriptions(".gallery-lightbox");

On 3/9/2020 at 10:42 AM, EllieC said:

@brandon, I am slowly figuring this out. Thank you for offering so much help to all of us. Now I am trying to find the comment in here that talks about the lag issue when switching between images in lightbox mode.

Ivan O B experienced the same "lag" issue. When you switch from image to another in lightbox mode the previous caption overlaps for half a second. If you know how to fix that, I would be grateful. Thank you.

jorgepenastudio.com.  pass:jorge. I am still using the "Nature" page as my test: https://www.jorgepenastudio.com/nature 

@brandon, re-posting this comment, in case it got lost. You are probably very busy. There is an overlap or lag issue with the captions in the lightbox. When you switch between images, the caption you just saw sits on top of the new caption for about 1 second. I hope you can help? Thank you!

Hi @EllieC. I definitely want to get back to that...I can see the issue. Unfortunately it might be awhile. But I'll post back if/when I get to it.

Thanks @brandon for the code! It helped me a lot with a slideshow of historical images I'm trying to feature on my employers website. Really appreciate it.

Hi @glidinsk. Thanks for taking the time to post here. I appreciate hearing that it's helped out. Also, don't forget to like/upvote the original post when you can.

Hi @brandon 

MAYBE this is just what I need. Not sure yet. This code has great styling of text for light box view,

BUT.. I need to show my gallery in Simple Slideshow mode. And in this mode, the image description text is missing the semi-transparent backgound box, and also, the text appears as one long line and doesnt include all the text. 

Can you help me to correct the script, so that I will get all the text in a nice way in Simple Slideshow view?

Site: https://arena-2.squarespace.com/approach   4th section (only slide show gallery on that page). 

Password: Arenasite

I already added your code to the site wide footer and with the CSS editor.

Thanks!!

Thanks for this fix - I exclusively design artist websites and I won't be able to use 7.1 unless they give us caption capability soon. I added the first 2 blocks of code as suggested in the first posts. I altered slightly so that the captions are below.

Now, my problem is that the image sizes go a little nuts when this code is added. I don't have a lot of experience with CSS so I'm hoping someone can tell me why this is happening: (images not formatted to the same size)

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, @brandon. Have you had a chance to look at the overlap/lag issue with captions on the slideshow in lightbox mode?

jorgepenastudio.com.  pass:jorge. I am still using the "Nature" page as my test: https://www.jorgepenastudio.com/nature 

Thank you!

Hi!

@brandon the CSS did not work for me. Would you be able to help me?

I have page of projects which I display via a summary grid. The titles are displayed in this grid, but the problem occurs when I use an "Archive" dropdown to select projects that fall under a certain category. When I select a category it links to the Gallery which does not show titles below the images. How can I get titles to be displayed?

I paste the CSS code into the Custom CSS field and nothing happened. I tried to put it in the Gallery header and the code text just showed up in the header of my website.

This reverts the old gallery options incredibly easily. https://www.ghostplugins.com/steps/9ehnk49g

Hi

I?ve tried to add the CSS code but nothing happens
and I cannot add the JS code since I only have the basic subscription  so I don't have access to the tool code injection.
Any help?