Display Random Image from WP Directory

I have used a function

 
/*
    Random File Function
    Written By: Qassim Hassan
    Website: wp-time.com
    Twitter: @QQQHZ
*/
 
function Qassim_Random_File($folder_path = null){
 
    if( !empty($folder_path) ){ // if the folder path is not empty
        $files_array = scandir($folder_path);
        $count = count($files_array);
 
        if( $count > 2 ){ // if has files in the folder
            $minus = $count - 1;
            $random = rand(2, $minus);
            $random_file = $files_array[$random]; // random file, result will be for example: image.png
            $file_link = $folder_path . "/" . $random_file; // file link, result will be for example: your-folder-path/image.png
            return '<a href="'.$file_link.'" target="_blank" title="'.$random_file.'"><img src="'.$file_link.'" alt="'.$random_file.'"></a>';
        }
 
        else{
            return "The folder is empty!";
        }
    }
 
    else{
        return "Please enter folder path!";
    }
 
}
 
?>

to pull a random image from a specific wordpress directory. I can successfully call up a random image file however it does not display, just displays the image filename and a broken image icon.

The code I am using from the tutorial to display the image is <?php echo Qassim_Random_File("my-folder-name"); // display random image! ?>

I am brand new to php as of this week, and a fairly novice coder in general (know some basics) so I really am stumped. I’ve fooled with other possible solutions from stack overflow already but this tutorial is the only thing I’ve been able to get close to working. Many thanks if anyone can spot the problem!

This is showing up in the HTML inspector:

<div class="elementor-widget-container">
    <h5>call</h5>
    <a href="wp-content/uploads/H-PH-MA-Greyscale/image_2.jpg" target="_blank" title="image_2.jpg">
        <img src="wp-content/uploads/H-PH-MA-Greyscale/image_2.jpg" alt="image_2.jpg">
    </a>
</div>

Answer

You just need to replace this line:

$file_link = $folder_path . "/" . $random_file;

…with this one:

 $file_link =  get_site_url(null, $folder_path . "/" . $random_file);

What was the problem?

scandir is returning the physical file path, not the url to the file – we can confirm this is we look at one of the values it returns for $random_file, e.g. wp-content/uploads/H-PH-MA-Greyscale

This is a relative URL, but we need an absolute URL so that it will work no matter where it is called. We also need to include the site URL so that the path to wp-content is correct. (Note: site URL and home URL can be different – the site URL is the one that always point to the location of the WP files).

Another problem is the trailing slash (or lack of one) on the site URL. get_site_url and get_home_url do not add the trailing slash to the URL, so you need to add it yourself if it isn’t included in the file path.

So how do we solve this?

Using the get_site_url function added the correct path to the WP files, and it also lets us pass it the file path with our without a preceding slash as a parameter, and it will add the slash on the path only if it is needed.