Jump to content

Gallery Caption workarounds for 7.1? ROUND TWO

Recommended Posts

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:

1384822414_Screenshot2020-12-13181542.thumb.jpg.f114ae5a2b494c69e1c640af52eaa153.jpg

 

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:

382756672_Screenshot2020-12-13181627.thumb.jpg.a00ecf7d87ef78df105cbd1752fd21a7.jpg

Thank you in advance!

try add br tag

Quote

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

1189176498_Screenshot2020-12-14134511.thumb.jpg.07dee10ddb888632977bd6abb82b1ae2.jpg1772726946_Screenshot2020-12-14134448.thumb.jpg.2e07651be6056dffc2bfd0de55172569.jpg

Edited by pixolnaut
Placeholder solution
Link to comment
<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."

Link to comment
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)

 

 

Edited by Mieke
Link to comment
  • 3 weeks later...
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

 

Link to comment
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:

1384822414_Screenshot2020-12-13181542.thumb.jpg.f114ae5a2b494c69e1c640af52eaa153.jpg

 

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:

382756672_Screenshot2020-12-13181627.thumb.jpg.a00ecf7d87ef78df105cbd1752fd21a7.jpg

Thank you in advance!

Could you share your url?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 month later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...

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. 

1124263990_Screenshot2021-04-05at11_18_55.thumb.png.9801897052b74a73672ff1ca950e0c1c.png

 

1770812024_Screenshot2021-04-05at11_19_27.thumb.png.7a9f383b06bafa51708198f659070b8a.png

Link to comment
  • 1 month later...
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?

mljk.JPG

Can you share site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
22 hours ago, spekerdude 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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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 !

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.