(watch this video in a new tab or window)

To work on WebPage12 we'll need to download KirksPictureGrabber which may also be called Kirks_JPGrabber. I downloaded it and unzipped it. Let me explain how it works. KirksPictureGrabber.php randomly grabs an image from LookInThisFolder. First I instantiate a couple variables, which means I set it to nothing or reset it. Use This Picture and Alt Text are instantiated. Files found counter is set to 0. The directory is a new variable and it uses the variable information from Look In This Folder, which is what you passed from your calling program. Lines 7 through 19 loops through the directory looking for the files that we might want to work with. It looks at every file from the directory, gets the full name of each file, and it checks to see if it has 2 parts like file name dot something. If it has 2 parts, it breaks it apart and gets the file name and the extension. If it's not 2 parts, the file extension gets set to Skip This File. Lines 15 through 18 say if the File Extension is a jpg, add 1 to our counter, and add it to an array. Lines 20 through 25 is where we randomly select a picture from the array. Line 22 sets the Alt Text to Use This Picture. Line 23 replaces underscores with spaces from the file name. Line 24 gets rid of the dot JPG at the end of the file.

I'm going to close that program and make a new file on my website called KirksPictureGrabber.php by duplicating another document, I'll use WebPage12.php. I've had issues with people who copy files directly to the server, so here we'll create the file directly on the server and copy the contents into that file.

Let's look at WebPage12. WebPage12 has standard HTML information at the top, plus I have internal styling for my image and styling for the Picture Title. I also have a variable called Look In This Folder and I made a folder called Web Page 12 random images and put my images in that folder. The Kirks Picture Grabber program will only grab JPG files from the folder. Line 24 includes the program that we just added to the site. The name here needs to match the program name. I setup a div with the Picture Title. I'm using the Alt Text for the name (or title) of the image. Next I have an image source to display the randomly selected image with related Alt Text. Let's see it in action.

Every time I reload the page a picture is randomly selected. Just for fun let's echo out (or print to the screen) the Use This Picture and Alt Text variables by uncommenting those lines and reloading the page. This is how I typically do trouble-shooting with PHP.

For fun, let's copy and paste the 4 lines of code a few times and reload the page to see what happens. Now I have 3 pictures that were randomly selected. They could be randomly selected multiple times on the same page. So I showed you how Kirks Picture Grabber works but all you really need are the 4 lines of code with a respective Kirks Picture Grabber program and a folder with JPGs. Let's point it to a different folder for practice. I'll point it to my Web Page 07 underscore images folder and reload the page to see it grab images from that folder. When done, switch it back to the folder of images that you want to use for this assignment.

So I showed you how Kirks Picture Grabber works, but remember all you really need to do is include it and then have code to display the image. Feel free to adjust the styling on the page. I hope that explains how this works pretty well and good luck on your Web Page 12. I look forward to seeing your original pictures.