I’m trying to get the custom posts image gallery images into bootstrap cards with carousel and so far I’m able to get the images but they are displaying one by one underneath each instead of a carousel please correct me what am I doing wrong here.
<?php
$model_images = get_field('gallery');
$image_size = 'full';
if( $model_images ): ?>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<?php foreach( $model_images as $image_id ):?>
<div class="card">
<img class="card-img-top" src="<?php echo wp_get_attachment_image( $image_id, $image_size ); ?>" alt="Card image cap"/>
<div class="card-body">
<h1 class="card-title"><?php the_title();?></h1>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif;?>
</div>
3
Answers
This is how I solved this carousel issue:
When I posted this question I was using trying to make the bootstrap carousel work but for some reason it didn't worked so I have changed it to owl carousel using the bootstrap cards same and it worked.
Also I have added comments to my code to explain how I'm requesting featured image and the other images from each post gallery field.
Here’s my solution. I cannot guarantee it will work, because I cannot run the code:
I used a more modern PHP syntax, and I moved the
<div class="carousel-item active">
inside your images loop.As per my comment, cleaned up your posted code.
This might be a start into debugging your issue. See html comments in code below for changes to your code…
Make sure your html valid, semantic etc, if you are using a decent ide, it should point out these errors. 👍🏼