Gallery Caption workarounds for 7.1?

Thank you @brandon 🙏🏻

Thanks so much for all this info @brandon & others... 

Firstly I can't believe that there isn't currently a way to display image names and captions in 7.1 galleries. Particularly if these are being pitched at visual artists, designers, photographers et al who might want to explain their work. I love the idea of the Portfolio page with Galleries within and I really want to persist with 7.1 but I'm on a deadline and this is taking double the regular time, along with so many missing features that I'm used to. It's beginning to cost me and my client money. Tempted to re-start the site in 7.0 tbh.

Also seeing SO much lag when I'm building, ever-spinning squarespace pinwheels, blank editing windows when trying to edit any page or section

I've implemented the suggested JS / CSS above and it looks okay (thanks heaps!) will tweak styles once I get it working the way I want. My client has large descriptions - see the top right example with some lorem ipsum in the first screen shot. Which looks really crappy when over the image. It looks okay in the lightbox - see second example - with allowance for the whole para is there.

(I'm not great at code here - so could use some help)

Q1: Do you know how I can remove the caption from the Gallery sections and have it remain in the lightbox?

Q2: What CSS change should I use I I want the captions centered rather than left aligned under the image?

Q3: Would there be a way to style the Caption in the lightbox so that we see an Image Title, then a Description below or even in a Hover? Or am I just asking too much and should I wait til 7.1 galleries are improved?

Thanks all 🙂

Screenshot 1: 

Screenshot 2...

Hi @emmaj.

A1: There are a couple ways to do this. The JavaScript is setup so that you can pass in your own CSS selector. That allows you to set which galleries get descriptions (by default, all of them do). In your case, it sounds like you only want to select gallery lightboxes. So replace this line in the JavaScript:

addGalleryItemDescriptions();

with

addGalleryItemDescriptions(".gallery-lightbox");

An alternative way (instead of the above) would be to simply leave the JavaScript alone (so all galleries would still have descriptions) but then hide it on certain galleries using CSS. You'd use your browser's inspector/developer tools to find the correct selectors and write the CSS. Something like this might work:

section.gallery-section .gallery-item-description {
  display: none !important;
}

A2:

.gallery-item-description {
  text-align: left;
}

A3:

This would technically be possible by using the image file name as the title. You'd be sure you name your file "This is my title.jpg", then the JavaScript component of the code I wrote could be amended to add that as the title (minus the file extension ".jpg".). That'd take a fair bit of additional custom development time, but it is possible.

Thanks @brandon - that's brilliant, worked perfectly for both. Great to give my client the option 🙂

hi @brandon this has been working great for me but is there a way to have the description box under the image instead of on top of it? 

Hi brandon. This has been working great but can the description boxes be placed under the image instead of on top. I tried adding a bottom and top line in the CSS code but if I do the box disappears. 

12 minutes ago, Avalenzuela said:

Hi brandon. This has been working great but can the description boxes be placed under the image instead of on top. I tried adding a bottom and top line in the CSS code but if I do the box disappears. 

@brandon

What gallery type are you using, @Avalenzuela, and can you provide a link to your site?

Hi! Is there a way to apply this code to separate image blocks? I don't like the formatting of the gallery that squarespace provides for what I am trying to do and want to apply this lightbox technique to images by themselves on a page. Also what is the RGBA code to make the box fully white? Mine comes up gray. Thanks!

Yes, you can do that @Avalenzuela. You can add this:

.gallery-masonry .gallery-item-description {
  position: relative;
}

Of course, rather than add more code as an override, you could instead edit the source CSS that I provided in my original post so that the descriptions are relatively positioned. That'd be cleaner. You'll probably want to customize the look in other ways too.

5 minutes ago, brandon said:

Yes, you can do that @Avalenzuela. You can add this:

.gallery-masonry .gallery-item-description {
  position: relative;
}

Of course, rather than add more code as an override, you could instead edit the source CSS that I provided in my original post so that the descriptions are relatively positioned. That probably be cleaner. You'll probably want to customize the look in other ways too.

Thank you! Yes I tried doing it editing the source CSS but I don't know how. Could you provide an example of that code and where it would be placed? 

@brandon Should I be adding that to the java script or the CSS? 

2 minutes ago, Avalenzuela said:

@brandon Should I be adding that to the java script or the CSS? 

never mind it worked. Is there a way to make every box the same size no matter the amount of text? 

Well, the code I wrote is specifically for galleries, @nwatkins. It could be repurposed for images; it might even work as-is by passing in different selectors. But that'd take some additional development time, testing, etc.

Yes, you could define fixed heights and overflow-y properties to achieve consistent caption sizes @Avalenzuela. It's a matter of writing some additional CSS, testing it out, optimizing it (in case it's more efficient to edit the source as opposed to overriding it), etc. That's a bit beyond what can be provided here on the forum for free, however.

