Inserting image array into complex structure using HTML - php

Question

I have an array image: lstImageSlider.
I need a loop to foreach that array and insert it into the HTML page.
The HTML code from a theme has structure that is difficult to insert.
This is because it has slider__item--0 - 1 - 2 - 3. Loop this.
I can set this code to foreach $lstImageSlider as $item.
``````````````````````
` thumbnail `
``````````````````````
` image 1 ` image 2 `
``````````````````````
HTML code:
<div class="property__ribon">transaction-related</div>
<div id="properties-thumbs" class="slider slider--small js-slider-thumbs">
<div class="slider__block js-slick-slider">
<div class="slider__item--0"><span>Awesome Kitchen!!!</span></div>
<div class="slider__item--1"><span>2</span></div>
<div class="slider__item--2"><span>3</span></div>
<div class="slider__item--3"><span>Ok</span></div>
<div class="slider__item--0"><span>5</span></div>
<div class="slider__item--1"><span>6</span></div>
<div class="slider__item--2"><span>7</span></div>
<div class="slider__item--3"><span>8</span></div>
<div class="slider__item--0"><span>The end</span></div>
</div>
</div>
<div class="slider slider--thumbs">
<div class="slider__wrap">
<div class="slider__block js-slick-slider">
<div data-slide-rel='0' class="slider__item--0">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='1' class="slider__item--1">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='2' class="slider__item--2">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='3' class="slider__item--3">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='4' class="slider__item--0">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='5' class="slider__item--1">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='6' class="slider__item--2">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='7' class="slider__item--3">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='8' class="slider__item--0">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
</div>
</div>
</div>
</div>

Answer 1

i am not sure which you want , but hope it will help you, create counter and if counter >= 3 then set 0
<div class="property__ribon">transaction-related</div>
<div id="properties-thumbs" class="slider slider--small js-slider-thumbs">
<div class="slider__block js-slick-slider">
<?php
$first_counter = 0;
foreach ($lstImageSlider as $item) {
?>
<div class="slider__item--<?=$first_counter?>"><a href="src/image.jpg" data-gallery-index='<?=$first_counter?>'><img
src="assets/img/lazy-image.jpg" alt=""><span>Awesome Kitchen!!!</span></a></div>
<?php
$first_counter++;
if ($first_counter >= 3) {
$first_counter = 0;
}
}
?>
</div>
</div>
<div class="slider slider--thumbs">
<div class="slider__wrap">
<div class="slider__block js-slick-slider">
<?php
$counter = 0;
foreach ($lstImageSlider as $item) {
?>
<div data-slide-rel='<?= $counter ?>' class="slider__item--<?= $counter ?>">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<?php
$counter++;
if ($counter >= 3) {
$counter = 0;
}
}
?>
</div>
</div>
</div>
hope it will help you, any confusion then inform me

Answer 2

It's not clear what you're doing with the items, I assume you're updating the document with js? Or you could output your lines of HTML within this loop. Anyway, this is how you can loop over your items and get the correct classname at the same time:
for($i=0; $i < count($lstImageSlider); $i++){
$j = $i % 3;
$item = $lstImageSlider[$i];
$classname = "slider__item--".$j;
}