get all images in an array from directory and sub-directories

Question

Currently I've similar to the following tree structure:

+images
    +sub-directory
       -image1.jpg
       -image2.jpg
    +sub-directory-2
       -image3.jpg
       -image4.jpg
    -some-image.jpg
    -another.jpg

<script>
<?php
//path to directory to scan. i have included a wildcard for a subdirectory
$directory = "images/*/";

//get all image files with a .jpg extension.
$images = glob("" . $directory . "*.jpg");

$imgs = '';
// create array
foreach($images as $image){ $imgs[] = "$image"; }
echo "var allImages = ".$imgs.";\n";
?>

console.log(allImages);
</script>

As I'm extremely new to php, I'm blindly getting logged as Array() in the console.

Also, I've set $directory = "images/*/"; which will get all images inside the subfolders only but not getting images inside parent directory that likely to images/some-image.jpg and I wanted to get this too.

I want all the images in an array like this (when I use console.log(allImages);):

['some-image.jpg','another.jpg','image1.jpg','image2.jpg','image3.jpg','image4.jpg']

How far deep to the sub-directories go? I ask because if they are not very deep, there are several recursive glob functions on the php glob manual page. If it is fairly deep, then maybe look at using exec with find which will likely give you a faster result. — Jonathan Kuhn, Dec 09 '14 at 19:59
@JonathanKuhn Currently I've no much deeper sub-directories and would be okay with it. — Bhojendra Rauniyar, Dec 09 '14 at 20:00

score 4 · Answer 1 · edited May 23 '17 at 11:56

4

I love JSON, keeps things nice and simple:

<?php
$images = glob("images/*/*.jpg");
$imgs = array();
foreach($images as $image){ $imgs[] = $image; }
?>
<script>
    var allImages = JSON.parse('<?php echo json_encode($imgs);?>');
    console.log( allImages);
</script>

Now you have the php array available in javascript, with the same structure. You can loop them with a for, of if you have jQuery, $.each().
I changed a code more to your style (mixing php and html), but you should try to split those in htmltemplates.

Im not 100% sure about this, but you can regex in your glob, if this works you don't need the foreach, this will return only the filenames:

$images = glob("~(?:images/*/)*\.jpg~");

edited May 23 '17 at 11:56

Community

1
1

answered Dec 09 '14 at 20:06

Martijn

15,791
4
36
68

I changed it a bit more like your code. This uses the same variables as you do, should work. – Martijn Dec 09 '14 at 20:13
SyntaxError: missing ) after argument list var allImages = JSON.parse("["images\/ads\/ad-img-1.jpg","images\/ads\/ad-specia... – Bhojendra Rauniyar Dec 09 '14 at 20:18
I swicthed to single quotes. I think your array might not be what you are looking for, but with `print_r()` you can check the PHP array to see what the JS version looks like – Martijn Dec 09 '14 at 20:24
Now works fine but not getting parent directory images like some-image.jpg as in my question. and with regex in glob returns [] – Bhojendra Rauniyar Dec 09 '14 at 20:30

erikvimz · Answer 2 · 2014-12-09T20:07:54.893

1

What about this:

<script>

<?php

$directory = "images/*/";

$images = glob("" . $directory . "*.jpg");

echo "var allImages = ['".implode("', '", $images)."'];\n";

?>

console.log(allImages);

</script>

edited Dec 09 '14 at 20:07

answered Dec 09 '14 at 20:02

erikvimz

5,256
6
44
60

Works fine! Plus I need to get images like some-image.jpg that are in image directory. Currently its getting all sub-directories images. – Bhojendra Rauniyar Dec 09 '14 at 20:05
is there a reason you wouldn't just use json_encode? – Jonathan Kuhn Dec 09 '14 at 20:06
json would be the way to go, I just specified the desired solution. – erikvimz Dec 09 '14 at 20:06
Can I use like this: `$directory = "images, images/*/";` – Bhojendra Rauniyar Dec 09 '14 at 20:20
I'm not sure I don't know glob() function that well, you can read more about it here: http://php.net/manual/en/function.glob.php – erikvimz Dec 09 '14 at 21:22

DevDonkey · Answer 3 · 2014-12-09T20:26:34.150

How about a recursive function?

function loadImages($folder)
{
    $files = glob($folder);
    foreach( $files as $file )
    {
        if(is_dir($file))
        {
            loadImages($file);
        } else {
            $images[] = $file; // add some file type validation here
        }
    }

    return $images;
}

$images = json_encode(loadImages($startFolderPath));

I'm on an iPad so I can't test it.

get all images in an array from directory and sub-directories

3 Answers3