Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 5
wklz

Captions under grid-style Gallery Blocks (recap)

Question

Hello Guys,

I have seen a lot of posts on this subject, that had some great code workarounds!

I thought it would have been nice to gather them all and take videos to show how to achieve captions under grid-style Gallery Blocks in Squarespace 7, it works also on Squarespace 6

I am no code expert, but I have gathered the solutions in these posts:

http://answers.squarespace.com/questions/55687/hoverimage-titles-on-gallery-grid-images

Here it is the guide I have drafted, I would like to point out again this is not my code and I have found it in the resources above, so I am not able to troubleshoot it :)

I have divided it into two sections:

• Make the captions display at all times


• Make them display on hover

1 • Make the captions display at all times

This is how it looks like: here

This is the code that should be entered:


#block-yui_3_17_2_8_1420902652606_4622 .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; }

This video shows you step by step where to retrieve the #block element using Chrome and how to add the code to your Squarespace 7 site:

In order, for it to work you will have to replace the following #block-yui3172814209026526064622 with your #block ID for your Gallery Block.

If you remove the following from the CSS snippet: #block-yui3172814209026526064622, all gallery blocks with grid style that you have will display image file names.

2 • Make them display on hover

This is how it looks like: here


.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; position: inherit; background-color: rgba(255,255,255,0.9); top: -18px; margin-bottom: -18px; opacity: 0; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { opacity: 1; } @media only screen and (max-width: 1024px) { .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { opacity: 1; } }

I took a video to show you how to implement this solution:

I hope this is useful to someone, it worked for me :)

Edited by wklz

Sell crazy some place else, we are all stocked up here

Share this post


Link to post

22 answers to this question

Recommended Posts

  • 3
Guest

Try using the summary block. Works great.

Share this post


Link to post
  • 4

Note: You don’t need to use the block ID if you don’t mind all the Grid Gallery Blocks on your site showing these titles. Just add this to the Custom CSS Editor:

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block }

Or, add this to the Page Header Code Injection to have this affect all the Grid Gallery Blocks on a single page:

<style>.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block }</style>

Edited by squareology

Share this post


Link to post
  • 0

Thanks so much for this! I tried option 1, I can’t get it to work for videos in a grid though. Do you know if that’s possible?

Edited by danileh

Share this post


Link to post
  • 0

This has failed to work for me in the Horizon Template where I am using the Gallery Block to display videos in a grid format. It fails to allow me the title captions display.

If anyone has further experience in this or can assist me, it would be greatly appreciated.

Share this post


Link to post
  • 0

This has failed to work for me in the Horizon Template where I am using the Gallery Block to display videos in a grid format. It fails to allow me the title captions display.

If anyone has further experience in this or can assist me, it would be greatly appreciated.

Share this post


Link to post
  • 0

Great post - exited to try it out in my scholarship service gallery - and I will keep you posted!

By the way, you are absolutely right. I have come across hundreds of hundreds of requests on this subjects. I thought I was an artist, businessman etc., but suddenly I found myself coding simply because I want to display image titles in my grid gallery to show my work.

Here is another person who really get to the heart of the matter with her page: Whitney Oldenburg

Edited by Soren Madsen

Share this post


Link to post
  • 0
Guest

I'm using a similar code but without the div id#I put the CSS on the page so it wouldn't affect other pages.The reason I'm using this instead of the summary grid is I need more than 30 images.

Share this post


Link to post
  • 0
Guest

I'm using a similar code but without the div id#I put the CSS on the page so it wouldn't affect other pages.The reason I'm using this instead of the summary grid is I need more than 30 images.

Share this post


Link to post
  • 0
Guest

Agreed, this would be great but it doesn't look like it's built in like the caption is. Let me know if you find an answer. Can you use the summary block?

Share this post


Link to post
  • 0

Hi all. I am using the grid gallery and the captions showing up all the time as I want, but they are cut off after one line. I'd like the text to wrap onto two lines etc. if they are longer captions. Any ideas on how to do this?

The page I am trying to achieve this on is http://kaitlynsykes.com/production (password is 6138271457). I am using the Devlin template.

Share this post


Link to post
  • 0

In my experience updating my Squarespace website for my filmmaking business, I ran into an issue displaying titles and descriptions on my video thumbnails in the gallery grid; something to do with a bug on squarespace' behalf. I wrote some code to get around this, which I will share below. I also created some code to reveal the titles/descriptions whilst curser hovers over:

var x = document.getElementsByClassName("sqs-video-wrapper"); var i; for(i = 0; i < x.length; i++) { var labelstr = x.getAttribute("data-html"); var labels = labelstr.match(new RegExp('title="' + "(.*)" + '" ')); var newdiv = document.createElement('div'); var classatt = document.createAttribute('class'); classatt.value = "image-slide-title"; newdiv.setAttributeNode(classatt); if (typeof labels[1] !== 'undefined') { newdiv.appendChild(document.createTextNode(labels[1])); x.parentNode.parentNode.appendChild(newdiv); console.debug(labels[1]); } }

Hover display code:

.image-slide-title { display: none; }


        .margin-wrapper:hover .image-slide-title {
           display: block;
       }




Filmmaker at www.filma-king.co.uk

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...