Дата публикации : 2024.01.09
Автор: Виноградов Александр

Как вывести в строку горизонтальное изображение и в строку два вертикальных цикл php

Сначала сформируем массив в котором изображения разделены на вертикальные vertical и горизонтальные horizontal

Изображения будут выводиться в том порядке, в котором они указаны в массиве, и, если за вертикальным изображением будет идти еще одно вертикальное, то скрипт будет выводить их в одну строку

<?php 
array(4) {
  [
1]=>array(3
      {
    [
"type"]=>string(10"horizontal"
    
["img"]=> string(765"/wp-content/uploads/PG/north-south-interior_01.jpg"
      
},
  [
2]=>array(3) {
    [
"type"]=>
    
string(10"vertical"
    
["img"]=> string(765"/wp-content/uploads/PG/north-south-interior_02.jpg"
          
},   
   [
3]=>array(3
    {
    [
"type"]=>
    
string(10"vertical"
    
["img"]=> string(765"/wp-content/uploads/PG/north-south-interior_03.jpg"
          
}, 
    [
4]=>array(3
    {
    [
"type"]=>
    
string(10"horizontal"
    
["img"]=> string(765"/wp-content/uploads/PG/north-south-interior_04.jpg"
          
},      
                

Скрипт вывода изображений

 <?php foreach ($common_array as $key => $all_image): ?>  
                    
    <?php static $trigger_vertical null?>
                    
    <?php //пропустим цикл, так как знаем что изображение вертикальное  ?>      
     <?php //и уже выведено внизу ?>    
    <?php if ($trigger_vertical): ?>
        <?php 
            $trigger_vertical 
null;
            continue 
1;
        
?>
    <?php endif; ?>
  
    <?php if ($all_image['type'] == 'vertical'): ?>
                           
                                
        <div class="vertical">
            <?php //выводим первое вертикальное изображение ?>
            <?php //в стилях можно поставить display:flex для тега .vertical img {}  ?>
            <?php echo $all_image['img']; ?>
            
            <?php //если следующее вертикальное выводим и его ?>
            <?php if ($common_array[$key+1]['type'] == 'vertical'): ?>
                <?php $trigger_vertical =   true?>
                <?php echo $common_array[$key+1]['img']; ?>
           <?php endif; ?>
        </div>
                          

     <?php endif; ?>

     <?php if ($all_image['type'] == 'horizontal'): ?>
          <div class="horizontal">
          <?php echo $all_image['img']; ?>
          </div>    
     <?php endif; ?>



<?php endforeach; ?>

Комментарии
Наверх страницы