Gallery Caption workarounds for 7.1? ROUND TWO

1 minute ago, pixolnaut said:

Has there been an answer on how to add line breaks to the caption in lightbox?

I don't know anything about coding but have gotten close to what I'm looking for using the code provided by brandon.

Currently the lightbox display looks like this:

 

I would like it to look like how it does in the default galleries caption like this, but to have this only in the lightbox and not in the normal gallery:

Thank you in advance!

try add br tag

Quote

Clouds Over Ai Petri <br/>Oil on Board<br/> 2017

@tuanphan I've tried the <br> tag but that only adds the line break in the default caption and not in the lightbox caption. Any other ideas?

edit: I've found a janky workaround by using a 3 per em whitespace unicode to organise the text in the caption abit better. It's a little weird but it's the only thing that I've found to affect formatting in the caption.

https://qwerty.dev/whitespace/

Unfortunately line break unicodes I've found do not work.

Where I am at, at the moment:

It looks decent in mobile view but you have to fiddle around with the exact number of blank unicodes to insert. Not ideal but it does the job for now.

<script>
document.addEventListener("DOMContentLoaded", function() {

  function render(checked, index) {
    
    (function(p, show) {
      var map;
      var values;
      var messageValue;
      var messages;
      var name;
      var type;
      var k;
      map = document.querySelectorAll(p ? p : 'section.gallery-section,\x20.gallery-lightbox');
      name = map.length;
      for (; name--;) {
        values = map[name].querySelectorAll(show ? show : '[class*=\x27-item\x27]:not([class*=\x27item-\x27])');
        type = values.length;
        for (; type--;) {
          messageValue = values[type].getElementsByTagName('img')[0]['alt']['trim']();
          if (messageValue && messageValue.includes("png") == false && messageValue.includes("jpg") == false) {
            messages = document.createElement('div');
            messages.className = 'gallery-item-description';
            messages.textContent = messageValue;
            values[type].appendChild(messages);
          }
        }
      }
    })(checked, index);
  }
  render();
});
</script>

Here is an deobfuscated version of the original script. It works the same but is much more human readable. It also does not include image file names if they end in "png" or "jpg."

On 12/14/2020 at 9:40 AM, ShaneV said:

Thank you @ShaneV, works great! I needed and added a .gif exclusion in the script ;^)

if (messageValue && messageValue.includes("png") == false && messageValue.includes("jpg") == false && messageValue.includes("gif") == false)

 

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

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

Hi Brandon - 5/1/2020 - the link to the demo site you've supplied says it has 'expired' - is there any way to resuscitate it? - Thanks, Mark

On 12/13/2020 at 5:19 PM, pixolnaut said:

Has there been an answer on how to add line breaks to the caption in lightbox?

I don't know anything about coding but have gotten close to what I'm looking for using the code provided by brandon.

Currently the lightbox display looks like this:

 

I would like it to look like how it does in the default galleries caption like this, but to have this only in the lightbox and not in the normal gallery:

Thank you in advance!

Could you share your url?

Is possible to add captions to the lightboxes in a gallery using CSS?

1 hour ago, Misanthropology said:

Is possible to add captions to the lightboxes in a gallery using CSS?

It should require Custom js, with business plan or higher

Hi, thanks to @brandon, @tuanphan, and everyone who has contributed to this thread so far!  I got Brandon's code to work on main pages, but not for blog pages. Can anyone tell me what class selectors to pass into the function so it applies to gallery slideshows on blog pages?

example page: https://www.clarkgallery.com/artists/olga-antonova

On 3/4/2021 at 9:07 PM, clarkgallery said:

Hi, thanks to @brandon, @tuanphan, and everyone who has contributed to this thread so far!  I got Brandon's code to work on main pages, but not for blog pages. Can anyone tell me what class selectors to pass into the function so it applies to gallery slideshows on blog pages?

example page: https://www.clarkgallery.com/artists/olga-antonova

It looks like you solved with squarewebsite.org plugin?

Hi all,

I've got most of it working the way I want it to, thanks for this code @brandon @tuanphan

