Creating a Simple Image Gallery using PHP
Here i will show how to make an image gallery using PHP’s File Manipulation functions.The code basically generates a web page to display image by scanning a specified directory.
For this first we need to define the location of the images.This directory should be accessible by the script owner,meaning you should have read permissions on the directory.The directory can be defined as follows:
$photosDir = ‘./photos’;
If you are using Wamp server,create the folder ‘photos’ inside the ‘www’ root folder for the above code to work.Now set up an array containing the common file extensions for the images.
Initialize an array to read the directory contents and then build the photo list.
To open the directory,we use the opendir() function.The opendir() function takes the above formed variable $photosDir,that is the variable containing the location of the images.The openDir() returns a pointer to the directory named as the parameter.
Now using the above pointer,we iterate over the directory using the readdir() function,which returns a single entry each time.Once done,use the closedir() funcion to close the file pointer.
if (file_exists($photosDir)) {
$dp = opendir($photosDir) or die (‘ERROR: Cannot open directory’);
while ($file = readdir($dp)) {
if ($file != ‘.’ && $file != ‘..’) {
$fileData = pathinfo($file);
if (in_array($fileData['extension'], $photosExt)) {
$photosList[] = “$photosDir/$file”;
}
}
}
closedir($dp);
Now iterate through the above formed array-photoList[] and display each image.For that, run a ‘for’ loop and define the img src in each case:
<img height=”150″ width=”200″
src=”<?php echo $photosList[$x]; ?>” />
Here is the screen shot of what you will achieve.
Here is the entire code.
<html>
<head>
<title>Creating An Image Gallery</title>
</head>
<style type="text/css">
ul {
list-style-type: none;
}
li {
float: left;
padding: 10px;
margin: 10px;
font: bold 10px Verdana, sans-serif;
}
img {
display: block;
border: 1px solid #333300;
margin-bottom: 5px;
}
</style>
<body>
<h2>Creating An Image Gallery</h2>
<ul>
<?php
// define location of photo images
$photosDir = './photos';
// set up an array of known extensions
$photosExt = array('gif', 'jpg', 'jpeg', 'tif', 'tiff', 'bmp', 'png');
// initialize array to hold filenames of images found
$photosList = array();
// read directory contents and // build photo list
if (file_exists($photosDir)) {
$dp = opendir($photosDir) or die ('ERROR: Cannot open directory');
while ($file = readdir($dp)) {
if ($file != '.' && $file != '..') {
$fileData = pathinfo($file);
if (in_array($fileData['extension'], $photosExt)) {
$photosList[] = "$photosDir/$file";
}
}
}
closedir($dp);
} else {
die ('ERROR: Directory does not exist.');
}
// iterate over photo list and display each image
if (count($photosList) > 0) {
for ($x=0; $x<count($photosList); $x++) {
?>
<li>
<img height="150" width="200"
src="<?php echo $photosList[$x]; ?>" />
</li>
<?php
}
} else {
die('ERROR: No images found in directory');
}
?>
</ul>
</body>
</html>
Download the full code
Note:Don’t forget to change the path of the directory containing the images
Related posts:
Leave your response!