My method for dynamically loading photos and thumbnails

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

My method for dynamically loading photos and thumbnails

Steven
Hello everyone, I just finished this up, and I'm still pretty new to PHP, so please correct anything that is incorrect or bad practices, but this is a php script that you can use to load both images and their thumbnails into Shadowbox.

I'll try to explain this as well as I can for those who don't understand php, so bear with me.


<?php
//path of directory to open
$directory = "images/pics/";
//suffix you have added to your thumbnails
$thumb_suffix = "_thumb";

//tests to make sure directory exists and can be opened
$dir_handle = @opendir($directory) or die("Unable to open folder");


$files = scandir($directory);

foreach($files as $file) {
         //if the file is a system file, or is a thumbnail, skip over it
        if ($file == "." || $file == ".." || $file == ".DS_Store" || $file == "Thumbs.db" || strpos($file, $thumb_suffix) == true){
                continue; //ends current loop and begins next
        }
        else {
                //stores image type as $image_type '.jpg' '.png' etc.
                $image_type = ".".pathinfo($file, PATHINFO_EXTENSION);
                //gets rid of the file extension. 'photo_13.jpg' is now 'photo_13'
                $image_name = pathinfo($file, PATHINFO_FILENAME);

                echo "<li><a href='".$directory.$image_name.$image_type."' rel='shadowbox[Pics]'><img src='".$directory.$image_name.$thumb_suffix.$image_type."' alt='".$image_name."'/></li>";
        }
}

closedir($dir_handle);

?>


It will be easier to read if you copy/paste this into a code editor that has color-coding. There are comments in the code, but this is a more in-depth explanation.

First, this php script makes a few assumptions. You must have your photos and thumbnails in the same folder. You must also have nothing else in this folder, only images. I set my pics up with a large size "photo_12.jpg" and a thumbnail "photo_12_thumb.jpg". You can add any suffix to the thumbnail, we'll go over that later. It also assumes you have your images in a ul>li setup. If you dont you can simply remove the <li></li> tags at the end of the script, or replace them with whatever you wish to use.

Save this as a php doc and put it in the same folder as your html doc. You can change that, but you'll have to change the paths in this script, but thats pretty easy.

The first part of the php gets everything set up. You'll need to change these as you see fit.

$directory
Where the photos and thumbs are stored relative to the php file. The trailing '/' is important.

$thumb_suffix
What you call your thumbs.

You can name them "photo_12_t.jpg" or anything you want, but it has to be something fairly unique. The script checks for thumbnails by looking for any file name that contains $thumb_suffix, so if your $thumb_suffix is "t" (ie "photo_12t.jpg") it will assume everything is a thumbnail because "photo" has a "t". More on that later.

$dir_handle = @opendir($directory) or die("Unable to open folder");
This is a test to make sure the folder exists and can be opened. If it can't the script will abort.

$files = scandir($directory);
Makes a list of all of the files in the folder you chose at the beginning.

foreach($files as $file) { is the start of a loop. Everything after this will repeat for every file in that folder. For the rest of the code, each file is $file, while $files is the entire list.

if ($file == "." || $file == ".." || $file == ".DS_Store" || $file == "Thumbs.db" || strpos($file, $thumb_suffix) == true){
                continue;
        }

This line is the scariest looking, but is pretty simple. This looks at each file and determines if it is a 'hidden' system file that windows and osx like to leave behind, or if the unix commands '.' and '..' show up in the list. If you dont know what that means, don't worry about it. Lastly it checks if it is a thumbnail file by seeing the the filename contains the $thumb_suffix we picked earlier. It checks the whole file name (because checking just the end of the file is messy and I couldn't figure it out).

The '||' parts mean 'or'. So this line checks if it is '.' or '..' or 'ds_store' or 'thumbs.db'. If it does, the line "continue;" runs, which is an odd name, because it actually causes the loop to stop and move on to the next file. This line makes sure we get just the regular, full-size pic's filenames, which is what we need.

else {

Pretty self explanatory. Everything after this runs if the 'if' section doesn't trigger the 'continue' part, so the following code runs when we've isolated the large pic file names.

$image_type = ".".pathinfo($file, PATHINFO_EXTENSION);
$image_name = pathinfo($file, PATHINFO_FILENAME);

These two lines get us two more variables, one with the basename of the file (photo_12.jpg is stored as photo_12 in $image_name), and one with the file extension (photo_12.jpg is stored as .jpg in $image_type). Keep in mind that this loop runs for each individual file, so it doesn't matter if you have jpgs, pngs, tiffs, or whatever. But your thumbs and fullsize pics must share the same type (photo_12.png and photo_12_thumb.jpg won't work).

echo "<li><a href='".$directory.$image_name.$image_type."' rel='shadowbox[Pics]'><img src='".$directory.$image_name.$thumb_suffix.$image_type."' alt='alt_text'/></li>";

This is another scary looking line, but this is where the magic happens. This spits out a line of html using all of the information we've gathered so far. We've had to split the data apart into its base pieces so we can manipulate is easier here.
I'm not going to explain all of this because you all should be familiar enough with html to figure most of it out. You can change the shadowbox[Pics] to whatever gallery you want to name it. You can change the list-item tags as well if you aren't using a ul>li to display these.
The important thing to know is that this line will output this to your html doc:
<li>steves_sexy_mug</li>
(does anyone know how to make this render as text?)

closedir($dir_handle);

Lastly, this line closes the open dir. It can prevent memory leaks, and is just good practice. Don't worry about it and don't touch it!

To put this in your html, just add this line wherever you want the output to show up:
        <?PHP
                include("NAME_OF_DOCUMENT.php");
        ?>
Changing that to whatever you named this when you saved it. Depending on your server you may need to edit .htaccess to get the php to parse, but I'm not getting into that here. Google is your friend.

If anyone has questions or suggestions please help out!