Wordpress loading all local images from specific directory?

Question

I need to load some local images.. I used this code before to load some images

        <?php 
        function loopImages(){
            $imagePath = get_stylesheet_directory()."/IMAGES/sponsors/";
            $filesList =glob($imagePath.'*.{JPG,jpg,PNG,png}', GLOB_BRACE);
            echo $filesList;
            foreach($filesList as $file){
                echo '<img src="'.$file.'">';
            }
        }
        loopImages();
    ?>

This worked almost fine. I could loop through files and browser could render 8 img tags, but it showed it cannot load local images so I changed get_stylesheet_directory() to get_stylesheet_directory_uri() like this

         function loopImages(){
            $imagePath = get_stylesheet_directory_uri()."/IMAGES/sponsors/";
            $filesList =glob($imagePath.'*.{JPG,jpg,PNG,png}', GLOB_BRACE);
            echo $filesList;
            foreach($filesList as $file){
                echo '<img src="'.$file.'">';
            }
        }
        loopImages();

but, it shows nothing. Just nothing. What did I do wrong? How can I render my local images?

Answer 1

get_stylesheet_directory was necessary for the glob function to work, you need a combination of both, e.g. fetch the files in that directory:

$imagePath = get_stylesheet_directory() . "/IMAGES/sponsors/";
$filesList = glob( $imagePath . '*.{JPG,jpg,PNG,png}', GLOB_BRACE );

and display the files at that URL:

$imagePathURL = get_stylesheet_directory_uri() . "/IMAGES/sponsors/";
...
    echo '<img src="' . esc_url( $imagePathURL . basename( $file ) ) . '">';

Notice that I wrapped it in esc_url, this is escaping and we do it to keep things secure and avoid injection attacks.

TLDR:

• glob wants a folder path
• but <img wants a URL instead