How to dynamically create image thumbnails using CSS clip property with PHP glob() function

 

 

Hello and Thank you for visiting designtopx.wordpress.com.

Please note: The new home for this post is can be found here –

---

---

 

In this tutorial, I will share with you an example of how you can use PHP to dynamically create and display images in a folder, all with very few lines of code, by utilizing PHP’s glob() function and the CSS clip property.

View live demo here: Link

Step 1:
Make sure your images are saved in a separate folder. I recommend you call the folder images

Step 2:
Place all the images you will want to access for your website into the images folder. Make sure that this folder contains only the images you want to include on your webpage and no other images or file types.

Step 3:
Rename all the images in the folder so that the first part of each image is exactly the same. e.g. article001_fooimage.png, article001_barimage.jpg, etc. Since you are going to call for these later i would suggest you name the images in a way that you will easily remember (like sequentially based on when they are needed in a top 10 style post)

Step 4:
Here is the php script that you can add to any page that will need to access the images. If you prefer, you can save this php script as a separate file then use php include() to bring it in

1. <?php
2. $filename = glob(‘images/*.*’);
3. function imagizer($filename)
4. {
5. return “<div style=’position:relative; height:265px;’><div style=’position:absolute; clip:rect(0px 256px 256px 0px);’><img src=’$filename‘ alt=’image’ /></div></div>”;
7. }
9. $images = array_map(“imagizer”, $filename);
10. $article001 = array_values(preg_grep(“/article001/”, $images));
12. ?>

The function imagizer will return an array of processed images based on your specifications. I have chosen to do a 256×256 pixel clip starting at the upper left hand corner of the image. The entire image is still present though, it is only clipped to the visitors view. If the visitor downloads the image, it will be the entire sized file and not the clip. The first div that is created in the function is the container. I made it 9 pixels taller than the clipped image container to add a little padding to the bottom of each generated image.

To call an image, simply use $article001[0] for the first image in the folder, $article001[1] for the second image, etc.

You can also do a for loop to print each image in a row. This could be useful if you needed to add a bunch of images in a wysiwg html editor online and you didn’t have access to php. You would just generate the code for all the images your the folder by running the php script like such:

1. <?php
2. $max=count($article001);
3. for ($i=0;$i<$max;$i++)
4. {
5. echo $article001[$i];
6. }
7. ?>

on your test environment, then go to the generated html page and copy and paste the html into your wysiwg editor.

Please feel free to leave any comments if you have any questions or suggestions about the code or use.

---

About the Author

Kalim Fleet is a professional web designer and blogger with over 6 years experience. The web is his passion as he splits his time between blog writing, software development and social media. He loves using and developing new applications for the web, mobile, and desktop.