@brandon This feed is so incredibly helpful! I have one follow up question to the title field. 

I also have a client who is displaying artwork, each piece has a title and the medium it was created in. I am hoping to be able to use html tags to format the data. Ideally I would have Title<br>Media Used. However, the title field strips out the html when the page generates. Is it possible to have the title field honor the HTML?

Thank you so much in advance!!!

I've got an idea on how to do that, @TheDrawingGal. Let me see what I can do...

All this info is so great @brandon

In case Squarespace is keeping an eye on this, the most annoying thing now for my client is that they will have to go from a Personal to a Business plan to allow for the JS customisation. 

Adding captions to galleries is free for a Personal pricing plan in 7.0 ... hopefully the captions will be also added as default for 7.1.

Hi @brandon I see this is working somewhat for us.  Our goal is to hover over an image in a gallery strip, grid, etc. where our photo overlays a full sized black background with some opacity and then have text on top of it prior to clicking.  Any ideas how to tweak the code...please.  We have been stuck on it for five or more hours.

@underscore. Are you comfortable editing and writing CSS? If so, it's simply a matter of editing the applicable CSS in the original post. However, you can add this to it if you'd rather do that:

.gallery-strips-item .gallery-item-description {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.gallery-strips-item:hover .gallery-item-description {
  opacity: 1;
}

If that doesn't work, it's probably because you're not actually using the "strip" gallery design, but rather are using some other gallery design. In that case, it's just a matter of changing `.gallery-strips-item` to the corresponding class for your gallery type.

-Brandon

Hi @brandon,

So it works somewhat for us.  It is closer to the work we get but are having trouble.  It needs to be able to be clickthrough to our video for the client.  So what we are trying to accomplish is:

>gallery strip
>>hover over specific photo
>>>when hovering a color semi-transparent color comes over photo with text of project
>>>>final part is when we click it takes us to the link associated it with it for the video Lightbox pop up.

@underscore, that should all be doable using CSS. For example, I've added `pointer-events:none` to the previously posted code. That prevents the hover from interfering with the click.

To get a full width/height color overlay, it's simply a matter of altering the CSS in the original answer that includes the CSS portion of the code (you don't have to alter the JavaScript part).

Another concern I'll share with you is this: consider what will happen for viewers who are on mobile/touch devices with no "hover" state? You're going to have to consider that, and write custom CSS accordingly. Keep in mind, there is currently no way to detect whether a device has a hover state or not (many Windows-based devices can be either or both at any given time). That is why I usually avoid hover-based UI in general (despite the fact that I am rather familiar with all of the various workarounds and have written quite a lot of code related to it).

In any case, as I said you should be able to achieve what you're after using only CSS. If you need additional customization, you'll want to consider hiring a developer to help you.

Hi @AtelierDeux Were you able to figure out how to display the text to the left of the image? I've attached a screenshot with what I mean, but maybe the image and text would be flipped.

I have used @brandon's code previously for the gallery overlay effect, but they want to keep the images clean. Would you mind sharing your solution?

They only want the images like a gallery with descriptions, no text over images, no need to click anything else.

Thanks!

Linking to website in case someone could help: https://contrabass-caper-6l3w.squarespace.com/

password: demo    **Please see work pages.

Hi @KariLivs. It seems the password "demo" doesn't work. Happy to take a look if access to the page can be had.

Hi @brandon, Thanks for the great workaround.

Please see the images attached. I have the captions working but I want them to sit underneath the images, rather than over the top. I've tried this in a couple different layouts but the problem remains the same. I've also played around with the css and I can get the caption to move down but then it is hidden underneath the next image. Do I need to adjust the spacing of the gallery itself? How can I do this please?