Gallery Caption workarounds for 7.1?

Posting again because my original post is missing.

I'm doing my first 7.1 site for an artist client who has a large portfolio of work. Since captions are not yet supported in the gallery or portfolio layouts, has anyone figured out a workaround? Or any way to mimic thumbnail image navigation? It's a requirement to caption the artist's images with the gallery, otherwise I may as well go back to a Brine layout. Thanks.

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 supporting multiple lines. So, the workaround below may still be of use.

---------------------------------------------------------------------

Hi @dan3.

Looking at the underlying gallery code, it appears that image descriptions are in-the-works to one degree or another. In the mean time, I've created a bit of code you can use to add image descriptions/captions to gallery sections in Squarespace 7.1 .

View Demo Site

JavaScript

• Insert via sitewide footer code injection.
• If you only want to add descriptions to some (not all) galleries, pass your own CSS selector into addGalleryItemDescriptions() (for example: "section[data-section-id='5db1f73f7a30760db464bb02']")
• For images within a targeted gallery that you do not want a description to appear, you must enter a space as the description (otherwise the filename will show).

<script>
/**
 * Add descriptions/captions to galleries in Squarespace 7.1.
 * JavaScript 
 * © @brandon (Squarespace Forum User)
 * This software is provided "as is", without warranty of any kind, express or implied.
 */
document.addEventListener("DOMContentLoaded", function() {
  addGalleryItemDescriptions();
	
  function addGalleryItemDescriptions(gs, gdzs) {
    var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs));
  }
});
</script>

CSS

• Insert in "Customer CSS", via the CSS Editor.
• The CSS below is very basic, adding a white box around the description and generally placing it at the bottom. You can customize to your heart's content.

/**
 * Add descriptions/captions to galleries in Squarespace 7.1.
 * CSS
 * © @brandon (Squarespace Forum User)
 * This software is provided "as is", without warranty of any kind, express or implied.
 */
body {
  width: 100%;
}
section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) {
  position: relative;
}
.gallery-item-description {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: black;
}
.gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow {
  .gallery-item-description {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 2% 6%;
    box-sizing: border-box;
  }
}
.gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel {
  .gallery-item-description {
    padding: 10px 25px;
    opacity: 1;
    transition: opacity 0.2s;
  }
  .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] {
    .gallery-item-description {
      opacity: 0;
    }
  }
}
.gallery-slideshow {
  .gallery-slideshow-list {
    position: static;
  }
  .gallery-slideshow-item-wrapper, .gallery-item-description {
    flex: 1 1 auto;
  }
}
.gallery-reel {
  .gallery-item-description {
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
  }
  &[data-width="inset"], &[data-width="inset"] {
    .gallery-item-description {
      max-width: 88vw;
    }
  }
  &[data-width="full-bleed"] {
    .gallery-item-description {
      max-width: 100vw;
    }
  }
}
.gallery-lightbox .gallery-item-description {
  margin-top: 1em;
  padding: 1em 2em;
  background-color: rgba(225, 225, 225, 1);
  transition: opacity 0.1s ease-out;
}
.gallery-lightbox-item[data-in=false] .gallery-item-description {
  opacity: 0;
}

This is of course experimental. Do let me know how it works for you, or if you have questions.

If you reply to this post, please do not quote the code in your reply. Doing so will create copies of the code which A) I would prefer not be copied and B) will propagate old versions of the code which are likely to fall out of date.

-Brandon

This is great! I will definitely give it a try. Thank you so much!

Hi @brandon
Is there a way to have this not effect other parts of the site. Seems to be working on logos sections alos. 

Thanks

Hi @jonaverill. If it's a gallery section that you've added logo images too, then it's a matter of passing the appropriately-exclusionary CSS selector to the function so that certain sections aren't selected. Another option is to set a space as the description for the image. See the second two bullet points under "JavaScript" in my post.

If it's a "logo wall" section you're talking about, I wasn't able to reproduce the issue. So if that's the case, could you provide a link to the page in question?

If it's a different sort of section you've added (that is, not a gallery section of some kind), what section was it?

Hey @brandon
So it was a default logo wall on a template, but i added another one to test & when you do that it doesn't replicate the issue. 
I was going to ask, is there anyway to add a link on the galleries, on the one i'm playing around with it seems to not be able to add a link either on the text or on the image. 

Thanks again for your help! 

Regarding the logo wall, that's strange @jonaverill. I'll have to swing back and see if I can duplicate it using a single section.

Regarding adding a link to a gallery image:

• I find adding links to gallery images in 7.1 to be quite fiddly. I'll set a link, click on another image, make some changes, then save the section. When I go back, the link I added isn't saved anymore. I found it works best if I set the link then immediately hit the "Close" link on the section.
• I've updated the code in my original answer to accommodate gallery items that have links added to them. It requires just a couple minor changes to both the JavaScript and the CSS.
• I don't think it's possible to add links to "slideshow" type galleries of any kind. I guess that sort of makes sense, but I wanted to point that out.

Hi @brandon

