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; ?>
