I’m writing here today because I need some help to insert different class into a foreach loop.
CURRENT SITUATION
I have a foreach loop like this one:
<?php
$propertyImages = get_field('property_images');
if( $propertyImages ):
?>
<div class="container">
<?php foreach( $propertyImages as $propertyImage ): ?>
<a class="gallery-item href="<?php echo esc_url($propertyImage['url']); ?>">
<img class="gallery-img" src="<?php echo esc_url($propertyImage['sizes']['medium']); ?>"/>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
DESIRED SITUATION
With this loop I want to display the images in a grid pattern that loops itself (like the one you can see in the images below.
I think that to achieve this I need to add a "grid-lg-img" for the first 2 element of the loop then add a "grid-sm-img" for the 3rd 4th 5th items of the loop and then again and again with the same 2-3-2-3-… pattern.
Is it possible to craft a solution like this? Or maybe I’m looking in the wrong direction?
Thank you.
3
Answers
You can use only CSS.
You can do this easily with CSS grid.
If you make the grid a total number of columns which is divisible by the amount of actual columns you want in both your ‘large’ and ‘small’ size, then you can just target those first two elements and make them span however many columns you’d like.
So, here you want your large images to be half width, and the smaller ones will be one third width. 6 is divisible by both 2 and 3, so your half width images can be 3 of 6 available columns, and your third width images can be 2 of 6.
Further reading on grid here.
you can wrap it all with while