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

Gallery Caption workarounds for 7.1? ROUND TWO

Recommended Posts

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.


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

Share this post


Link to post

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!


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

Share this post


Link to post

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!

Share this post


Link to post

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!

Share this post


Link to post
Posted (edited)

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

 

Edited by goodwincreative

Share this post


Link to post

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


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

Share this post


Link to post

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!

Share this post


Link to post

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


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

Share this post


Link to post
Posted (edited)

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

Edited by EllieC
update

Share this post


Link to post

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


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

Share this post


Link to post
Posted (edited)

@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 

Edited by EllieC
update

Share this post


Link to post
On 10/25/2019 at 2:59 AM, dan3 said:

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.

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. 

Share this post


Link to post

@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");

Share this post


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

Share this post


Link to post

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.


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

Share this post


Link to post

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.

Share this post


Link to post

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.


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

Share this post


Link to post

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

Share this post


Link to post

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)

Screen Shot 2020-03-21 at 8.32.04 PM.png

Share this post


Link to post
Posted (edited)

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.

Edited by AllisonP

Share this post


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