Gallery Caption workarounds for 7.1?

I tucked the Code Bock beneath a section of copy. This works fine in the desktop view, but on mobile the box creates a gap. Is there anyway to force the Code Block to be smaller?

Without Code Block.

With Code Block.

*Edit: I can get rid of the gap converting the code to Markdown:

.gallery-item-description { display: none !important; }

The gap disappears because the code is shorter. But the code flashes for a brief second on page redraw.

Weird.

*Update: The code used the Paragraph Medium color in the palette. If I change that to the background color, the code/flash disappears.

On 10/17/2022 at 10:00 PM, CooperWhite said:

I tucked the Code Bock beneath a section of copy. This works fine in the desktop view, but on mobile the box creates a gap. Is there anyway to force the Code Block to be smaller?

Without Code Block.

With Code Block.

*Edit: I can get rid of the gap converting the code to Markdown:

.gallery-item-description { display: none !important; }

The gap disappears because the code is shorter. But the code flashes for a brief second on page redraw.

Weird.

*Update: The code used the Paragraph Medium color in the palette. If I change that to the background color, the code/flash disappears.

Did you solve or still need help? If need help, can you share link to page in screenshot?

Thanks for checking up.

I finally did solve the problem of the code flashing by changing it's color by adjusting the Paragraph Medium choice in the color palette I'm using for the background. This makes the code the same as the background color.

The gap issue cause by the code was solved by making the code all one line instead of stacked. Markdown did not work though. The <style> tags were needed.

I've gone through this entire thread looking for a solution and haven't found anything that worked:\ Maybe it's because I'm trying to caption my video lightbox??? I dunno!

Of course, I'd love to have the option of adding a caption with Squarespace headings & paragraph fonts. Additionally, having the ability to adjust the position of the lightbox AND caption would be great!

I know, give me an inch and I'll go metric...

Below is an image of my video lightbox mocked up with a caption as I would like it in a perfect world (ha!).

5 hours ago, straybill said:

I've gone through this entire thread looking for a solution and haven't found anything that worked:\ Maybe it's because I'm trying to caption my video lightbox??? I dunno!

Of course, I'd love to have the option of adding a caption with Squarespace headings & paragraph fonts. Additionally, having the ability to adjust the position of the lightbox AND caption would be great!

I know, give me an inch and I'll go metric...

Below is an image of my video lightbox mocked up with a caption as I would like it in a perfect world (ha!).

 

Can you share page url?

Thank you!

https://robin-porpoise-38w8.squarespace.com/work

pw: fred23

On 3/12/2023 at 1:55 PM, straybill said:

Thank you!

https://robin-porpoise-38w8.squarespace.com/work

pw: fred23

Your site is deleted?

Hi! I don't know if this is the right place to ask, but I have some galleries that display images in a lightbox when clicked on. When the lightbox view is open, the image name is shown, and I want to remove it, as the description might be relevant at some point, but not the name.

I've tried some code suggestions from other threads but I haven't been able to make it disappear.

I'd really appreciate it if anyone knows how to do it :)

One of the galleries for example is on: https://www.jorqueraphoto.com/galleries/spa-classic-2023

Thanks a lot in advance!

1 hour ago, diegofjorquera said:

Hi! I don't know if this is the right place to ask, but I have some galleries that display images in a lightbox when clicked on. When the lightbox view is open, the image name is shown, and I want to remove it, as the description might be relevant at some point, but not the name.

I've tried some code suggestions from other threads but I haven't been able to make it disappear.

I'd really appreciate it if anyone knows how to do it 🙂

One of the galleries for example is on: https://www.jorqueraphoto.com/galleries/spa-classic-2023

Thanks a lot in advance!

Mean you want to remove the file name in the lightbox gallery right?

9 hours ago, Beyondspace said:

Mean you want to remove the file name in the lightbox gallery right?

