Bootstrap Cards carousel with php

Question

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>

Did you [include the Bootstrap files](https://getbootstrap.com/docs/4.6/getting-started/introduction/)? Sorry if this is a stupid question, but it isn't obvious from your question. — KIKO Software, Jun 07 '22 at 21:44
Just Added the JS bundles but still it's the same it didn't changed to carousel — Imran Irshad, Jun 07 '22 at 21:55
Well, it's an essential part, but clearly there's still another problem. — KIKO Software, Jun 07 '22 at 21:57
Have a look at the HTML code that is produced by your script. Check for errors in your console. See: [Developer tools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools). — KIKO Software, Jun 07 '22 at 21:58
Console: Failed to load resource: the server responded with a status of 521 () — Imran Irshad, Jun 07 '22 at 22:00
It's favicon.ico written on the right side of the failed to load warning — Imran Irshad, Jun 07 '22 at 22:04
OK, I see a problem in your PHP script. You create one carousel item, and you put all the cards, with the images in them, in that single carousel item. You need to put one card, with one image, in one carousel item, and have multiple carousel items. — KIKO Software, Jun 07 '22 at 22:08
Yes I've tried to loop it by foreach loop not sure where exactly I'm wrong with the script do I have to create multiple cards? I just want a single item to auto-scroll each time — Imran Irshad, Jun 07 '22 at 22:11
I've cleaned up your posted code and the markup is all wrong, your divs dont close properly is respect to the php statements... make sure all divs open and close and no stray html tags are present — joshmoto, Jun 07 '22 at 22:28

KIKO Software · Answer 1 · 2022-06-07T22:32:22.190

1

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.

edited Jun 07 '22 at 22:32

answered Jun 07 '22 at 22:17

KIKO Software

15,283
3
18
33

It didn't worked! `
` this is breaking the whole layout but without `
` it's displaying cards underneath each card
– Imran Irshad Jun 07 '22 at 22:29
Yes, stupid. There can only be one active carousel item. I'll see what I can do. – KIKO Software Jun 07 '22 at 22:30
@ImranIrshad: I changed my answer. It relies on the keys of `$model_images` to be numeric and start at zero. – KIKO Software Jun 07 '22 at 22:32
still the same it didn't worked, I have tried change your modern syntax to my previous one but still the same – Imran Irshad Jun 07 '22 at 22:58
@ImranIrshad: I don't have any futher suggestions, but I am sure you can eventually work it out. Start simple, for instance with 2 images and no loop. If that works then add the loop. – KIKO Software Jun 07 '22 at 23:01

Imran Irshad · Answer 2 · 2022-06-09T15:52:31.417

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.

joshmoto · Answer 3 · 2022-06-07T22:42:59.690

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.

After the code clean up the front-end layout is broken might be I'm missing a closing div somewhere — Imran Irshad, Jun 07 '22 at 23:00
@ImranIrshad try running your site url through [W3C Markup Validation Service](https://validator.w3.org/) to find out where your markup is broken — joshmoto, Jun 07 '22 at 23:03
@ImranIrshad if your wordpress site is local maybe check out [HTML Validator](https://chrome.google.com/webstore/detail/html-validator/mpbelhhnfhfjnaehkcnnaknldmnocglk) chrome extension which should work on your local environment — joshmoto, Jun 07 '22 at 23:06
@ImranIrshad be warned you may get a shed load of errors, but look for the unclosed element errors see [W3C HTML Error docs (Unclosed tags)](https://validator.w3.org/docs/errors.html#ve-246) — joshmoto, Jun 07 '22 at 23:11

Bootstrap Cards carousel with php

3 Answers3