There's one final thing I need to solve, as do more people from what I've read in this thread.

I wish I could add line breaks in the captions that show up in the Lightbox. I've tried adding the <br> or <br/> codes in the description of the image but none of it seems to work.

Could you please provide the bit of code that makes this possible?

my website is: https://www.jjdw.nl/galleries/small-worlds

And it's the first image in this gallery that I've tried doing this with. 

Anyone? @tuanphan maybe?

@brandon @tuanphan

I'm having massive issues with this on mobile. When the caption is longer it reduces the size of the image instead of increasing the content area. Any thoughts?

https://bridgendathletics.org/about

password: bridgendathletics

@brandon 

Code has been working for me until a couple months ago now its showing the descriptions twice under the photo, anyone know how to fix?

9 hours ago, spekerdude said:

@brandon 

Code has been working for me until a couple months ago now its showing the descriptions twice under the photo, anyone know how to fix?

Can you share site url? We can check easier

7 hours ago, tuanphan said:

Can you share site url? We can check easier

https://www.precisioncam.ca/

22 hours ago, spekerdude said:

https://www.precisioncam.ca/

Add to Design > Custom CSS

/* hide 1 lightbox caption */
body.gallery-lightbox-body-hide-overflow .gallery-lightbox-item-wrapper+.gallery-item-description {
    display: none;
}

Hello Brandon,

Thank you very much for lightbox captions workarounds. I am now able to add them under images in a Masonry Gallery and the latter's  lightbox. However, the caption lines appear 2x under each lightbox image. (They also repeats 2x under the Gallery images  if I do not turn captions off in Gallery edit. They revert to 1x in Gallery only when I do.)  Adding/ removing the supplied CSS code does not seem to resolve the problem. The duplication seems to lie within Java.  Is there a specific line there which I can remove so that the Lightbox caption only runs 1x?

Many thanks.

10 hours ago, khnyc said:

Hello Brandon,

Thank you very much for lightbox captions workarounds. I am now able to add them under images in a Masonry Gallery and the latter's  lightbox. However, the caption lines appear 2x under each lightbox image. (They also repeats 2x under the Gallery images  if I do not turn captions off in Gallery edit. They revert to 1x in Gallery only when I do.)  Adding/ removing the supplied CSS code does not seem to resolve the problem. The duplication seems to lie within Java.  Is there a specific line there which I can remove so that the Lightbox caption only runs 1x?

Many thanks.

Add to Design > Custom CSS

/* hide 1 lightbox caption */
body.gallery-lightbox-body-hide-overflow .gallery-lightbox-item-wrapper+.gallery-item-description {
    display: none;
}

On 5/20/2021 at 7:11 AM, tuanphan said:

Add to Design > Custom CSS

/* hide 1 lightbox caption */
body.gallery-lightbox-body-hide-overflow .gallery-lightbox-item-wrapper+.gallery-item-description {
    display: none;
}

 

many thanks!

Hi, when i insert the code the imagedesciption is displayed twice. How do i fix that? did anyone else have this problem?

On 6/2/2021 at 8:55 PM, visualite said:

Hi, when i insert the code the imagedesciption is displayed twice. How do i fix that? did anyone else have this problem?

Use this CSS

/* hide 1 lightbox caption */
body.gallery-lightbox-body-hide-overflow .gallery-lightbox-item-wrapper+.gallery-item-description {
    display: none;
}

The 7.1 gallery grid masonry, captions are now being shown under the images without the colour border using your code.

Hi there,

I've tried a different options of code to show the caption on hover on a gallery and none of them works 😞

Here is the page where the caption doesnt show up : https://loooop.studio/home

Here is the code I've put on the Custom CSS : 

figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

Thanks in advance for the help !

11 hours ago, loooop said:

Hi there,

I've tried a different options of code to show the caption on hover on a gallery and none of them works 😞

Here is the page where the caption doesnt show up : https://loooop.studio/home

Here is the code I've put on the Custom CSS : 

figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

 

Thanks in advance for the help !

rename

grid to masonry