Gallery Caption workarounds for 7.1? ROUND TWO

@tuanphan Thank you - have email the details to you!

Thanks so much.

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!

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