[Resolved] Dynamic images on glide track based on number of images available

[Author]

Posts

[Robert]

Tell us what you are trying to do? I am using a repeatable image field for a custom post type. Each post can contain between 0 and 10 photos and so it will vary from post to post. I have created a content template that will display the image slider with a glide track. I would like the glide track to display more, less, or no images at all based on the number of images available for that post.

Here is the code I am currently using. It is current set to display 5 images:

<div class="tb-image-slider image-box" data-toolset-blocks-image-slider="1">
<div class="tb-image-slider--carousel tb-image-slider--crop glide" data-glide-number-slides="5">
<div class="glide__view">
[wpv-for-each field="wpcf-listing-images" start="1" end="1"]
[types field='listing-images' alt='%%ALT%%' class="minedetails"][/types]
[/wpv-for-each]
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<"><span class="tb-slider-left-arrow" /></button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">"><span class="tb-slider-right-arrow" /></button>
</div>
</div>
<div class="glide__track glide-track-custom minedetails" data-glide-el="track">
<ul class="glide__slides">
[wpv-for-each field="wpcf-listing-images"]
<li class="glide__slide">[types field='listing-images' alt='%%ALT%%'][/types]
[/wpv-for-each]

</div>
</div>
</div>

Attached is an image of what the slider looks like with 1 image on the post. As you can see, the slider displays the same image 5 times. I would rather have it do the following:
1) Hide the glide track when the images available are 1 or less
2) Display only 2 images on the glide track when only 2 images are available
3) Display only 3 images on the glide track when only 3 images are available
4) Display only 4 images on the glide track when only 4 images are available
5) Display 5 images on the glide track when 5 or more images are available (normal behavior)

[Luo Yang]

Hello,

I have tried the codes you mentioned above, for example:

[wpv-for-each field="wpcf-listing-images" start="1" end="1"]
[types field='listing-images' alt='%%ALT%%' class="minedetails"][/types]
[/wpv-for-each]

Above codes output only the first image in field "listing-images".

[wpv-for-each field="wpcf-listing-images"]
<li class="glide__slide">[types field='listing-images' alt='%%ALT%%'][/types]
[/wpv-for-each

Above codes output all images in field "listing-images".

Both work fine.

And what kind of "glide track" do you want to achieve? Can you share working demo?

[Robert]

Let's try a different approach. How do I check how many images are attached to a particular post as a conditional? I tried the following but it didn't work:

[wpv-conditional if="( $(wpcf-listing-images) lte '1' )"]
Do something here
[\wpv-conditional]

[Robert]

Hi Luo,

I was able to resolve this. For future reference, I used "Conditional Amount on repeatable fields" topic here to create a shortcode to determine the number of images a particular post has: https://toolset.com/forums/topic/conditional-on-amount-of-repeatable-fields/

From there I added the following code with 2 conditions. One that would check if a post was only 1 or less images and then simply display the image without controls or a slide track. The other condition was for images greater than 1. In this case, the slide track would display with 3 images. This works for my purposes:

[wpv-conditional if="( '[count_rf_entries field='listing-images']' lte '1' )"]
[types field='listing-images' alt='%%ALT%%' class="main-image"][/types]
[/wpv-conditional]
[wpv-conditional if="( '[count_rf_entries field='listing-images']' gt '1' )"]
<div class="tb-image-slider" data-toolset-blocks-image-slider="1">
<div class="tb-image-slider--carousel tb-image-slider--crop glide" data-glide-number-slides="3">
<div class="glide__view">
[wpv-for-each field="wpcf-listing-images" start="1" end="1"]
[types field='listing-images' alt='%%ALT%%' class="main-image"][/types]
[/wpv-for-each]
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">
<span class="tb-slider-left-arrow">
</span>
</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">
<span class="tb-slider-right-arrow">
</span>
</button>
</div>
<div class="glide__track glide-track-custom" data-glide-el="track">
<ul class="glide__slides">
[wpv-for-each field="wpcf-listing-images"]
<li class="glide__slide">[types field='listing-images' alt='%%ALT%%' class="slider-image"][/types]
[/wpv-for-each]

</div>
</div>
</div>
[/wpv-conditional]

[Robert]

My issue is resolved now. Thank you!