How to display images from a directory in PHP

In this tutorial, we will go through the basics of how to display images from a folder in PHP. This will be done by going over some code that you can use to do so.

Sometimes displaying images directly from a directory is easier than displaying images from a database. If you want to learn how to display image files directly from a folder, please check out the steps below.

How to get images from a directory and display them?

Here we have a directory called images and we want to show all the images from it on our website. So here is the code below:

<?php

	//get current directory
	$working_dir = getcwd();
	
	//get image directory
	$img_dir = $working_dir . "/images/";
	
	//change current directory to image directory
	chdir($img_dir);
	
	//using glob() function get images 
	$files = glob("*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}", GLOB_BRACE );
	
	//again change the directory to working directory
	chdir($working_dir);

	//iterate over image files
	foreach ($files as $file) {
	?>
		<img src="<?php echo "images/" . $file ?>" style="height: 200px; width: 200px;"/>
	<?php }
?>

Output:

The PHP function glob() is used to retrieve a list of files or directories matching a specified pattern. 

In the above code, I am using a pattern *.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}. This is because it is often seen that the image extension is sometimes in uppercase or in lowercase. So we have used extensions in our pattern here in lowercase and uppercase.

Here I am using getcwd() function to get the current directory in PHP. The chdir function will change the working directory to the image directory.

How to get all images from a folder and show the image with the name in a table?

Sometimes, you want to get all images (and maybe other files) from a folder. After that, you would like to show the images with names in a table. So here is the below code.

<?php

	//get current directory
	$working_dir = getcwd();
	
	//get image directory
	$img_dir = $working_dir . "/images/";
	
	//change current directory to image directory
	chdir($img_dir);
	
	//using glob() function get images 
	$files = glob("*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}", GLOB_BRACE );
	
	
	//again change the directory to working directory
	chdir($working_dir);
	?>
	<table width="100%" border="1px">
		<tr>
			<th>S/N</th>
			<th>Image Preview</th>
			<th>Image Name</th>
		</tr>
	
	<?php
	$c = 1;
	//iterate over image files
	foreach ($files as $file) {
	?>
		<tr align="center">
			<td><?php echo $c;?></td>
			<td><img src="<?php echo "images/" . $file ?>" style="height: 100px; width: 100px;"/></td>
			<td><?php echo $file ?></td>
		</tr>
	<?php $c++; } ?>
	</table>

Output:

Display Random images from a folder

This is a basic “how-to” article about randomizing images from a folder in PHP. Some sites need this functionality because they have many kinds of images and numerous categories which makes it hard for them to manage their images; therefore, they need to randomly list the photos on the site.

PHP’s shuffle() function randomly reorders the elements of an array in order to give a random set. As the API documentation says, it is simply “a good way to generate a random permutation given an existing permutation.”

<?php

	//get current directory
	$working_dir = getcwd();
	
	//get image directory
	$img_dir = $working_dir . "/images/";
	
	//change current directory to image directory
	chdir($img_dir);
	
	//using glob() function get images 
	$files = glob("*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}", GLOB_BRACE );
	
	//shuffle the array element
	shuffle($files);
	
	//again change the directory to working directory
	chdir($working_dir);
	
	//iterate over image files
	foreach ($files as $file) {
	?>
		<img src="<?php echo "images/" . $file ?>" style="height: 100px; width: 100px;"/>
	<?php } ?>
	

	

Output:

List all images files in directory and subdirectories

Why would you want to do this? One possible use case is that you’ve got an image gallery website with a very large number of images. You need to back up the site contents, including all the images, but don’t want to download millions of files or set up a database from which you can export thumbnails and then re-upload those again.

In order for this possible solution to work, your server must be able to run PHP. In addition, you should have write access to the folder containing folders containing the photos themselves (i.e., full permissions).

So, let’s get started. We begin our list of tasks by looping through all images from subfolders recursively in the given directory:

<?php
 
//get all images from directory and sub directory
function getImg($pattern, $flags = 0) {
    $files = glob($pattern, $flags); 
    
	foreach( glob(dirname($pattern).'/*', GLOB_ONLYDIR|GLOB_NOSORT) as $dir ) {
        $files = array_merge($files, getImg($dir.'/'.basename($pattern), $flags));
    }
    return $files;
}

//to find the all images
$result = getImg('*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}', GLOB_BRACE);
var_dump($result);

?>

Output:

Conclusion:

In this blog post, we’ve covered the basics of how to display images from a folder in PHP. You should now be armed with enough information for you to get started on your own project without too much struggle. If there are any questions that come up while you’re working through this tutorial, feel free to contact us or comment below.