1. Code
  2. News

Scanning Folders with PHP

Read Time:3 minsLanguages:

Let's imagine that you want to build a page that will display snapshots of your latest work. One way to do this would be to hard-code the images into your document. The obvious repercussion is that, every time you want to add a new item, you must manually update your html document. Another method would be to store and retrieve the information from a MYSQL database. This will function perfectly, though for many sites, this solution may possibly offer far more power than is technically needed - not to mention the increase in hosting costs.

In such instances, the best solution is to make PHP scan your "portfolio" folder and dynamically create the code for you. If you want to update your page with a new snapshot, all that you need to do is drag the image, and its respective thumbnail, into the appropriate folders - and PHP will do the rest. Let's build it now!

Portfolio PagePortfolio PagePortfolio Page

Our Mission

Let's briefly outline what we need to accomplish.

  • Use PHP to scan our portfolio folder. It will then cyle through each file, that is an image, and then display it on the page.
  • Style our content a bit using CSS.
  • When the users clicks on a thumbnail, we'll use jQuery to load the large version of the image in the main panel.
  • If the user has Javascript disabled, he'll simply be directed to a new page that contains the full-sized image

How to Use It

Adding a new image to our portfolio is simple. Take a snapshot of your website, brochure, postcard, etc and size it to 500px x 350px. Place this image within the "images/featured" folder.

Next, create a thumbnail that is 50px x 50px. Place this image within the "images/tn" folder.

You must make sure that both the full-sized and the thumbnail images have the exact same file name.

Our Final HTML

Our Final CSS

View it here.

Compensating For IE6

IE6 ProblemIE6 ProblemIE6 Problem

Luckily, we only have one thing to fix. If you look at the image above, you'll see that the #options unordered list is not containing its floated list items. While modern browsers will correctly clear the items thanks to our "overflow: hidden;" style, IE6 needs one more rule. Append this to your stylesheet.

I could have set the height to anything and it would still work. Think of it as Drago punching IE6 in the face and telling it, "Wake up!". This style forces IE6 to expand as much as is need to clear its children.

The Complete Javascript(jQuery)

Extra Credit

There are ways to create thumbnails of our images dynamically. Try to find a way to make PHP scan our "featured" folder and then dynamically create a thumbnail version and save it within the "tn" folder.

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.