Adding a unique class to items in a PHP foreach loop - php

Question

I've got a bunch of images in a folder called img and am trying to do a foreach loop to loop over them and output them to the screen, but then adding a unique class to each image.
Here's what I have so far but it says $i is undefined, so I'm not sure I'm on the right track. I'm very new to this.
$dir = "img/gallery/*.jpg";
$classes = array('promotional', 'beaches', 'volunteers');
$images = glob( $dir );
foreach ( $images as $image ):
$class = $classes[$i++ % 3];
echo '
<div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix ' . $class . '">
<div class="portfolio-item">
<div class="shot-item">
<a class="overlay lightbox" href="' . $image . '">;
<img src="' . $image . '" />;
<i class="lnr lnr-plus-circle item-icon"></i>
</a>
</div>
</div>
</div>
';
endforeach;
Thanks for any help!

Answer 1

I would modify the foreach a little bit like so:
$dir = "img/gallery/*.jpg";
$classes = array('promotional', 'beaches', 'volunteers');
$images = glob( $dir );
$i = 0;
foreach ( $images as $x => $image ):
$class = $classes[$i++ % 6];
echo '
<div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix ' . $class . '-' . $x . '">
<div class="portfolio-item">
<div class="shot-item">
<a class="overlay lightbox" href="' . $image . '">;
<img src="' . $image . '" />;
<i class="lnr lnr-plus-circle item-icon"></i>
</a>
</div>
</div>
</div>
';
endforeach;

Answer 2

I think best way would be using two class rather than one unique.
First class will be use to detect item/content type,
and second will be unique to identify uniquely.
By doing this it will give you more control over content.
Here is little bit modification.
$dir = "img/gallery/*.jpg";
$classes = array('promotional', 'beaches', 'volunteers');
$images = glob( $dir );
foreach ( $images as $index => $image ):
$class = $classes[$i++ % 6];
echo "
<div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix my-list-item-{$class} image-id-{$index}">
<div class="portfolio-item">
<div class="shot-item">
<a class="overlay lightbox" href="' . $image . '">;
<img src="' . $image . '" />;
<i class="lnr lnr-plus-circle item-icon"></i>
</a>
</div>
</div>
</div>
";
endforeach;
What changes:
Changes single quote(') to double quote(") to be able to parse variable inside string, like this {$class} or simply like this $class
added class to identify type of item, my-list-item-{$class} : will result like this this my-list-item-promotional
added class to identify as a unique item, image-id-{$index} : will result like this image-id-5
Use in css or js
CSS:
.my-list-item-promotional{background: green;}
.my-list-item-promotional.image-id-2{background: yellow;}
This will provide all promotional type content background green except item number 2
You can use jQuery to select element like CSS does.
Thank you.

Answer 3

You don't need to define your own $i; it already exists as the index of the $images array.
After you do $images = glob( $dir );, $images will be a numerically indexed array. So instead of explicitly incrementing a counter variable like this:
foreach ( $images as $image ):
$class = $classes[$i++ % 3];
You can just use the index from the array like this:
foreach ( $images as $i => image ):
$class = $classes[$i % 3];