ProPhoto - Premium Wordpress Theme for Professional Photographers - Single Column, big pictures - Blog Template

One cool feature on some blogs is having a random bio picture display each time you refresh or load your blogs home page. Examples are: my wife’s blog, and spencer’s blog. (I coded my wife’s, but Spencer did his own.) Refresh the pages to see the new bio pictures load. In the past I’ve always accomplished this using a bit of moderately complex (to a non-developer) external javascript.

Yesterday I was working on coding something like this up again and thought of a way that was much simpler than writing some javascript, so simple in fact that I figured with a short tutorial, any of you could pull it off yourselves. So here goes.

First, in your WP Admin area, go to “Design” (”Presentation” in old WP versions) –> “Theme Editor” and select the file called “bio.php”.

Then, on the the line that says:

<img src="<?php bloginfo('template_directory') ?>/images/biopic.jpg" width="215" height="312" id="biopic" />

Insert your curser right between “biopic” and “.jpg” and add in this text:

<?php echo(rand(1,5)); ?>

So that the line now looks exactly like this:

<img src="<?php bloginfo('template_directory') ?>/images/biopic<?php echo(rand(1,5)); ?>.jpg" width="215" height="312" id="biopic" />

Then, all you need to do is use a file manager or FTP program to upload 5 bio pictures with the exact same dimensions (312px tall by 215px wide) into your “prophoto/images” folder. The path to that folder is this: yourblogdirectory/wp-content/themes/prophoto/images.

Name them (THIS IS IMPORTANT!) exactly biopic1.jpg, biopic2.jpg, biopic3.jpg, biopic4.jpg, and biopic5.jpg. You probably already had an image uploaded called “biopic.jpg”. This image will no longer be used if you are randomizing them according to these instructions. To continue to use that image as one of your random images, you’ll need to rename it biopic1.jpg or one of the other numbered names.

If you want more or less than 5 images, you can upload more or less, but start with “biopic1.jpg” and move up sequentially from there. If you are using a number of images other than 5, then you will also need to edit the second number of the code you inserted earlier so that it says

<?php echo(rand(1,7)); ?>

…if you want 7 images, or the second number can be whatever number you want.

A little fuzzy on how to upload images into the right folder using a file manager or FTP program? Check out:

Tutorial on using a File Manager Utility

Tutorial on using an FTP program

If you’re having any trouble getting this to work, put your question in the comments instead of emailing for support. Hope this was helpful!

This entry was posted on Thursday, April 24th, 2008 and is filed under Pimp my Blog. You can leave a response, or trackback from your own site.