Написал код для отображения случайных фотографий, но нужно показывать только четыре изображения в данный момент

Question

Итак, у меня есть код, который по своей природе отзывчив, что должен размещать четыре (4) фотографии рядом и показывать фотографии в случайном порядке.

Однако, поскольку я только начинаю, я не знаю, как создать код, который гарантирует, что в каждый момент времени отображается только четыре (4) фотографии ???

Итакосновываясь на моем коде, представленном ниже, как показывать только четыре фотографии одновременно.(Несмотря на то, что я хочу, чтобы было как минимум восемь (8) возможных фотографий, через которые он сортирует.)

ИСПОЛЬЗОВАННЫЙ КОД:

<br>
<br>
<h50><?php echo $this->translate('Be Discovered!'); ?></h50>
and connected. Meet anyone & see everything!</a></p>
<br>

<?php

$pics = [
    "/public/admin/haleyfoxforabout333.jpg",
    "/public/admin/haleyfoxforabout333.jpg",
    "/public/admin/team5aboutG333.jpg",
    "/public/admin/team6about333.jpg",
    "https://www.w3schools.com/w3images/team1.jpg",
    "https://www.w3schools.com/w3images/team2.jpg",
    "https://www.w3schools.com/w3images/team3.jpg",
    "/public/admin/team4_333.jpg"
];

shuffle($pics);
?>

<style>

    h50 {
        padding: 0 30px 8px;
        width: auto;
        font-size: 40px;
        margin: 0 0 10px 0;
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #D2DBE8;
        border-radius: 3px 3px 0 0;
        display: inline-block;
    }

    .headerz {
        text-align: center;
        padding: 32px;
    }

    .rowz {
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
        padding: 0 4px;
    }

    /* Create four equal columns that sits next to each other */
    .columnz {
        -ms-flex: 25%; /* IE10 */
        flex: 25%;
        max-width: 25%;
        padding: 0 4px;
    }

    .columnz img {
        margin-top: 8px;
        vertical-align: middle;
    }

    /* RL - makes a two column-layout instead of four columns */
    @media screen and (max-width: 800px) {
        .columnz {
            -ms-flex: 50%;
            flex: 50%;
            max-width: 50%;
        }
    }

    /* RL Takes the two columns stack on top of each other. */
    @media screen and (max-width: 600px) {
        .columnz {
            -ms-flex: 100%;
            flex: 100%;
            max-width: 100%;
        }
    }

</style>

<!-- Photo Grid -->
<div class="rowz">
    <?php
    foreach ($pics as $pic) {
        echo '<div class="columnz">';
        echo '<img src="' . $pic . '" style="width:100%">';
        echo '</div>';
    }
    ?>
</div>

Answer 1

Используйте array_rand, это даст вам случайные ключи из вашего массива.Второй аргумент определяет, сколько ключей вы хотите:

$keys = array_rand($pics, 4);
foreach ($keys as $key) {
    echo $pics[$key];
}

Или вы можете слайс перетасованный массив:

shuffle($pics);
$pics = array_slice($pics, 0, 4); // reduces your array to 4 elements

Или вы можете использовать счетчик и break foreach:

$counter = 0;
foreach($pics as $pic){
    if ($counter == 4) {
        break;
    }

    echo $pic;
    $counter++;
}