[Résolu] Transfer view solution with attached images to one with repeating image field

[Auteur]

Publications

[timB]

I have a solution which uses the images from a post's image gallery to display a main image in a gallery with rows of thumbnails down the side. It utilises the bxslider Jquery script to render the images.

Its not ideal though, because gallery images called in this way can only refer to the url of the original image - so if the image is large it can take some time for it to display in a tiny thumbnail regardless of the thumbnail's size. A further problem is that the main image can be cropped only by using background-image css rules like 'background-image-size' and background-image-position'.

I have been looking for a solution in which the urls are those sized for specific thumbnails. I also need to move away from the post gallery and referring to a post's 'attached' images, and call instead on a post's custom image field - ideally a repeating field.

The problem I have is using the index number of a thumbnail to call its corresponding larger image into the main image box. I was able to do this with attached images (gallery) with the following:

	<!-- wpv-loop-start -->
<div id="bx-pager" class= "thumbcontainer">
		<wpv-loop>
          [wpv-item index=1]
            <a data-slide-index="0" class="navthumb" href=""><img style="border-width:0px 0px;" src="[wpv-bloginfo show='url']/wp-content/uploads/[wpv-post-field name='_wp_attached_file']" /></a>
          [wpv-item index=2]
            <a data-slide-index="1" class="navthumb" href=""><img style="border-width:7px 0px 3px 0px;"src="[wpv-bloginfo show='url']/wp-content/uploads/[wpv-post-field name='_wp_attached_file']" /></a>
          [wpv-item index=3]
            <a data-slide-index="2" class="navthumb" href=""><img style="border-width:4px 0px 3px 0px;" src="[wpv-bloginfo show='url']/wp-content/uploads/[wpv-post-field name='_wp_attached_file']" /></a>
          [wpv-item index=4]
            <a data-slide-index="3" class="navthumb" href=""><img style="border-width:4px 0px 3px 0px;" src="[wpv-bloginfo show='url']/wp-content/uploads/[wpv-post-field name='_wp_attached_file']" /></a>
          [wpv-item index=5]
            <a data-slide-index="4" class="navthumb" href=""><img style="border-width:4px 0px 0px 0px;" src="[wpv-bloginfo show='url']/wp-content/uploads/[wpv-post-field name='_wp_attached_file']" /></a>
          [wpv-item index=6]
            <a data-slide-index="5" class="navthumb" href=""><img src="[wpv-bloginfo show='url']/wp-content/uploads/[wpv-post-field name='_wp_attached_file']" /></a>
          [wpv-item index=7]
            <a data-slide-index="6" class="navthumb" href=""><img src="[wpv-bloginfo show='url']/wp-content/uploads/[wpv-post-field name='_wp_attached_file']" /></a>
          [wpv-item index=8]
            <a data-slide-index="7" class="navthumb" href=""><img src="[wpv-bloginfo show='url']/wp-content/uploads/[wpv-post-field name='_wp_attached_file']" /></a>
          [wpv-item index=9]
            <a data-slide-index="8" class="navthumb" href=""><img src="[wpv-bloginfo show='url']/wp-content/uploads/[wpv-post-field name='_wp_attached_file']" /></a>
          [wpv-item index=10]
            <a data-slide-index="9" class="navthumb" href=""><img src="[wpv-bloginfo show='url']/wp-content/uploads/[wpv-post-field name='_wp_attached_file']" /></a>
          [wpv-item index=other]
          
		</wpv-loop>
</div>
	<!-- wpv-loop-end --

See how long-winded it is? - if only there were a way to count the iterations, and pass that count to the data-slide-index value, then it wouldn't need the endless [wpv-item index=x] conditionals, it would be a single line. But still, within the <wpv-loop> tags, this works when listing thumbnails next to a main image and clicking a thumbnail to display its image in the main box.

Transferring this logic to a repeating field for a post is what I need help with.

Is there a way to get the item index for each iteration of a repeating field using the [wpv-for-each field="wpcf-field"] shortcode?

I have tried using the [wpv-item index=x] short code, but that doesn't seem to work in this context, only within </wpv-loop>'s

Am I missing something? - I have referred to the excellent shortcodes reference library and can't find anything which will return a loop count index in the way we need it for this.

Please help.

Thank you
Tim

[Luo Yang]

Dear Tim,

Q1) I have been looking for a solution in which the urls are those sized for specific thumbnails.
Yes, it is possible within custom image field created with Types plugin, and you can setup it as a multiple instance field, see our document:
https://toolset.com/documentation/customizing-sites-using-php/functions/#image
size:
custom image size | 'full' | 'large' | 'medium' | 'thumbnail'

Q2) Is there a way to get the item index for each iteration of a repeating field using the [wpv-for-each field="wpcf-field"] shortcode?
You can try the solution of another thread:
https://toolset.com/forums/topic/shortcode-for-the-index-of-a-repeater/

[timB]

Excellent - thank you.
That [counter] method of doing the index is precisely what I needed.