Image Gallery from Query Loop

[derStefan]

Hello fellows,
iam trying to build a query loop which

1. Shows a list product cards with an image
2. Opens a Popup when clicking on a card
3. Displaying a Slider with additional images of this product

Iam able to loop through products that ive created with PODs.
They are displayed correctly and i can also open a popup which e.g. shows the name of the product.
Now i want to show additional images (other than the featured image) in this popup.

Therefore i want to use a slider and fill the slides with the additional images.
But how can i load the images into the slider? And how can i calculate the number of slides i need?

I would love to fugure this out with you.

Thanks a lot.
Cheers.

[derStefan]

Maybe this helps to understand the problem.

[acp693]

I would be very interested to know if you get this to work. I’ve been trying to get a nestable slider loaded with images from a Pods gallery for months, but still haven’t managed it.

[Christian1]

Just swith to Metabox and do it like described in the article below. Did the same, works like charm.

How to limit Query Loop on Media Gallery to current post's medias (custom field)?

I’m going to share this for the community and hoping this gets better along the way. I was trying to query the medias uploaded to a post through a custom field (Metabox/Advanced Images) and display them in a Gallery using the Bricks query loop for Medias (Query Loop – Bricks Academy). But since the images are not automatically attached to the current post they are being uploaded to (it is acknowledged by Metabox support), the query using “child of : {post_id}” does not work. I have found out th…

[salwebs]

I think is a really simple feature missing…

for custom post types you can use this.

custom code element with

<div class="splide">
  <div class="splide__track">
  <div class="splide__list">
<?php
  
$gallery = get_field("gallery");

if($gallery){
 
  foreach($gallery as $image){

    echo "<div class='splide__slide'>";
    echo wp_get_attachment_image($image["ID"]);
    echo "</div>";
  }
}


?>
</div>
</div>
<script>

(()=>{

const el = document.currentScript.closest(".splide")

window.addEventListener("load", ()=>{
  new Splide( el).mount();
})

  
})()
</script>
</div>

use $image["ID"] or $image depending on what you return on the field