Bootstrap Cards carousel with php - Wordpress

ImranIrshad
June 7, 2022
52 views
3 votes
3 Answers

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>

Answers

Chosen as BEST ANSWER

This is how I solved this carousel issue:

<div class="gallery_wrap">
<div id="model-gallery" class="owl-carousel owl-theme">

/* Checking to see if the post item has a featured image or not if it has the image already I'm requesting to show the featured image in card view aswell*/

<?php $featured_image = wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()), 'model-featured-image' );
    if($featured_image == ''){
        $featured_image = '';
        } ?>
        
    <div class="card">
    <img class="card-img-top" src="<?php echo $featured_image; ?>" 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>
                        
    /* This is important where I'm calling the gallery field items from my custom posts types */

    <?php
    $model_images = get_field('gallery');
    $image_size = 'full';
                        
    /* And If there are images available in the gallery loop all images individually using foreach loop and display them in cardview by ID*/
    if( $model_images ):  
    foreach( $model_images as $image_id ):?>
    
    <div class="card">
    <img class="card-img-top" src="<?php echo wp_get_attachment_image_url( $image_id, $image_size ); ?>" alt="<?php the_title();?>">
        <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>
    <?php endforeach; endif;?>
</div>

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.

(Edit)

Here’s my solution. I cannot guarantee it will work, because I cannot run the code:

<?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">
     <?php foreach ($model_images as $key => $image_id) { 
       echo '<div class="carousel-item ' . 
            ($key == 0 ? 'active' : '') . '">'; ?>
       <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>
   </div>
   <?php } ?>
 </div>
 <?php } ?>

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…

<?php

$model_images = get_field('gallery');
$image_size = 'full';
                    
if( $model_images ): ?>

<div id="carouselExampleSlidesOnly" class="carousel slide">

    <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> (remove this div as there is no opening div) -->

        <?php endforeach; ?>

        </div>  
    </div>

</div><!-- moved removed div above to here close properly -->

<!-- moved php endif to end of you code --> 
<?php endif;?>

Make sure your html valid, semantic etc, if you are using a decent ide, it should point out these errors. 👍🏼

Please signup or login to give your own answer.

Click here to cancel reply.

Bootstrap Cards carousel with php – WordPress

Answers