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

Five: Show image title and description in gallery?


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

window.onload = function() {
 YUI().use("node", function(Y){
     var mySqsGalleryWrapper, tempDiv, dataDesc;

     // Get The wrapper of the SQS Gallery
     mySqsGalleryWrapper = node.getDOMNode()

     // Get the description
     dataDesc = mySqsGalleryWrapper

     // 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;


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!


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