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

Caption AND description on grid gallery - Pacific

Question

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!

Edited by namkadash
Initial Revision

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

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!

Edited by DMK
Initial Revision

Share this post


Link to post
  • 0

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>");


Share this post


Link to post
  • 0

I'm using the York template and this hasn't worked for me. Do you have any insight? I've tried looking to see if .grid-description is the right class for my template, but I'm stuck. Thanks in advance!

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