Matching an array element to its count in the array?

I have an containing image urls, as well as the height/width (and other details), I need to add them like the markup below, so I need to match the order that’s in the array.

The <amp-carousel id="carouselPreview"> controls the main <amp-carousel> so the order has to mate up.

For example, the first image needs to be option=“0”

<amp-carousel id="carousel" width="400" height="300" layout="responsive" type="slides" on="slideChange:
          carouselSelector.toggle(index=event.index, value=true),
          carouselPreview.goToSlide(index=event.index)
  " lightbox>
  <amp-img src="https://unsplash.it/400/300?image=10" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=11" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=12" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="https://unsplash.it/400/300?image=13" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>

</amp-carousel>

<amp-carousel id="carouselPreview" class="carousel-preview" height="72" layout="fixed-height" type="carousel">
    <amp-img option="0" selected src="https://unsplash.it/60/40?image=10" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="1" src="https://unsplash.it/60/40?image=11" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="2" src="https://unsplash.it/60/40?image=12" width="60" height="40" alt="a sample image"></amp-img>
    <amp-img option="3" src="https://unsplash.it/60/40?image=13" width="60" height="40" alt="a sample image"></amp-img>
 
  </amp-carousel>
</amp-selector>

Where does the array come from? What does this array look like?

Ooops, sorry. The array contains: the url of the image, the width/height, as well as that of various sizes.

array(6) { [0]=> array(24) { ["ID"]=> int(41) ["id"]=> int(41) ["title"]=> string(47) "boxed-water-is-better-6WrKKQcEnXk-unsplash-2000" ["filename"]=> string(51) "boxed-water-is-better-6WrKKQcEnXk-unsplash-2000.jpg" ["filesize"]=> int(1205987) ["url"]=> string(103) "http://dev.coosguide.com/wp-content/uploads/2022/03/boxed-water-is-better-6WrKKQcEnXk-unsplash-2000.jpg" ["link"]=> string(115) "http://dev.coosguide.com/2022/03/29/i-dooked-a-snook-and-i-like-it/boxed-water-is-better-6wrkkqcenxk-unsplash-2000/" ["alt"]=> string(0) "" ["author"]=> string(1) "1" ["description"]=> string(0) "" ["caption"]=> string(0) "" ["name"]=> string(47) "boxed-water-is-better-6wrkkqcenxk-unsplash-2000" ["status"]=> string(7) "inherit" ["uploaded_to"]=> int(31) ["date"]=> string(19) "2022-03-29 23:58:23" ["modified"]=> string(19) "2022-03-29 23:59:02" ["menu_order"]=> int(0) ["mime_type"]=> string(10) "image/jpeg" ["type"]=> string(5) "image" ["subtype"]=> string(4) "jpeg" ["icon"]=> string(61) "http://dev.coosguide.com/wp-includes/images/media/default.png" ["width"]=> int(1592) ["height"]=> int(2000) ["sizes"]=> array(54) { ["thumbnail"]=> string(111) "http://dev.coosguide.com/wp-content/uploads/2022/03/boxed-water-is-better-6WrKKQcEnXk-unsplash-2000-150x150.jpg" ["thumbnail-width"]=> int(150) ["thumbnail-height"]=> int(150) ["medium"]=> string(111) "http://dev.coosguide.com/wp-content/uploads/2022/03/boxed-water-is-better-6WrKKQcEnXk-unsplash-2000-239x300.jpg" ["medium-width"]=> int(239) ["medium-height"]=> int(300) ["medium_large"]=> string(111) "http://dev.coosguide.com/wp-content/uploads/2022/03/boxed-water-is-better-6WrKKQcEnXk-unsplash-2000-768x965.jpg" ["medium_large-width"]=> int(768) ["medium_large-height"]=> int(965) ["large"]=> string(112) "http://dev.coosguide.com/wp-content/uploads/2022/03/boxed-water-is-better-6WrKKQcEnXk-unsplash-2000-815x1024.jpg" ["large-width"]=> int(815) ["large-height"]=> int(1024) ["1536x1536"]=> string(113) "http://dev.coosguide.com/wp-content/uploads/2022/03/boxed-water-is-better-6WrKKQcEnXk-unsplash-2000-1223x1536.jpg" ["1536x1536-width"]=> int(1223) ["1536x1536-height"]=> int(1536) ["2048x2048"]=> string(103) "http://dev.coosguide.com/wp-content/uploads/2022/03/boxed-water-is-better-6WrKKQcEnXk-unsplash-2000.jpg" ["2048x2048-width"]=> int(1592) ["2048x2048-height"]=> int(2000) ["jnews-360x180"]=> string(111) "http://dev.coosguide.com/wp-content/uploads/2022/03/boxed-water-is-better-6WrKKQcEnXk-unsplash-2000-360x180.jpg" ["jnews-360x180-width"]=> int(360) ["jnews-360x180-height"]=> int(180) ["jnews-750x375"]=> string(111) "http://dev.coosguide.com/wp-content/uploads/2022/03/boxed-water-is-better-6WrKKQcEnXk-unsplash-2000-750x375.jpg" ["jnews-750x375-width"]=> int(750) ["jnews-750x375-height"]=> int(375) ["jnews-1140x570"]=> string(112) "http://dev.coosguide.com/wp-content/uploads/2022/03/boxed-water-is-better-6WrKKQcEnXk-unsplash-2000-1140x570.jpg" ["jnews-1140x570-width"]=> int(1140) ["jnews-1140x570-height"]=> int(570) ["jnews-120x86"]=> string(110) "http://dev.coosguide.com/wp-content/uploads/2022/03/boxed-water-is-better-6WrKKQcEnXk-unsplash-2000-120x86.jpg" ["jnews-120x86-width"]=> int(120) ["jnews-120x86-height"]=> int(86) ["jnews-350x250"]=> string(111) "http://dev.coosguide.com/wp-content/uploads/2022/03/boxed-water-is-better-6WrKKQcEnXk-unsplash-2000-350x250.jpg" ["jnews-350x250-width"]=> int(350) ["jnews-350x250-height"]=> int(250) ["jnews-750x536"]=> string(111) "http://dev.coosguide.com/wp-content/uploads/2022/03/boxed-water-is-better-6WrKKQcEnXk-unsplash-2000-750x536.jpg" ["jnews-750x536-width"]=> int(750) ["jnews-750x536-height"]=> int(536) ["jnews-1140x815"]=> string(112) "http://dev.coosguide.com/wp-content/uploads/2022/03/boxed-water-is-better-6WrKKQcEnXk-unsplash-2000-1140x815.jpg" ["jnews-1140x815-width"]=> int(1140) ["jnews-1140x815-height"]=> int(815) ["jnews-360x504"]=> string(111) "http://dev.coosguide.com/wp-content/uploads/2022/03/boxed-water-is-better-6WrKKQcEnXk-unsplash-2000-360x504.jpg" ["jnews-360x504-width"]=> int(360) ["jnews-360x504-height"]=> int(504) ["jnews-75x75"]=> string(109) "http://dev.coosguide.com/wp-content/uploads/2022/03/boxed-water-is-better-6WrKKQcEnXk-unsplash-2000-75x75.jpg" ["jnews-75x75-width"]=> int(75) ["jnews-75x75-height"]=> int(75) ["jnews-350x350"]=> string(111) "http://dev.coosguide.com/wp-content/uploads/2022/03/boxed-water-is-better-6WrKKQcEnXk-unsplash...

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.