Recently a member asked how to create a photo gallery using his various directories filled with image files. Here is an overview of the steps and fuctions needed to do this.

Assuming that the following directories exists and are full of image files:
www.testsite.web/photos/gallery1/
www.testsite.web/photos/gallery2/
www.testsite.web/pictures/album1/

In order to get the contents for a specific gallery you'll need to let the script know which one to look in. You'll need to use a link that carries the arguments needed to locate the right photos.

www.testsite.web/MyGallery/index.php?dir=photos&album=gallery1
- or -
www.testsite.web/MyGallery/index.php?dir=pictures&album=album1

Then in your script which in this case is called index.php you need to retrieve that information.



That tells the script to get the values for the variables from the arguments passed in the link.

---

Now that the script knows where to find the files, we need to tell it how to read each file.



This would produce a most undisired effect where all of the images in the directory will be shown in full resolution with the name of the image file below it. It would take a long time to load a page with so many large images and it would be difficult to view.
The "echo" function will simplay output everything in the variable named $html_block. This is how you would insert the HTML generated by PHP into the otherwise static webpage.


The best option for rersolving this problem is to use PHP to create thumbnail images to be displayed in a table with a link to the full size image.

---

In order to display thumbnails for the images in your galleries, you'll need to use the image functionfs availible in PHP in the GD2 library. This is like a really basic image editor like photoshop but you have to program each step instead of using your mouse to click on options.

Something you need to think about is that every time you modify an image on the server with PHP it is like editing an image on your computer with photoshop. Memory and cpu usage is very high. So trying to generate thumbnails on the fly would actually require much more time to load your gallery since the server needs to read each image, run the required processes on the image, generate the thumbnail, and display the image on the page. I can guarantee that if you get much traffic to you gallery and you generate your thumbnails on the fly, you'll lose hoyour hosting account on most servers.

I suggest creating a directory to hold all of your thumbnail files. This can either be a subdirectory of the gallery being used or a master directory of all of the gallery thumbnails. I like the master directory option so I'll explain that one.

You'll open the image file, resize the image and save the image in the thumbnail directory. For this example, we'll only use JPEG files. The steps to include other image file types can be discussed later.

Here is the basic run down on how to create and save a thumbnail from the original JPEG image.

Based on example given in The PHP Manual


This would read an image file in this case test.jpg and save a thumbnail image at the url of www.testsite.web/thumbs/test.jpg.
If the image was 800 X 600 originally, the thumbnail would be 150 X 112. If the image was 600 X 800 instead, the thumbnail would be 150 X 200.

You would then need to check and see if the thumbnail exists when you read the file in the directory. If it already exists, then display that thumbnail with a link to the full image. If the thumbnail does not exist, then create the thumbnail and display it with a link to the full image.
This is helpful if you already have a large number of images in the directory and you don't want to manually create the thumbnails one at a time in photoshop or whatevery your graphics editor software is. Also, if you do a check for the thumbnail when you read the filenames, you can add photos to the directory and the thumbnail will automatically be generated. Your gallery wuld be maintenence free as a result.

---

To check for the thumbnail and either use or generate the thumbnail, this is what you would need to do.

From the block of code above we modify the section that reads the filenames in the directory.


Keep in mind that you'll need to modify each piece of the code to work with the other pieces. For the most part, the script is completely written here but because I think everyone should learn to do things with instruction and examples, I won't be putting it all together. If you learn how to use each of the functions shown above and try to follow the flow of logic used to write each piece of the script, I think nearly anyone can write a code to create a photo gallery out of their existing image directorie.

---

PHP Functions Used In This Tutorial:

• opendir
• readdir
• closedir
• echo
• header
• list
• getimagesize
• imagecreatetruecolor
• imagecreatefromjpeg
• imagecopyresize
• imagejpg
• file_exists

PHP Statements Used In This Tutorial:

• while
• if
• else

PHP Super Globals Used In This Tutorial:

• $_get[]

---

Here is how the finished script should flow.

1. Open the PHP Code (<?php)
2. Get directory information from the variables provided in the link.
3. Open the directory that contains the images to be displayed.
4. Read the filenames of the files in the directory.
   • For each filename in the directory do the following:
     • Check and see if a thumbnail with the same name as the file being read exists.
       • If the thumbnail exists, use the saved thumbnail.
       • If the thumbnail does not exist, create the thumbnail, save it in the correct directory, and use the thumbnail.
     • Create a variable to hold the output of this script usin g the following information:
       • Using the image thumbnail that is associated with the filename being read, display a linked thumbnail to the fullsized image. This can be displayed in a table or a simple list.
5. Close the file directory being used.
6. Close The PHP Code (?>)
7. Open/Start the HTML part of the script.
   • Basically, create the entire webpage with all of the information except the part that is generated above.
8. Insert the PHP generated HTML where required in your webpage.
9. Close/Finish the HTML portion of the script.
10. Save the script and request it with the following url:
    • www.testsite.web/MyGallery/index.php?dir=photos&album=gallery1

I know that this may be a little difficult to get through at first but I think that if you can learn how to use the PHP described above, you'll be able to write other scripts by yourself in the future.

Hope this is useful.

vujsa

 

 

 

Reply

nice job writing it , verry usefull thanks !

Reply

quite well thought out script youve got there......im currently making an image gallery script with ajax to make it all look fancy so as soon as i get it done i will post it up
Ryan

Reply

wow a great php tutorial, with all the info needed, 10x dude will try rigth away as I need a gallery Great coding techniques used and great work, I didn;t even know that I could do this myself

Reply