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

Hi @NuprinBoy. You understood correctly. You can control which galleries get descriptions by sending a CSS selector to the function. In your case, try this: In the first line of code in the funct

Posted Images

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?

Edited by GabyMSeasons
Adding tag of person I am asking a question to.
Link to post
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 2 weeks later...

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.

Edited by Aqualina
Clarification on one point
Link to post

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

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post

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

 

1952587435_ScreenShot2020-08-21at10_41_50AM.thumb.png.f6434f068cea85b01e856b3e542d2992.png

 

1955101932_ScreenShot2020-08-21at10_41_30AM.thumb.png.97fd78ac0a5e40f137ac6fd7701232a8.png

 

1631438731_ScreenShot2020-08-21at10_48_23AM.thumb.png.3a9029d7cfecd50638ecec9b15b483f6.png

 

thanks again for your help!

Edited by ngsean
Link to post
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 4 weeks later...

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

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post

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

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post

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

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 3 weeks later...

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~

Screen Shot 2020-10-26 at 4.52.09 PM.png

Edited by grao
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...