Nevermind, I just realized I had an old code injection that was preventing me to hide the caption with CSS, just removed it and it's working perfectly fine.

Any one knows a solution to this problem?

" when the next or previous image is chosen in lightbox, the caption for the previous image still shows for 1/2 seconds overlapping with the caption for the current image."

On 5/15/2023 at 5:32 PM, diegofjorquera said:

Nevermind, I just realized I had an old code injection that was preventing me to hide the caption with CSS, just removed it and it's working perfectly fine.

Glad to hear that!

For the website https://octahedron-tiger-52rc.squarespace.com/afghanistan-up-close (password: tcl2022) I am using the following codes which work perfectly fine except the caption gets cut off automatically. It seems there is a limited word count. How do I avoid captions to be cut? Please check the first image of the link provided above. I attached a screenshot below.

Code Injection > Footer:

<script>
/**
 * Add descriptions/captions to galleries in Squarespace 7.1.
 * JavaScript
 * © @brandon (Squarespace Forum User)
 * This software is provided "as is", without warranty of any kind, express or implied.
 */
document.addEventListener("DOMContentLoaded", function() {
  addGalleryItemDescriptions(".gallery-lightbox");

  function addGalleryItemDescriptions(gs, gdzs) {
    var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs));
  }
});
</script>

CSS: 

// Caption in Lightbox //

body {
  width: 100%;
}
section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) {
  position: relative;
 }
.gallery-item-description {
  font-family: "Europa", serif;
  font-style: regular;
  font-size: 16px;
  line-height: 1.4em;
  color: #061A37;
}
.gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow {
  .gallery-item-description {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: rgba(255, 255, 255, 1);
    padding: 2% 6%;
    box-sizing: border-box;
  }
}
.gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel {
  .gallery-item-description {
    padding: 10px 10px;
    opacity: 1;
    transition: opacity 0.2s;
  }
  .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] {
    .gallery-item-description {
      opacity: 0;
    }
  }
}
.gallery-slideshow {
  .gallery-slideshow-list {
    position: static;
  }
  .gallery-slideshow-item-wrapper, .gallery-item-description {
    flex: 1 1 auto;
  }
}
.gallery-reel {
  .gallery-item-description {
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
  }
  &[data-width="inset"], &[data-width="inset"] {
    .gallery-item-description {
      max-width: 88vw;
    }
  }
  &[data-width="full-bleed"] {
    .gallery-item-description {
      max-width: 100vw;
    }
  }
}
.gallery-lightbox .gallery-item-description {
  margin-top: 1em;
  padding: 1em 1em;
  background-color: #ffffff;
  transition: opacity 0.1s ease-out;
}
.gallery-lightbox-item[data-in=false] .gallery-item-description {
  opacity: 0;
}

@tuanphan @brandon I've got this working and displaying the captions 🙌 , but the JS code strips out any HTML tags in the description. I add HTML to the description for extra styling and paragraph spacing e.g.

Makgadikgadi Meerkat
<span class="comment-desc">A family of meerkats, Makgadikgadi Pans, Botswana.</span>

<span class="comment-image-id">Image ID: WBL-Makgadikgadi-Meerkats-140121045120</span>

I've looked at @brandon's JS, but I am unsure how to update it to maintain the HTML.

Here is an example page: https://wildlife.photograffix.co.uk/birds?itemId=g0tle8zyd74qkwo7j8i03b4vqj71ud

On this page, the caption should display as the attached image if the HTML tags remain in place.

Can you offer any help, please?

Thanks

Marco

@tuanphan & @brandon, I developed a fix to add HTML tags to the gallery item description.

In the description for the photo, I use spanClose, spanDes and spanID, which the JS below then replaces with </span>, <span class="comment-desc"> and <span class="comment-image-id">

For example, the following description text

Makgadikgadi Meerkat
spanDes A family of meerkats, Makgadikgadi Pans, Botswana. spanClose
spanID Image ID: WBL-Makgadikgadi-Meerkats-140121045120 spanClose

