Gallery Caption workarounds for 7.1?

Hello Brandon, @brandon

I am experiencing new issues with the code, specifically on ONE page, (the only page that uses Gallery-Masonry), and ONLY on iPhone devices. When I select the image to bring it into lightbox mode, the site crashes and gives me an error code. Again, this only happens on iPhones on that one page and the lightbox mode works fine on desktop.

I believe I have narrowed it down to the footer code. Do you know what the root of that problem could be?

On 7/29/2020 at 5:44 AM, GabyMSeasons said:

Hello Brandon, @brandon

I am experiencing new issues with the code, specifically on ONE page, (the only page that uses Gallery-Masonry), and ONLY on iPhone devices. When I select the image to bring it into lightbox mode, the site crashes and gives me an error code. Again, this only happens on iPhones on that one page and the lightbox mode works fine on desktop.

I believe I have narrowed it down to the footer code. Do you know what the root of that problem could be?

SS supported Caption. You can enable Gallery caption without using brandon's code.

Hello Brandon,

Big thanks for this code.  Using it I've been able to show image descriptions (using for photo credits) only within the Lightbox of a Masonry Gallery Section.  

Since then I've tried a few ways to link using different parts of the text to external pages (there may be multiple links per description, 1 for each credit):

1. First I tried including an anchor tag within the description for the image itself, however it looks like Squarespace strips out the HTML.
2. Next I executed a Javascript function following the call to "addGalleryItemDescriptions()" in your code. This function successfully updates the InnerHTML of the Div Class "gallery-item-description" elements to enclose certain string literals with the anchor tag.  By checking the resulting code via Inspect Element this appears to be working, however the link does not appear as a link should (no underline) and cannot be clicked.

Thank you for any insight you may be able to provide.

Evan and Aqualina Briggs.

@tuanphan @brandon Thanks for your help on this subject.  i'm trying to put line breaks in my lightbox caption.  i've tried the sf digital option, but the hashtags are not being translated to <br>.  I think that the javascript is not reading the description in the caption.  i'm a novice with coding, but i think that this is the issue.  how do i go forward?  thanks again!

17 minutes ago, ngsean said:

@tuanphan @brandon Thanks for your help on this subject.  i'm trying to put line breaks in my lightbox caption.  i've tried the sf digital option, but the hashtags are not being translated to <br>.  I think that the javascript is not reading the description in the caption.  i'm a novice with coding, but i think that this is the issue.  how do i go forward?  thanks again!

SS supported caption, you can edit Gallery > Enable caption, no need to use above code.

then use br tag, it will work.

@tuanphan for some reason, the line breaks aren't working for me.  it works in the masonry grid, but not in the lightbox.  here is how I see it and how i have entered it according to your suggestions:

thanks again for your help!

9 hours ago, ngsean said:

@tuanphan for some reason, the line breaks aren't working for me.  it works in the masonry grid, but not in the lightbox.  here is how I see it and how i have entered it according to your suggestions:

thanks again for your help!

Can you share url? We can check easier.

@tuanphan

sure:

opossum-guava-l2r8.squarespace.com

do i need to send you a log in?  i'll send via beaverhero.

Thank you!

@emmaj I'm with you 100% on this. I'm shocked this isn't a toggle of on/off since there is a description field available for each image.

Quote

 

Firstly I can't believe that there isn't currently a way to display image names and captions in 7.1 galleries. Particularly if these are being pitched at visual artists, designers, photographers et al who might want to explain their work. I love the idea of the Portfolio page with Galleries within and I really want to persist with 7.1 but I'm on a deadline and this is taking double the regular time, along with so many missing features that I'm used to. It's beginning to cost me and my client money. Tempted to re-start the site in 7.0 tbh.

Also seeing SO much lag when I'm building, ever-spinning squarespace pinwheels, blank editing windows when trying to edit any page or section

 

Does anyone happen to have the complete code to simply display description on gallery sections? (Grid:simple if it matters). This is like, ridiculous and a huge waste of time. I honestly don't even know what to think but the fact that I'm going a CSS route to display titles/descriptions is so frustrating.

On 9/18/2020 at 8:27 AM, tanya said:

@emmaj I'm with you 100% on this. I'm shocked this isn't a toggle of on/off since there is a description field available for each image.

Does anyone happen to have the complete code to simply display description on gallery sections? (Grid:simple if it matters). This is like, ridiculous and a huge waste of time. I honestly don't even know what to think but the fact that I'm going a CSS route to display titles/descriptions is so frustrating.

You can edit gallery section > Enable caption??

@brandon thank you so much for this incredible code.

wondering if you or @tuanphan  know if there's a way i can display the captions on hover *and* have the captions on the lightbox at the same time? i can only seem to do one or the other.

On 9/25/2020 at 7:06 AM, vvc said:

@brandon thank you so much for this incredible code.

 

wondering if you or @tuanphan  know if there's a way i can display the captions on hover *and* have the captions on the lightbox at the same time? i can only seem to do one or the other.

Can you share link to gallary? WE can check easier.

I think you need to use JavaScript to handle

@tuanphan here is the link to gallery: https://kangaroo-maracas-ggn6.squarespace.com/portfolio/savage-fenty

password: kamila

wondering if i can have both hover caption as well as captions in lightbox?

this is my current javascript code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

<script> 
  $('.has-background:not(:has(.sqs-video-background))').each(function() {
    var findImage = $(this).find('.section-background img');
    var imgUrl = findImage.data('src') + '?format=2500w';
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: .5,
    })
});
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
        jQuery(window).trigger('resize').trigger('scroll')
    }, 100)
}; 
</script>

