Jump to content

Captions under grid-style Gallery Blocks (recap)

Recommended Posts

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

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

Link to comment
  • 3 months later...
  • Replies 22
  • Created
  • Last Reply

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>

Link to comment
  • 3 weeks later...
  • 2 weeks later...
  • 1 month later...
  • 2 weeks later...

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.

Link to comment

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.

Link to comment
  • 1 month later...

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

Link to comment
  • 4 weeks later...
  • 2 months later...
  • 4 weeks later...
  • 2 months later...

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.

Link to comment

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.

Link to comment
  • 2 months later...

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.

Link to comment

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

Link to comment
  • 4 months later...

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • 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.