becomes

Makgadikgadi Meerkat
<span class="comment-desc"> A family of meerkats, Makgadikgadi Pans, Botswana. </span>
<span class="comment-image-id"> Image ID: WBL-Makgadikgadi-Meerkats-140121045120 </span>

You can then target the new classes with CSS., eg.

.comment-desc{

display:block; //forces new line

}
Script to add to the footer

<script>
   document.addEventListener("DOMContentLoaded", function() {
var descriptions = document.getElementsByClassName("gallery-item-description");
for (var i = 0; i < descriptions.length; i++) {
  descriptions[i].innerHTML = descriptions[i].innerText.replace('spanDes', '<span class="comment-desc">').replaceAll('spanID', '<span class="comment-image-id">').replaceAll('spanClose', '<span>');
  }
});
</script>

Hello all,

I've tried several versions of the above to make captions appear on the Lightbox images but doesn't seem to work. Can anybody advise?

https://www.wordsbydf.com/portraits-1

Hi @Wisam  - The URL you provided doesn't exist. Let us know which page you want us to check and which code you have injected. 

22 hours ago, Photograffix said:

Hi @Wisam  - The URL you provided doesn't exist. Let us know which page you want us to check and which code you have injected. 

Thanks so much for checking @Photograffix
The new URL is www.wordsbydf.com/portraits

I'm using Amal template on Squarespace 7.1 and would like the captions to appear on the "gallery lightbox images" in my site's <p2> styling

On 6/17/2023 at 7:23 PM, Wisam said:

Thanks so much for checking @Photograffix
The new URL is www.wordsbydf.com/portraits

I'm using Amal template on Squarespace 7.1 and would like the captions to appear on the "gallery lightbox images" in my site's <p2> styling

<p2> tag doesn't exist

Change it to <p> then we can use CSS to change style to p2 style

On 6/17/2023 at 1:23 PM, Wisam said:

Thanks so much for checking @Photograffix
The new URL is www.wordsbydf.com/portraits

I'm using Amal template on Squarespace 7.1 and would like the captions to appear on the "gallery lightbox images" in my site's <p2> styling

In order to get the captions to show you need to add the JS code as per this comment https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two/?do=findComment&comment=333248

To change your CSS to match your site styling for the lightbox caption, you will need to add this to your custom CSS

.gallery-item-description {
    font-family: orpheus-pro;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.6em;
    font-size: 14px;
    color: white;
}

THANKS A TON!

PLEASE, could any one solve this problem of captions not changing fast enough with image shift in lightbox view.

" when the next or previous image is chosen in lightbox, the caption for the previous image still shows for 1/2 seconds overlapping with the caption for the current image."

Site/page: https://arnoldmikkelsen.squarespace.com/europa

Password: Citron 

I only added captions to two first images on page, but that is enough to reveal the "hanging captions" problem 

Code I use (including Java scrips). Injected into Header

<script>

document.addEventListener("DOMContentLoaded", function () {

    // configure the classes we're looking for

    const listClass = "div.gallery figure";

    const linkClass = "div.gallery-strips-item-wrapper a, div.gallery-grid-item-wrapper a, div.gallery-masonry-item-wrapper a";

    const lightBoxCaption = "lightbox-caption";

    const lightboxSlideSelector = "div.gallery-lightbox-list figure[data-slide-url='{0}']"

    // select all gallery elements, find their captions

    // if they exist then extract the slide id and add a new caption element

    // to the lightbox slide

    const n = document.querySelectorAll(listClass);

    for (var i = 0; i < n.length; i++) {

      const a = n[i].querySelector(linkClass);

      const c = n[i].querySelector("figcaption");

      if (a && a.href && c) {

        const id = a.href.split("=")[1];

        const lbSelector = lightboxSlideSelector.replace("{0}",id);

        const lb = document.querySelector(lbSelector);

        const cp = document.createElement("figcaption");

        cp.className = lightBoxCaption;

        cp.innerHTML = c.innerHTML;

        lb.appendChild(cp);

      }

    }

  });

