Расчет количества столбцов, которые будет использовать изображение, на основе общего количества доступных изображений. - PullRequest
Новая
       24

Расчет количества столбцов, которые будет использовать изображение, на основе общего количества доступных изображений.

0 голосов
/ 08 марта 2019

Я использую пользовательский макет из 24 столбцов Twitter Bootstrap 3.3 для своей страницы, и у меня есть переменное количество изображений, которые нужно отобразить.

Моя конечная цель - получить что-то вроде 

$images = array(
  array("image" => "<img src='...'>", "description" => "Desc 1"),
  array("image" => "<img src='...'>", "description" => "Desc 2"),
  array("image" => "<img src='...'>", "description" => "Desc 3"),
  array("image" => "<img src='...'>", "description" => "Desc 4")
);

отображается со следующей структурой: 

<div class="row">
  <div class='col-md-8'><img src="..." alt="Desc 1" /></div>
  <div class='col-md-8'><img src="..." alt="Desc 2" /></div>
  <div class='col-md-8'><img src="..." alt="Desc 3" /></div>
  <div class='col-md-24'><img src="..." alt="Desc 4" /></div>
</div>

Логика в том, что я хочу, чтобы в строке было максимум 3 изображения col-md-8 и использовать col-md-12, если в этой строке будет отображаться только 2, col-md-24 для одного изображения.

Я пытался использовать модуль (%) для вычисления - что-то вроде $mod = 24 % count($images); и $mod = 3 % count($images);, но это явно не так.

1 Ответ

1 голос
/ 08 марта 2019

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

$imagesPerRow = 3;

Давайте сначала выясним, сколько у вас будет строк: 

$numberOfRows = ceil(count($images) / $imagesPerRow);

Я использую ceil(), потому что количество изображений может не быть кратным трем. Если у вас есть четыре изображения, 4 / 3 будет 1.33333..., что ceil() будет округлено до 2, чтобы сообщить нам, что нам понадобятся две строки, чтобы можно было показать все изображения.

Теперь мы можем создать цикл, который будет отображать для нас каждую строку: 

for ($row = 0; $row < $numberOfRows; $row++) {
    echo '<div class="row">';

    // we'll output the images here in a minute

    echo '</div>';
}

Здесь все становится интересно. Исходя из текущего $row, нам нужно получить следующие $imagesPerRow изображения: 

    $offset = $row * $imagesPerRow;
    $imagesInRow = array_slice($images, $offset, $imagesPerRow);

$imagesInRow теперь будет содержать 1, 2 или 3 изображения. Мы можем использовать это, чтобы вычислить ширину столбцов для этой строки: 

    $columnWidth = 24 / count($imagesInRow);

Если есть одно изображение, $columnWidth будет 24. Для двух изображений это будет 12, а для трех изображений это будет 8. Если вы когда-нибудь решите, что вам нужно четыре изображения подряд вместо трех, то $imagesInRow может содержать четыре изображения, а $columnWidth может стать 6. Имейте в виду, что это станет проблемой, если вы захотите пять изображений подряд, потому что ваша сетка из 24 столбцов не кратна пяти, и это будет означать ширину столбца 4.8 - и col-md-4.8 класс не существует.

Итак, теперь у нас есть ширина столбца и (до) 3 изображений, которые мы хотим отобразить, мы можем сделать это: 

    foreach ($imagesInRow as $image) {
        echo '<div class="col-md-' . $columnWidth . '">';
        echo '<img src="' . $image['image'] .'" alt="' . $image['description'] .'">';
        echo '</div>';
    }

Ваш образец массива содержит полный тег <img src="..."> в image с отдельным description, который, как вам кажется, требуется в качестве атрибута alt изображения. Это немного сложнее и выходит за рамки вопроса «как визуализировать эти изображения в сетке», для простоты я предположил, что image будет содержать только атрибут src.

Собрав все это вместе, ваш полный сценарий будет выглядеть примерно так: 

$imagesPerRow = 3;
$numberOfRows = ceil(count($images) / $imagesPerRow);

for ($row = 0; $row < $numberOfRows; $row++) {
    echo '<div class="row">';

    $offset = $row * $imagesPerRow;
    $imagesInRow = array_slice($images, $offset, $imagesPerRow);
    $columnWidth = 24 / count($imagesInRow);

    foreach ($imagesInRow as $image) {
        echo '<div class="col-md-' . $columnWidth . '">';
        echo '<img src="' . $image['image'] .'" alt="' . $image['description'] .'">';
        echo '</div>';
    }

    echo '</div>';
}

См. Демонстрацию в действии на https://3v4l.org/1eTZd

...