Thanks for this. I'm about to try it out on site I'm working on. Your last note from Nov 5 says you updated code on the "original answer" does that mean the original post is updated and I can experiment with that or is there another one I should look for?

1 hour ago, NuprinBoy said:

does that mean the original post is updated

Yes, that's correct.

Brandon, Thanks again I tested the code and it worked great. My client, however, does not want captions on the grid pages, the y want the grid to be void of text: (see attached) . They want the the text to appear only on the Lightbox instances. 

Is this possible. And is this what you are referring to when you said: 

On 10/25/2019 at 5:18 PM, brandon said:

If you only want to add descriptions to some (not all) galleries, pass your own CSS selector into addGalleryItemDescriptions() (for example: "section[data-section-id='5db1f73f7a30760db464bb02']")

Thanks, I'm new to Squarespace 7.1 and still stumbling through... 

  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 function replace

addGalleryItemDescriptions();

with:

addGalleryItemDescriptions(".gallery-lightbox");

If that doesn't work, provide a link to the site/page in question and I'll take a look.

-Brandon

On 10/25/2019 at 3:18 PM, brandon said:

This is really helpful thank you! 

Is there anyway to have the caption display only on certain images within the gallery grid? In the image below, I'd like to have only the colored blocks display the caption. Right now the images in the grid are pulling in the file name and I'd like those to be transparent. 

Yes, @hmfedders. You could do something like this, which would hide the description in a specific gallery on every-other item:

[data-section-id="5db2f35f9ff0e37436549a65"] .gallery-grid-item:nth-child(even) .gallery-item-description {
  display: none;
}

Or you could target a list of gallery items individually by using their data-slide-url attribute:

.gallery-grid-item[data-slide-url="1m274ar58gglbeuorp6quol3tmkhel-lx99y"] .gallery-item-description {
  display: none;
}

Do keep in mind that in the above examples, the data-section-id and data-slide-url would need to be changed to match your website. You can obtain these attributes using your browser's developer tools/inspector.

Hi Brandon, have used your code with modified tweaks to have the 7.1 gallery grid masonry captions showing under the images without a coloured border.

This works great with the images in the grid style and also when opened into the lightbox view as below.

 Problem I can't correct is that when the next or previous image is chosen in lightbox, the caption for the previous image still shows for 1/2 seconds overlapping with the caption for the current image. The only way i have managed to fix is by making a black box around the caption as shown below.

This works ok but it would be neater if I could maintain the same clean style without a background colour border as on the grid files. Is there something you could suggest that would help do this?

Thanks

This works great, quick question... Where there is a longer description vs a shorter one and the copy is stacked under the image the image gets smaller. Is there a way to keep all images the same size all the time?

thanks

@IvanOB: I'll take a look and see if things can be tweaked easily. If you can provide a link to an example page, it might speed things up.

@SW_2020: This might be doable. If you can provide a link to a page that shows the issue, that'd be great. Otherwise, I'll do what I can to recreate it in my own demo (but that might not be easy). Also, what gallery style are you using?

Hi Brandon, thanks for the offer. In the end I decided not to include captions and keep it clean so i am ok now.

Hi @brandon

Thank you for taking the time to help us all out with this work around!

I've just tried using inserting the css code in the site wide custom css injection (first attachment) for a simple slideshow galleries in the the new Classon template and it doesn't appear to have worked... do you have any pointers?

I've experimented with the Javascript and that works when injected into the page settings 'Advanced' custom code section (second attachement) but I need a bit more stylistic control over it.

When I put the css code into that same 'Advanced' section it then just shows all the code at the top of the page.  

Please excuse my ignorance if I'm missing something obvious... coding is still very new to me!

Basically, I just want to display the image descriptions under the simple slideshow images in a nice was justified to the left of each image.

Any help would be HUGELY appreciated!

Thank you in advance!

Hey @brandon this worked so great! I moved the text center of the image. But the only issue I'm seeing is with URL click throughs not working because it seems the text covers the clickable area. Any advice?

Hi @technopaul.

You could add the following to the CSS, where appropriate (depending on whether you want the rule to apply globally or just to a specific gallery or type of gallery):

.gallery-item-description {
  pointer-events: none;
}

Hi @AtelierDeux. The reason you're seeing raw code displayed on your site is due to inserting the code in the wrong location.

I've updated the original post to include links that explain how to add the code. Note that you have to use both the CSS and the JavaScript together, and insert them both according to the directions. In your case, you're using per-page header code injection which may also work, but best to do as the directions say (and now link-to).

Hi @brandon

Thank you so much for getting back to me... I completely misunderstood and this works perfectly now!

Your help is much appreciated, thanks again.

All best, 

Ben

Great - glad it's working for you @AtelierDeux. Don't forget to support the original post by liking/reacting accordingly! It's a small thing, but good to see how many people it's helping.

Done now @brandon, thank you.

One last thing... is there a line or two I could insert to adjust the letter spacing and font weight?

Yes, @AtelierDeux. In the CSS where you see ".gallery-item-description", within that scope (within the curly braces), add your letter-spacing rule. It'd end up looking something like this:

.gallery-item-description {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: black;
  letter-spacing: .2em;
}