Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Guest

Five: Show image title and description in gallery?

Question

Guest

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?

Edited by Guest

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 1

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!

Edited by Soongy

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...