How to display images from a folder 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 display images directly from a directory is easier than display 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 folder and display it?

Here we have a directory called images and we want to show all the images from it to 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:

How to get images from folder and display it?

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 the uppercase or in the lowercase. So we have used extensions in our pattern here in lowercase and uppercase.

How to get all images from folder and show the image with 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:

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

Display Random image from 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:

Display Random image from folder

List all images in folder and subfolders

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 the folders containing the photos themselves (i.e., full permissions).

So, let’s get started. We begin our list of tasks by getting a list of 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:

List all images in folder and subfolders

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.

About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment