Five: Show image title and description in gallery?

I am using Five and created a gallery page. I entered a title and description for the image which is displayed only in the slideshow format and not the grid format, can anyone help?

Add this to the Custom CSS Editor:

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

@eanderson has a good example of how to style the title here: Adding image titles in the grid gallery option?

If you add the code below to your site-wide or page header code injection, it adds a description class which you can then style as well using the custom CSS:

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

<script>
window.onload = function() {
 YUI().use("node", function(Y){
   Y.all('.sqs-gallery-design-grid-slide').each(function(node){
     var mySqsGalleryWrapper, tempDiv, dataDesc;

     // Get The wrapper of the SQS Gallery
     mySqsGalleryWrapper = node.getDOMNode()
     .getElementsByClassName('margin-wrapper')[0];

     // Get the description
     dataDesc = mySqsGalleryWrapper
     .getElementsByTagName('a')[0]
     .getAttribute('data-description');

     // Replace tag P for div and add class
     dataDesc = dataDesc.replace('<p>', '<div class="image-slide-description">');
     dataDesc = dataDesc.replace('</p>', '<div>');

     // Create a temp div and fill it with the data-description
     tempDiv = document.createElement('div');
     tempDiv.innerHTML = dataDesc;
     mySqsGalleryWrapper.appendChild(tempDiv.firstChild);
   })
 });

}
</script>

Hope this helps!

I'm using the Wells template, and this did not work for my Gallery Grid.

https://emily-limandri-fmir.squarespace.com/config#/pages|/new-gallery/

Any tips on how to get the image title and description to show up on hover on this page?

Thank you for your help!

I'm using the Wells template, and this did not work for my Gallery Grid.

https://emily-limandri-fmir.squarespace.com/config#/pages|/new-gallery/

Any tips on how to get the image title and description to show up on hover on this page?

Thank you for your help!

First, thanks for posting this. It seemed exactly the solution to my issue, which is that I want the gallery block grid to display the description, as in the stack form. Unfortunately it isn't working for me. Am I missing something...

1. I paste the script tags and the code in between into my site code injection area.
2. I paste the CSS in lines 1, 2, and 3 above that into the CSS editor.

Should this be creating a description class for the grid form of the gallery block? That I can then style with the CSS? I feel so close... :)

Thanks in advance for the response!

Chris