Jump to content

Five: Show image title and description in gallery?

Recommended Posts

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?

Link to comment
  • 1 month later...
  • Replies 4
  • Views 11.3k
  • Created
  • Last Reply

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!

Link to comment
  • 11 months later...
  • 3 months later...

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

Link to comment

Archived

This topic is now archived and is 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.