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

This is an update to let you know that I've added just a couple lines of CSS to fix the issue with the lightbox caption delay/lag issue. The lines are added at the end of the CSS in the original post.

Posted Images

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!

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

 

Link to post

@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 post
<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 post
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 post
  • 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 post
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 BaNgan from 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 lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
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 post
  • 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 BaNgan from 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 lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
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 post

Create an account or sign in to comment

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


×
×
  • Create New...