Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m Advertisement # How to Dynamically Create Thumbnails Length:ShortLanguages: In this week's screencast, I'll show you how to upload files and then have PHP dynamically create a thumbnail. Whether you're building an ecommerce site, or just a simple gallery, these techniques will absolutely prove to be useful. If you're ready for your "spoonfed" screencast of the week, let's get going! *Note - There have been a few slight changes to the code after some additional thinking and some great suggestions. Don't worry, very little has changed. Just some cleanup. You can review the changes below, and/or download the source code. ### The Simple Config File The first step is to create a simple config file where we can store a few variables. By placing these in their own file, we can easily make changes to our code without having to edit many lines. •$final_width_of_image - This variable will store the width of our thumbnail.
• $path_to_image_directory - This stores the path to our full sized images folder •$path_to_thumbs_directory - This stores the path to our full thumbnails directory

Save this file as 'config.php' and place it in the root of your folder.

### The HTML

Next, create a new page called "index.php" and paste the following.

First, scroll down a bit to the body tag. To keep things as bare-bones as possible, I've created an extremely simple form. But it will get the job done just fine.

Any time that you're going to be working with the "file upload" input type, you need to add an "enctype" attribute to the form tag.

Rather than posting to a different page, we'll just write the code in our main document. To do that, we'll set the action attribute equal to this page.

Now, scroll back up to the PHP code at the top. We're requiring two files. The first is the config file that we just created. The second one is "functions.php" - which we'll create shortly.

Next, we're checking to see if the page has posted back. If it has, we'll then check to see if the file that the user chose was either a "jpg", "gif", or "png". We can do this by checking the file name against a regular expression.

Moving along, we're creating a few variables.

• $filename - Stores the name of the file that the user has chosen to upload. •$source - When the submit button is clicked, the file will be saved into a temporary directory. This variable will store that path.

### Saving the Thumbnail

The final steps require that we check to see if a "thumbnails" folder exists. If it doesn't, we'll create it by using "mkdir". Then, we'll output our new image to the thumbnails folder.

Finally, we need to echo out the thumbnail to show the user that his image was uploaded successfully.

### Finished

Well done! This screencast was somewhat hastily done - because of time constraints. You might want to clean up the code a bit and a bit more error handling.

If you wish to take things further, see if you can figure out how to crop the images as well! As always, I'm more than open to refinement and suggestions!

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