Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Gallery Caption workarounds for 7.1? ROUND TWO


dan3

Recommended Posts

  • Replies 166
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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 sup

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 @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 funct

Posted Images

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: 

1033428132_Screenshot1.thumb.png.1bdafd531fe763a0d0408d65eb4ce911.png

 

Screenshot 2...

 

Screenshot2.thumb.png.2ff0e039b5c69f0328ce3c159932821c.png

Link to post

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.

 

Edited by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to post

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. 

Link to post
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

Link to post

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!

Edited by nwatkins
Link to post

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.

Edited by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to post
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? 

Link to post

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.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to post

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.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to post

@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!!!

Edited by TheDrawingGal
Link to post

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.

 

 

Link to post

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.

Edited by underscore
Link to post

@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

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to post

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.

Screen Shot 2020-02-05 at 11.27.35 AM.png

Link to post

@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.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to post

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!

image example.PNG

 

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

password: demo    **Please see work pages.

Edited by KariLivs
clarification or requirements + site link
Link to post

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?

 

 

Screen Shot 2020-02-17 at 12.23.01 PM.png

Screen Shot 2020-02-17 at 12.22.14 PM.png

Edited by ClareLaLou
Link to post

Create an account or sign in to comment

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


×
×
  • Create New...