Have a random bio image displayed each time your blog is viewed

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.

19 Responses to “Have a random bio image displayed each time your blog is viewed”

  1. On April 25th, 2008 at 6:21 pm Somfalvi said:

    works perfectly – thank you!

  2. On May 11th, 2008 at 8:05 pm Marie said:

    I inserted the code, ftp’d the images at 72 pixels dpi and I get a box with a red x.
    What did I do wrong?

  3. On May 12th, 2008 at 12:49 am Marie said:

    OK. I got it to work – but I occassionally get the default sihlouette. How do I remove that?

  4. On May 12th, 2008 at 4:48 am Jared said:

    Marie » i checked your blog, and I think you got it fixed. is that right? I couldn’t get the default picture, and I don’t think it’s possible to get the default on yours anymore. Let me know if you’re having any more trouble.

  5. On July 18th, 2008 at 9:22 am Samuel Barr said:

    Hi,

    How do I remove the black border that surrounds my bio pic? Thanks!

  6. On July 18th, 2008 at 11:29 am Jared said:

    @Samuel Barr: in your stylesheet (style.css) look for line 277-ish, which should have this chunk:

    #biopic { /*floats, pads, and borders the biopic*/
    margin: 40px 50px 40px 0;
    float: right;
    border: 1px solid #666666;
    }

    just delete the line that says:

    border: 1px solid #666666;

  7. On August 22nd, 2008 at 2:21 pm Amanda said:

    when trying to update my bio, I don’t have an “update file” button like I should per the video tutorial. what am I doing wrong?

  8. On August 22nd, 2008 at 2:33 pm Amanda said:

    Also, I uploaded my biopic and logo into fetch (my ftp thing) and I guess I’m missing something b/c my logo and biopic aren’t showing up on my blog. Is there something else I’m supposed to do? I emptied my cache.

  9. On August 22nd, 2008 at 6:31 pm Jared said:

    @Amanda: that’s in the FAQ’s. here’s the link:

    http://tinyurl.com/6fpqsa

  10. On August 22nd, 2008 at 6:33 pm Jared said:

    @Amanda: you must have not uploaded it, or not uploaded it into the proper spot. make sure it goes into “public_html/blog/wp-content/themes/prophoto/images”.

    the “public_html” might be different on your webserver, but everything else will be the same.

  11. On September 30th, 2008 at 11:36 am Amanda said:

    Just wondering if it’s possible to have 2 bio images on at the same time? I have a business partner and we would like both our images in the bio area. Is there a way to do this?

    Thanks so much

  12. On October 2nd, 2008 at 11:13 pm Amanda said:

    Maybe I didn’t post this in the right area?? Still wondering on this one!!

  13. On October 3rd, 2008 at 5:27 am Jared said:

    @Amanda: sorry about not responding, i must have just missed it.

    it’s a little tricky to get two pictures in there (well, for you anyway). the easiest way would be to sort of fake it by creating a composite picture in photoshop that looks like two pictures. then you might need to change the dimensions of the image in “bio.php” if you the image is a different size, and possibly the width of the .bio div in the stylesheet to match.

    two have two separate images would involve even more. you could also email Matt at prophotoinstall at gmail dot com and he might be willing to give you a small-ish quote as to what it would cost for him to do it for you.

  14. On October 14th, 2008 at 4:31 pm Amanda said:

    I’ve tried to do what you said in the first paragraph and created an image of both pictures together and i sized it to 430×312px but it won’t show up. I’m not sure what the heck I’m doing wrong. If you could take a peek I’d love it! Thanks :)

  15. On October 15th, 2008 at 6:03 am Jared said:

    @Amanda:
    2 things look wrong.

    1) you’re trying to reference an image in your “prophoto/images” folder called “biopic1.jpg”, but there is no such image there.

    2) the path to the image is getting all screwed up, and i think it might be because of curley quotes. to fix it, try replacing the line in your bio.php that calls the image with exactly this: (copy and paste it)

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

  16. On October 15th, 2008 at 9:17 am Amanda said:

    Love it. K, i got it to show up now but I can’t get it to float right. It keeps going on top of the bio text and I’d like it to be right beside the text. I’ve tried playing around in firebug but can’t seem to get it.

    Thanks for all your help btw :)

  17. On October 16th, 2008 at 5:06 am Jared said:

    @Amanda: for some reason you changed the “id” on the biopic to “biopic1″. change it back to “biopic” in the bio.php file and it will work, so it says:

    id=”biopic”

    NOT:

    id=”biopic1″

  18. On December 19th, 2010 at 8:54 pm Lyn Neuhoff said:

    I carry on listening to the rumor speak about getting free online grant applications so I have been looking around for the top site to get one. Could you advise me please, where could i find some?

  19. On December 20th, 2010 at 4:08 pm Garcelle Beauvais said:

    taken into account do. I think It’s a bit Excellent just what you think

Leave a Reply