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

Five: Show image title and description in gallery?

Question

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...