</script>

<style>

figcaption.gallery-caption {

  display:none;

}

figcaption.lightbox-caption {

position: relative;

    margin-right: auto;

    margin-left: auto;

    width: auto;

    bottom: auto;

    max-width: 1000px;

  font-family: source code pro;

  color:grey;

    font-size: 14px;

}

</style>

<style>

.gallery-lightbox-background {

    opacity: 1.0;

}

  </style>

<style>

.gallery-lightbox-item[data-in=false] .gallery-item-description {

  opacity: 0;

  transition: opacity 0.1s ease-out;

}

  </style>

On 6/24/2023 at 3:14 PM, peterbjerg said:

PLEASE, could any one solve this problem of captions not changing fast enough with image shift in lightbox view.

 

" when the next or previous image is chosen in lightbox, the caption for the previous image still shows for 1/2 seconds overlapping with the caption for the current image."

 

Site/page: https://arnoldmikkelsen.squarespace.com/europa

Password: Citron 

I only added captions to two first images on page, but that is enough to reveal the "hanging captions" problem 

 

 

 

Code I use (including Java scrips). Injected into Header

 

 

 

 

<script>

document.addEventListener("DOMContentLoaded", function () {

    // configure the classes we're looking for

    const listClass = "div.gallery figure";

    const linkClass = "div.gallery-strips-item-wrapper a, div.gallery-grid-item-wrapper a, div.gallery-masonry-item-wrapper a";

    const lightBoxCaption = "lightbox-caption";

    const lightboxSlideSelector = "div.gallery-lightbox-list figure[data-slide-url='{0}']"

    // select all gallery elements, find their captions

    // if they exist then extract the slide id and add a new caption element

    // to the lightbox slide

    const n = document.querySelectorAll(listClass);

    for (var i = 0; i < n.length; i++) {

      const a = n[i].querySelector(linkClass);

      const c = n[i].querySelector("figcaption");

      if (a && a.href && c) {

        const id = a.href.split("=")[1];

        const lbSelector = lightboxSlideSelector.replace("{0}",id);

        const lb = document.querySelector(lbSelector);

        const cp = document.createElement("figcaption");

        cp.className = lightBoxCaption;

        cp.innerHTML = c.innerHTML;

        lb.appendChild(cp);

      }

    }

  });

</script>

<style>

figcaption.gallery-caption {

  display:none;

}

figcaption.lightbox-caption {

position: relative;

    margin-right: auto;

    margin-left: auto;

    width: auto;

    bottom: auto;

    max-width: 1000px;

  font-family: source code pro;

  color:grey;

    font-size: 14px;

 

}

</style>

 

<style>

.gallery-lightbox-background {

    opacity: 1.0;

}

  

  </style>

 

<style>

.gallery-lightbox-item[data-in=false] .gallery-item-description {

  opacity: 0;

  transition: opacity 0.1s ease-out;

}

  </style>

 

 

 

 

 

 

Can you remove the script code? I will try test some code

11 hours ago, tuanphan said:

Can you remove the script code? I will try test some code

Remove ALL code from header? 

Sure

(Remember.. goal is, only to show captions in Lightbox mode, and to captions change instantly when going from one image to the next. I dont mind "ease out", but I dint want delay/overlapping.)

Hello, I had gallery captions that displayed fine when I first published, then some of them disappeared the second day, now none of them show when viewing on a desktop. All seem to display on mobile. I have tried different section colors, gallery layouts, turned captions on and off, tried lightbox mode, etc. They show in edit mode, but do not show in my browser. I skimmed this entire thread and am wondering if someone can give me an update. Is the js and css code still necessary to display captions? Is there no alternative for a personal site without js capability? Thank you.