Tag Archives: automate

I came up with an idea for a client where instead of just pulling in the newest image in a file my code would pull in a random image from a folder. This serves two purposes:
1) Gives visitors the feeling of a page that gets updated and gives them something different to look at when they visit the website again.
2) It also changes the code which shows the page as being updated to spiders and other search engine bots. (To what degree this will help your SEO remains to be seen but likely on par with doing minor updates to your website)

Now how to get this done? Well I looked around and there were a lot of different ways to code it some from using things as simple as echoing an image name with a random number genrator attached to the end of the file name before the extension for example:

To things that would be much more in depth and involved 20+ lines of code. The problem with all the code I found is that they were limited by having to define the file type and/or manually define how many images were in the folder.

Now here’s what I came up with for my random image generator:

That’s all the code I needed… 6 lines of code. This code scans a directory, generates a random number with a maximum set by the amount of files in directory. Then it prints out an image within the defined directory. This allows you to add as many or as few images to the folder as you want without ever changing the code.

Lets break it down:

This first section is doing 2 things:
1) Defines the directory for the images.
2) Creates an array of the defined directory.

Now that we have the files defined in an array lets create a random number generator:

This line of code is doing 3 things:
1) The obvious part is it generates a random number with rand.
2) We’re restricting it to start at 2 because 0 and 1 are always the directories (0 = ‘.’ and 1 = ‘..’)
3) We’re restricting the maximum number to the number of the array and subtract 1 from that to account for the fact that the array itself starts at 0, while the code”sizeof()” starts counting with 1 instead of 0.

The last part of the code is what will actually be visible in the HTML/XHTML:

This is spitting out the file name that was randomly picked from the array using the random number we generated.

Update: You could even make the alt tag spit out the name of the file by changing the last line to this:

This is simply replacing the possible file extensions with nothing so that the alt tag will say “filename” instead of “filename.jpg”.

---

This tutorial will go over how to pull any image, or file from within a folder in the same directory as the code. Here is all you need to generate a tile for each image as well as load each image.

Something to note, as this is being done with XHTML lines of code generated by PHP they are SEO friendly.

Now lets take a look at the code a little more closely:

This is what scans the directory defined as $dir_handle with “scandir”. It then compares the array created with files from $dir_handle to the “array(‘.’, ‘..’)” which means anything you include into that array will be excluded from the final list of files, for example if you wanted to exclude “image03.jpg” you’d add that to the list. Now the last thing it does is go through the array you’ve created by scanning the directory and filtered with “array_dif” will execute anything you put inside of the “{” and “}” for each file in the directory.

Now lets take a look at the echo lines I used:

These are 2 lines of code with a lot happening. First it creates an H2 title by getting the file name and Changing it to whatever you want it to say (for example image to Photo). Then it replaces the file extension with a space, again to further clean up the look of the title.

The second line of code is doing a bit more, it generates an XHTML image tag which has a class to help formatting with CSS later. It also cleans up the alt and title tags in a similar fashion as the H2 tile is cleaned up. It also tells the image tag where the source image file is located.

That’s all there is to it, this code will pull in any images inside of the images/gallery/ directory and load them on the page. This can be helpful for a few reasons such as being able to load all images from a folder with a few lines of code. Thus automating the process instead of creating individual image tags for each image in the folder. Another good reason is if you decide to add more images into the folder they will automatically be called in through the code and you won’t need to change anything.

---