<style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}main .has-background.background-width--inset{margin:4vw;padding:0!important}main .has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}.sqs-catalog .section-background img{visibility:visible!important;}.has-background .section-background .sqs-video-background img{visibility:visible!important}</style>

On 10/4/2020 at 3:10 AM, vvc said:

@tuanphan here is the link to gallery: https://kangaroo-maracas-ggn6.squarespace.com/portfolio/savage-fenty

password: kamila

 

wondering if i can have both hover caption as well as captions in lightbox?

 

this is my current javascript code:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

<script> 
  $('.has-background:not(:has(.sqs-video-background))').each(function() {
    var findImage = $(this).find('.section-background img');
    var imgUrl = findImage.data('src') + '?format=2500w';
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: .5,
    })
});
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
        jQuery(window).trigger('resize').trigger('scroll')
    }, 100)
}; 
</script>

<style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}main .has-background.background-width--inset{margin:4vw;padding:0!important}main .has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}.sqs-catalog .section-background img{visibility:visible!important;}.has-background .section-background .sqs-video-background img{visibility:visible!important}</style>

You mean: caption show on hover in lightbox?

Hi,

I have the same issue - I'm trying to make a gallery with longform captions (which also need formatting within it). Thanks @brandon for the code above - I used it and it is displaying the captions - but it's also duplicating the text.

Some part of the caption now shows up as it's supported by Squarespace 7.1 - but most of it gets cut off. (attached screenshot)

I'm also trying to show entire paragraphs of text with separate headings, and more info displayed on click in a lightbox - is there any other layout block other than Gallery that would be suited for this purpose? Thanks~

Hello, I am new using Squarespace,  I want to display the the captions under the images on ligthbox mode only and not in the gallery. I've tried every code shown on this forum and I just can't work it out. 
Also if there is any help on how to make the images larger on ligthbox mode or reduce de borders, so the images is display almost full screen.

https://cornet-leopard-f83n.squarespace.com
Password jamaica
Thank you 

Hello I am looking for something like this. I would really appreciate any insight!
Thank you 

On 5/9/2020 at 7:49 PM, noemipossible11 said:

Hi @brandon Thanks so much for all the insight. I have used the code for the masonry grid; I have hid the captions so they only appear in light-box once the image is clicked and thus opening the slideshow. I am wondering what CSS code to use/I can use to adjust the size of the image? I've attached a screenshot for reference. You'll see how the caption is much wider than the actual image, which is completely fine if I can somehow get the image to either fill the entire screen or simply be bigger. Thanks in advance!

On 11/30/2020 at 5:47 PM, websurz said:

Hello, I am new using Squarespace,  I want to display the the captions under the images on ligthbox mode only and not in the gallery. I've tried every code shown on this forum and I just can't work it out. 
Also if there is any help on how to make the images larger on ligthbox mode or reduce de borders, so the images is display almost full screen.

https://cornet-leopard-f83n.squarespace.com
Password jamaica
Thank you 

Have you found the solution yet?

14 minutes ago, tuanphan said:

Have you found the solution yet?

Hello @tuanphan no I haven't.  Do you have any suggestions?

Hi @tuanphan

Thank you and the additional members for this code and workaround, it's been a life saver!

I've managed to use your code injection & CSS to get my image captions only appearing on Lightbox view, which is fantastic and exactly what I was looking for. I have two questions that I would love your help on please!

1. I am struggling to get the caption to align right under my photo in Lightbox, and have used the following CSS:

.gallery-item-description {
  text-align: right !important;
}
.gallery-reel {
  .gallery-item-description {
    text-align: right !important;
  }
 

But no luck! I can see others have managed to align the lightbox caption how they'd like, and wondering what I'm doing wrong?

2. I would like to add a line break to the caption on Lightbox, so it has the Title "Andy Warhol- Artist" with the quote underneath the title " “I'm afraid that if you look at a thing long enough, it loses all of its meaning.”

Is there a way to have two captions or a line break in the description?

This is a trial site so I'm not sure how I can share the site with you?

Thank you!

On 12/2/2020 at 6:36 PM, denisebmitchell said:

Hi @tuanphan

Thank you and the additional members for this code and workaround, it's been a life saver!

I've managed to use your code injection & CSS to get my image captions only appearing on Lightbox view, which is fantastic and exactly what I was looking for. I have two questions that I would love your help on please!

1. I am struggling to get the caption to align right under my photo in Lightbox, and have used the following CSS:

.gallery-item-description {
  text-align: right !important;
}
.gallery-reel {
  .gallery-item-description {
    text-align: right !important;
  }
 

But no luck! I can see others have managed to align the lightbox caption how they'd like, and wondering what I'm doing wrong?

2. I would like to add a line break to the caption on Lightbox, so it has the Title "Andy Warhol- Artist" with the quote underneath the title " “I'm afraid that if you look at a thing long enough, it loses all of its meaning.”

Is there a way to have two captions or a line break in the description?

 

This is a trial site so I'm not sure how I can share the site with you?

Thank you!

Can you share link to gallery? We can check easier

@tuanphan Thanks for your reply!

It is a trial site for a client, so how can I share access of this with you?

This is an example of what I would love to replicate:

https://www.nadavkander.com/works-in-series

I would love to have the slideshow at the top, connected to a gallery underneath.

Thanks,

Denise

On 12/4/2020 at 8:18 PM, denisebmitchell said:

@tuanphan Thanks for your reply!

It is a trial site for a client, so how can I share access of this with you?

This is an example of what I would love to replicate:

https://www.nadavkander.com/works-in-series

I would love to have the slideshow at the top, connected to a gallery underneath.

Thanks,

Denise

You can setup password & share url

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