Bootstrap Cards carousel with php-CodePudding

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"  data-ride="carousel">
        <div >
            <div >
                <?php foreach( $model_images as $image_id ):?>
                    <div >
                        <img  src="<?php echo wp_get_attachment_image( $image_id, $image_size ); ?>" alt="Card image cap"/>
                        <div >
                            <h1 ><?php the_title();?></h1>
                            <p >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>

CodePudding user response：

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"  data-ride="carousel">
   <div >
     <?php foreach ($model_images as $key => $image_id) { 
       echo '<div >'; ?>
       <div >
         <img  src="<?php echo wp_get_attachment_image($image_id, $image_size); ?>" alt="Card image cap">
         <div >
           <h1 ><?php the_title(); ?></h1>
           <p >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 > inside your images loop.

CodePudding user response：

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" >

    <div >
        <div >

        <?php foreach( $model_images as $image_id ): ?>

            <div >
                <img  src="<?php echo wp_get_attachment_image( $image_id, $image_size ); ?>" alt="Card image cap"/>

                <div >
                    <h1 ><?php the_title(); ?></h1>
                    <p >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.