Jump to content

Gallery Caption workarounds for 7.1?

Recommended Posts

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?

2030536586_ScreenShot86.png.6e8db47614df8ebc17a9fd000fb31ee7.png

Without Code Block.

482738136_ScreenShot87.png.6a7144b62894192d97889e27de857c0d.png

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.

Edited by CooperWhite
Link to comment
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?

2030536586_ScreenShot86.png.6e8db47614df8ebc17a9fd000fb31ee7.png

Without Code Block.

482738136_ScreenShot87.png.6a7144b62894192d97889e27de857c0d.png

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?

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

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.

 

 

Link to comment
  • 4 months later...

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!).

 

Lightbox-w-Caption.jpg

Edited by straybill
grammar
Link to comment
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!).

 

Lightbox-w-Caption.jpg

Can you share page url?

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
  • 1 month later...
On 3/12/2023 at 1:55 PM, straybill said:

Your site is deleted?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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...

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!

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

image.thumb.png.1bf0f119cbfbc8ebdfb95ac969c6199e.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
Posted (edited)
9 hours ago, Beyondspace said:

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

image.thumb.png.1bf0f119cbfbc8ebdfb95ac969c6199e.png

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.

Edited by diegofjorquera
Realized a mistake.
Link to comment

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

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
Posted (edited)

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.

image.thumb.png.52db860e8acf6ad7abfb61416c83bae4.png

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;
}

Edited by nowicluk
Link to comment
  • 2 weeks later...

@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

 

 

Screenshot 2023-05-30 at 12.08.53.png

Link to comment
 

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

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

Edited by Wisam
Mistake
Link to comment
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

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
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;
}

 

 

Link to comment

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>

 

 

 

 

 

 

Link to comment
  • John_SQSP changed the title to Gallery Caption workarounds for 7.1?
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

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

 

Edited by peterbjerg
Link to comment
  • 1 month later...

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.

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.