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.
Before Image
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
PHP CODE
- $filename = glob("images/*.*");
- function imagizer($filename)
- {
- return " style=\"position:relative; height:265px;\" style=\"position:absolute; clip:rect(0px 256px 256px 0px);\" src=\"$filename\" alt=\"image\" ";
- }
- $images = array_map("imagizer", $filename);
- $article001 = array_values(preg_grep("/article001/", $images));
The function imagizer will return an array of processed images based on your specifications. I have chosen to do a 256x256 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:
PHP Code
- $max=count($article001);
- for ($i=0;$i<$max;$i++)
- {
- echo $article001[$i];
- }
on your test environment, then go to the generated html page and copy and paste the html into your wysiwg editor.
How have you used PHP to optimize your web design workflow?
Twitter Reactions:
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.
Before Image
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
PHP CODE
- $filename = glob("images/*.*");
- function imagizer($filename)
- {
- return " style=\"position:relative; height:265px;\" style=\"position:absolute; clip:rect(0px 256px 256px 0px);\" src=\"$filename\" alt=\"image\" ";
- }
- $images = array_map("imagizer", $filename);
- $article001 = array_values(preg_grep("/article001/", $images));
The function imagizer will return an array of processed images based on your specifications. I have chosen to do a 256x256 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:
PHP Code
- $max=count($article001);
- for ($i=0;$i<$max;$i++)
- {
- echo $article001[$i];
- }
on your test environment, then go to the generated html page and copy and paste the html into your wysiwg editor.
How have you used PHP to optimize your web design workflow?
11/22/2009, 10:00pm
Reader