Multiple foreach

General PHP Help
#1

I’m trying to read some images from 2 folders (images and thumbnails).

<?php 
$dir_thumb = "load/thumbnails/";
$thumb = glob($dir_thumb."*.jpg");
foreach($thumb as $newThumb) {
	echo '<ul><li data-type="media" data-url="load/images/a1.jpg"></li><li data-thumbnail-path="'.$newThumb.'"></li></ul>';
} ?>

This works, but I want the data-url link also dynamically loaded in.

I tried the followings, but that failed:

<?php 
$dir_images = "load/images/";
$images = glob($dir_images."*.jpg");
$dir_thumb = "load/thumbnails/";
$thumb = glob($dir_thumb."*.jpg");
foreach($images as $newImages) {
	echo '<ul><li data-type="media" data-url="'.$newImages.'"></li>';
}
foreach($thumb as $newThumb) {
	echo '<li data-thumbnail-path="'.$newThumb.'"></li></ul>';
} 

?>

Also I tried to put the first foreach in the other foreach, but that works partly.
Only the first foreach seam to be loading in the images.

What do I do wrong here?

#2

The problem I see is you’re creating two separate sets of lists for starters.

There is another issue which is you’re opening a ul in each iteration… both <ul> and </ul> should be left out of the loops, like this:

        <ul>
        <?php
        foreach($images as $newImages) {
        ?>
        	<li data-type="media" data-url="<?php echo $newImages;?>"></li>
        <?php
        }
        ?>
        </ul>

Another thing to notice is how are image files related, meaning how do you determine a particulan thumb correspond to a particular image? I’ll assume the filename is the same (besides the directory they live in), in this case, you should use a single loop, such as:

        <ul>
        <?php
        foreach($images as $newImages) {
        ?>
        	<li data-type="media" data-url="<?php echo $newImages;?>" data-thumbnail-path="<?php echo $newThumb; ?>"></li>
        <?php
        }
        ?>
        </ul>

Hope I made myself clear, let me know if you have any questions :slight_smile:

#3

Thanks!

I found out that this works and took your suggestion to put <ul> out of the loop.

<ul>
 <?php
 $dir_images = "load/images/";
 $images = glob($dir_images."*.jpg");
 $dir_thumb = "load/thumbnails/";
 $thumb = glob($dir_thumb."*.jpg");
 foreach(array_combine($images, $thumb) as $newImages => $newThumb){
     ?>
     <li data-type="media" data-url="<?php echo $newImages;?>" data-thumbnail-path="<?php echo $newThumb; ?>"></li>
     <?php
 }
 ?>
</ul>

But with every solution, I get new problems. (currently just loading 1 image in the grid)

Maybe a short explain what I’m trying to do.
I want to make a one page website using a responsive grid which want this input:

<ul data-cat="Category one">
    <li data-type="media" data-url="load/images/1a.jpg"></li>
    <li data-thumbnail-path="load/thumbnail/small_1a.jpg"></li>

    <li data-type="media" data-url="load/images/2a.jpg"></li>
    <li data-thumbnail-path="load/thumbnail/small_2a.jpg"></li>

    <li data-type="media" data-url="load/images/3a.jpg"></li>
    <li data-thumbnail-path="load/thumbnail/small_3a.jpg"></li>
</ul>

Another thing to notice is how are image files related, meaning how do you determine a particulan thumb correspond to a particular image?

Firstly I thought it didn’t matter what the files are called, it’s seems to go well first, but I think I’m wrong
on that probably? (I’m creating thumbs with a php script using imagecopyresampled)
Maybe what I want isn’t possbile with my current knowledge…

So the idea is to put a big image in the images folder, run the thumb convert script and then photo grid gallery will display the thumbnails responsive and when I click those, I get the bigger image (works currently)

#4

Well, the thing is you need some way to determine that a certain thumbnail corresponds to an original image… you could do that in several ways but you must know which one you’re using.

On that note, let’s say you simply use the name of the original file as name for the generated thumbnail (but store it in a different directory), then there’d be no need for:

In fact, your loop would be simpler, like:

foreach($images as $image ){
     ?>
     <li data-type="media" data-url="<?php echo $image;?>" data-thumbnail-path="<?php echo 'load/thumbnails/'.basename($image); ?>"></li>
     <?php
 }

The responsive part depends on front-end components (js & css).

Hope this helps :slight_smile:

#5

Thank you.

I managed to create a working script based upon all the help.
More info about that in other topic:

Sponsor our Newsletter | Privacy Policy | Terms of Service