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

Caption AND description on grid gallery - Pacific


namkadash

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
Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

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


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!

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