show only first image of multiple files field

  • Resolved edog5948

    (@edog5948)


    5 years, 1 month ago

    Hi,
    I’m creating a realty site where each property has multiple images (e.g. one home has photos for bedroom, bath, kitchen, etc.)
    I’ve created a “Property” pod that has a “property images” field in it.
    The “property images” field has the File/Image/Video relationship and the advanced field option of Upload limit is set to “Multiple Files”.

    I would like to have a template for when I display all the properties. In this template I would like to show only one image from each property. It would be the first image of the multiple images for that property.

    Is this doable? How?
    Thank you

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Jim True

    (@jimtrue)

    5 years, 1 month ago

    You wouldn’t be able to do this with the Pods Templates unless you called a shortcode specifically to limit to only the first image.

    Easiest, honestly, would be to do this with CSS (because you probably want to show the rest of the images at some point, too). You can output the multiple images in a UL with a specific class and hide all LI’s but the first with nth positioning, ie

    
<ul class="image-list">
   <li><img src="something" /></li>
   <li><img src="something else" /></li>
</ul>

    CSS would be:

    
.image-list { 
  list-style: none; 
}
.image-list li img { display: none; }
.image-list li:first-child img { display: initial; }

    CodePen link with example: https://codepen.io/jimtrue/pen/vPWOMm

    Or, you could do what we typically suggest for stuff like this. Use the Featured Image for the primary image (the signature image) and make your multiple images be the gallery for the post.

    kdetmold

    (@basti743)

    5 years ago

    I had the same question.. this is a very common use-case, so it would be very nice, if you could add this option 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘show only first image of multiple files field’ is closed to new replies.