Jump to content

Caption AND description on grid gallery - Pacific

Recommended Posts

I'm trying to create a page with team members and although I used image blocks to create a grid-style layout, in the mobile view the images becomes large and stacked.So I figured using the gallery block would be better for a mobile view but now the problem is that I can only get a title beneath the image but not the image description, which I would use for the person's job title. Is there anyway to get both image title and description in grid gallery? Or is there a way to show image blocks in a grid layout on mobile view?I'm using Pacific.Thanks a bunch!

Link to comment
  • 1 year later...
  • Replies 4
  • Views 2.3k
  • Created
  • Last Reply

Hey,

Figured someone else may look for this, if you add jQuery to the footer Code Injection:


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

You can then add a Code Block to the page with the Grid Gallery Block (images need to be on a Gallery Page) and then in the code below, update the /collections part in

$.getJSON("/collections?format=json", function(result){

with the URL slug of the Gallery Page it is pulling from.


<script>$(document).ready(function(){
   $.getJSON("/collections?format=json", function(result){
     console.log(result.items);
       $.each(result.items, function(i, field){

           $(".image-slide-title").eq(i).parent().append('<div class="grid-description">' +result.items[i].body + "</div>");
       });
   });

});
</script>

CSS wise, the description is controlled by the class

.grid-description

Hope this helps someone else!

Link to comment
  • 5 months later...

Thank you. This worked perfectly for me. I ONLY wanted the description to display so I changed LINE 6 from .parent() to .empty() the TITLE field, thereby replacing the title with the description instead, since the description field can contain html (links and formatting):


$(".image-slide-title").eq(i).empty().append('<div class="grid-description">' +result.items[i].body + "</div>");


Link to comment
  • 1 month later...
  • 4 months later...

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.