Automatic Photo Gallery

This project allows you to create photo galleries automatically. The PHP script scans for images within a folder and then turns them into an HTML photo gallery. This projects shows 2 examples of galleries you can create. Basically how you use CSS will determine how your gallery looks.

This can be used in a project where you have FTP access to a server and simply upload the pictures into a folder, or you could have an HTML form that allows for file uploads that would dump the images in a folder.

Code Explanation:

autogallery.php

Line 1 – Gives the Page a Header in HTML

Line 3 – Opens PHP Script

Line 5 – Uses Glob() function to find all files with specific suffixes and puts them into an array. The initial “./*.{jpeg,jpg,gif}” Says to find all files within the current folder that have those endings. You can add as many additional suffixes as you like just separate them by a comma and don not put a space. The final GLOB_BRACE tells glob to find everything that matches between the { }.

Line 7 – This is a commented out troubleshooting step. If the gallery is not working properly this will print out what is currently in the $photos array so that you can see if the array is being created properly.

Lines 9 – 11 – Use a foreach() loop to step through all pictures in the array and write the HTML and CSS required to create the gallery page.

<h1>Auto Photo Gallery</h1>

<?php

$photos = glob("./*.{jpeg,jpg,gif}", GLOB_BRACE);

//echo var_dump($photos);

foreach($photos as $pic){
    echo "<img style='display:block; margin-left:auto; margin-right:auto; width:50%;' src='$pic'><br><br>";
}
?>
Code language: HTML, XML (xml)

Code Explanation:

photogallery-block.php

Line 1 – Gives the Page a Header in HTML

Line 3 – Opens PHP Script

Line 5 – Uses Glob() function to find all files with specific suffixes and puts them into an array. The initial “./*.{jpeg,jpg,gif}” Says to find all files within the current folder that have those endings. You can add as many additional suffixes as you like just separate them by a comma and don not put a space. The final GLOB_BRACE tells glob to find everything that matches between the { }.

Line 7 – This is a commented out troubleshooting step. If the gallery is not working properly this will print out what is currently in the $photos array so that you can see if the array is being created properly.

Lines 9 – 18 – Use a foreach() loop to step through all pictures in the array and write the HTML and CSS required to create the gallery page. We use DIV tags to create 3 different DIV’s so that the images display in a thumbnail gallery. the first DIV is used for the overall size of the gallery, then the next 2 DIV’s are used so that you can display images that are either landscape or portrait. If you use only one DIV for the images they will either be distorted, or they may overlap each other. (try adding a 2px black border to all the DIV tags so that you can see what the layout actually is. border:2px black solid; )

<h1>Auto Photo Gallery</h1>

<?php

$photos = glob("./*.{jpeg,jpg,gif}", GLOB_BRACE);

//echo var_dump($photos);

echo "<div style='margin-left:auto; margin-right:auto; width:75%;'>";
foreach($photos as $pic){
    echo "<div style='float:left; height:300px; width:300px;'>";
    echo "<div style='float:left; height:200px; width:200px;'>";
    echo "<img style='width:100%;' src='$pic'>";
    echo "</div>";
    echo "</div>";
}

echo "</div>";
?>
Code language: HTML, XML (xml)