Дата публикации : 2024.01.09
Рейтинг статьи:

How to display a horizontal image in a row and two vertical ones in a php loop

First, let"s create an array in which the images are divided into vertical and horizontal

The images will be displayed in the order in which they are specified in the array, and if a vertical image is followed by another vertical one, the script will output them in one line

<?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"
          
},      
                

Image output script

 <?php foreach ($common_array as $key => $all_image): ?>  
                    
    <?php static $trigger_vertical null?>
                    
    <?php //let's skip the loop, since we know that the image is vertical  ?>      
     <?php //and is already displayed below ?>    
    <?php if ($trigger_vertical): ?>
        <?php 
            $trigger_vertical 
null;
            continue 
1;
        
?>
    <?php endif; ?>
  
    <?php if ($all_image['type'] == 'vertical'): ?>
                           
                                
        <div class="vertical">
            <?php //display the first vertical image ?>
            <?php //in styles you can set display:flex for the tag .vertical img {}  ?>
            <?php echo $all_image['img']; ?>
            
            <?php //if the next vertical one is also output ?>
            <?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; ?>

Нужна платная помощь? Пишите в
Комментарии
Наверх страницы