CODEWITHSUNDEEP
php
Ayxan Əmiraslanlı
Ayxan Əmiraslanlı

Reputation: 433

php foreach loop implode every 3 loop

I need to make a gallery. I have images from 01 to 09. I need to divide them on foreach. The first div must have an active class. And we need to repeat the div every 3 image. I need exactly this html:

            <div class="item active">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="col-item">
                            <div class="photo">
                                <img src="01.jpg" class="img-responsive" alt="a" />
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="col-item">
                            <div class="photo">
                                <img src="02.jpg" class="img-responsive" alt="a" />
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="col-item">
                            <div class="photo">
                                <img src="03.jpg" class="img-responsive" alt="a" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            ...


            <div class="item">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="col-item">
                            <div class="photo">
                                <img src="07.jpg" class="img-responsive" alt="a" />
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="col-item">
                            <div class="photo">
                                <img src="08.jpg" class="img-responsive" alt="a" />
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="col-item">
                            <div class="photo">
                                <img src="09.jpg" class="img-responsive" alt="a" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

But my code doesn't work. I don't know how to complete this... Here is my PHP code:

    <div id="carousel-example-generic" class="carousel slide hidden-xs" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <?php 
            $countedimage = 0;
            $counteddiv = 0;
            $count = count($images_bottom);
            for ($x = 0; $x <= $count; $x++) {
                $countedimage++;
                $counteddiv++;
                if($countedimage == '4') {
                    $countedimage = 0;
                ?>
            <div class="item<?php if($counteddiv != '1') { ?> active<?php } ?>">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="col-item">
                            <div class="photo">
                                <img src="<?php echo $images_bottom[$x]['popup']; ?>" class="img-responsive" alt="a" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                <?php } ?>
                <?php } ?>

            </div>
    </div>

Upvotes: 1

Views: 1005

Answers (2)

fubar
fubar

Reputation: 17388

Firstly, lets start with grouping your images into multiples of three.

// An arbitrary list of image file names (used for clarity).
$images = ['image-1.jpg', 'image-2.jpg', 'image-3.jpg', 'image-4.jpg', 'image-5.jpg', 'image-6.jpg', 'image-7.jpg', 'image-8.jpg', 'image-9.jpg'];

// Separate images into groups of three.
$images = array_chunk($images, 3);

Next we need to look at the output. So taking your example HTML:

<div id="carousel-example-generic" class="carousel slide hidden-xs" data-ride="carousel">
    <div class="carousel-inner">
        <?php // Loop over each group of three images ?>
        <?php foreach ($images as $g => $group): ?>

            <div class="item <?= ($g == 0) ? 'active' : '' ?>">
                <div class="row">
                    <?php // Loop over each image in group ?>
                    <?php foreach ($group as $i => $image): ?>

                        <div class="col-sm-4">
                            <div class="col-item">
                                <div class="photo">
                                    <img src="<?= $image ?>" class="img-responsive" alt="a" />
                                </div>
                            </div>
                        </div>

                    <?php endforeach ?>
                </div>
            </div>
        </div>

        <?php endforeach ?>
    </div>
</div>

Upvotes: 2

BizzyBob
BizzyBob

Reputation: 14740

So, you basically want to print this portion for every item:

<div class="col-sm-4">
    <div class="col-item">
        <div class="photo">
            <img src="<?php echo $src ?>" class="img-responsive" alt="a"/>
        </div>
    </div>
</div>

And you only want to print this portion every 3rd time, around groups of 3 of the above chunks:

<div class="item active">
    <div class="row">


    </div>
</div>

Instead of trying to keep track of 2 separate counts as you are doing, you can simplify things by using the modulus operator % along with the index of your loop $x.

This is really useful when you want to repeat something at certain intervals. Essentially, you can repeat something every $z number of times by doing something like:

if($totalCount % $z == 0)

Example:

for ($x = 1; $x < 50; $x++) {
    if ($x % 5 == 0) echo $x . '<br>';
}

//   results:
//    5
//    10
//    15
//    20
//    25
//    30
//    35
//    40
//    45

In your case, something like this would work:

<?php for ($x = 0; $x < count($images_bottom); $x++) {
    $src = $images_bottom[$x]['popup'];
    $item_active = $x==0 ? 'item active' : 'item'; // only use 'item active' first one

if ($x % 3 == 0) { // only display every 3rd time?>
    <div class="<?php echo $item_active ?>">
        <div class="row">
<?php } ?>
            <div class="col-sm-4">
                <div class="col-item">
                    <div class="photo">
                        <img src="<?php echo $src ?>" class="img-responsive" alt="a"/>
                    </div>
                </div>
            </div>
<?php if ($x % 3 == 2 || $x == count($images_bottom)-1){ // only display after every 3rd time (after items 0, 1, 2) or on last one ?>
        </div>
    </div><?php } ?>

<?php } ?>

Upvotes: 1

Related Questions