wklz Posted November 7, 2014 Share Posted November 7, 2014 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
squareology Posted February 9, 2015 Share Posted February 9, 2015 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
Guest Posted February 24, 2015 Share Posted February 24, 2015 Try using the summary block. Works great. Link to comment
fullrun Posted March 6, 2015 Share Posted March 6, 2015 This is so awesome and generous. Thank you! Link to comment
danileh Posted May 5, 2015 Share Posted May 5, 2015 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? Link to comment
squareology Posted May 7, 2015 Share Posted May 7, 2015 @Danileh Have you tried a Summary block? It will work for this, you'd just need to add the videos to a Gallery Page first. https://help.squarespace.com/guides/using-the-grid-summary-block Link to comment
fullrun Posted May 15, 2015 Share Posted May 15, 2015 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
fullrun Posted May 15, 2015 Share Posted May 15, 2015 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
Soren Madsen Posted June 22, 2015 Share Posted June 22, 2015 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
michael1777 Posted July 16, 2015 Share Posted July 16, 2015 It doesn't work for Galapago template Link to comment
michael1777 Posted July 16, 2015 Share Posted July 16, 2015 It doesn't work for Galapago template Link to comment
larrywestford Posted July 19, 2015 Share Posted July 19, 2015 This is a terrific generic solution! If you don't want the caption to show, simply leave the image title blank. Link to comment
Guest Posted September 27, 2015 Share Posted September 27, 2015 ...BUT limits you to 30 videos... Link to comment
camille1570048105 Posted October 21, 2015 Share Posted October 21, 2015 Thanks for this!but how can you also display the description under the title ??Can't find a way ......... Link to comment
camille1570048105 Posted October 21, 2015 Share Posted October 21, 2015 Thanks for this!but how can you also display the description under the title ??Can't find a way ......... Link to comment
Guest Posted December 31, 2015 Share Posted December 31, 2015 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
Guest Posted December 31, 2015 Share Posted December 31, 2015 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
Guest Posted December 31, 2015 Share Posted December 31, 2015 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? Link to comment
Guest Posted March 23, 2016 Share Posted March 23, 2016 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
Filma-King Posted March 24, 2016 Share Posted March 24, 2016 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
analuciadacruz Posted August 4, 2016 Share Posted August 4, 2016 This code stopped working! Any tips of how to solve it?I'm using Shift template! Thank you! Link to comment
analuciadacruz Posted August 4, 2016 Share Posted August 4, 2016 This code stopped working! Any tips of how to solve it?I'm using Shift template! Thank you! Link to comment
analuciadacruz Posted August 4, 2016 Share Posted August 4, 2016 Hi!I was using this code and it was perfect (thank you so much!)But since last updates on Squarespace it stopped working!Can you help me? Using Shift template here!Thank you! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.