Rotating images in a WordPress Text Widget

      10 Comments on Rotating images in a WordPress Text Widget

We’re using several text widgets with our WordPress/SPT portal, primarily to enable us to offer search boxes for our catalog, e-journal holdings, sites like Science.gov, and so on.

I was also using a text widget to place a graphic on the sidebar—to help break up the otherwise text-heavy page. Simple enough, I just put an <img> tag as the only text in the widget and the image displayed.

After staring at that image for a few hours yesterday I was getting tired of it. So today I asked Muzammil (the GRA working with us) to see if he could figure out a way to get a randomizing effect going with the image-in-a-text-widget idea.

I suspected we’d end up building some sort of database-driven thing to randomly sequence a number of different images or find an appropriate WP plugin but as I was explaining what I knew about the widget architecture in WordPress, he started nodding his head and dashed back to his laptop.

Minutes later he returned with this simple solution:

<form>
<span id="span0" style="display:none">
<img src="http://deskbox.gmu.edu/image4.jpg"></span>
<span id="span1" style="display:none">
<img src="http://deskbox.gmu.edu/image1.jpg"></span>
<span id="span2" style="display:none">
<img src="http://deskbox.gmu.edu/image2.jpg"></span>
<span id="span3" style="display:none">
<img src="http://deskbox.gmu.edu/image3.jpg"></span>
<script>
var randomnumber=Math.floor(Math.random()*4);
document.getElementById('span'+randomnumber).style.display = "block";
</script>
</form>

If you want to rotate through more than 4 images, just increase the relevant values in the code. Also, you’ll want to make sure you have appropriately sized images at the URLs you use in the widget. Beyond that, it’s simplicity itself…a simple hack that works.

You can see the result on the home page of our test portal.

10 thoughts on “Rotating images in a WordPress Text Widget

  1. Carla

    That is a clever solution. However, I suggest you try out Photo Matt’s trick. All you need is a folder with all your photos and a php file. Then you use a single IMG tag. I have been searching for a way to do this for a couple of days and this worked perfectly for me.

    http://photomatt.net/scripts/randomimage/

    I was even able to create three side-by-side instances with this by just having three copies of the php file with different names in my folder.

    Random pictures sure make a webpage more pleasant to look at! 🙂

  2. Bekah

    Wonderful! Thank you for sharing this. I have had problems with the one suggested above, and when you run WordPress on your own host, you have to set up another folder. It’s easier to be able to upload the photo through wordpress and then enter it’s url the way you have.

    I have one question, though. Is there a way to make this non-random? Where it will just cycle through images in order? With a small selection of images I get a lot of repeats, sometimes for more than three clicks in a row.

  3. Patty

    Nice. I had been looking for a way to display random images like this. I know about enough WordPress to be able to get myself out of some situations I didn’t even fathom I could get myself into. Fun stuff! But you made this easy as could be. Thank you!

  4. June

    Thank you so much for sharing this – now I look like a pro as I have featured volunteers photos in the sidebar of the site. I’ve gotten good feedback – the parents like seeing their photos, etc.

  5. Wally Post author

    Glad I could help. It is kinda cool when you first get this going, isn’t it? I still use this code in quite a few projects…still works fine.

  6. quyen

    this is so great! i spent hours trying to get a javascript to work in my blog to no success and this worked perfectly!! thank you!!

  7. Anne P

    Thank you!!! I just did this and it worked perfectly. So much easier than any of the other sites I found since I can just insert it straight into the WordPress text widget, add in my image urls, and be done!

  8. Mark

    I want to thank you so much for this. I’ve been looking for something easy for quite a while, and I really didn’t want to add yet another plugin.

    I’m using it to rotate advertisements to our store, so I’ve wrapped each img statement in a href.

    You can see it at my site by clicking on my name I guess.

    Question: We get thousands to tens of thousands of pages views a day. 1) How does this affect performance in any way. and 2) how does this affect WP Super Cache?

  9. Brian

    Thanks a lot for this post. Most other sites are way too complicated…

    This post is quite old. So do you know whether there is some sort of plugin that would do the same?

    I already had a look at the plugins on wordpress.org and the ones on http://best-plugins-for-wordpress.com – but to no avail.

    Not a big programmer myself…

    Thanks for your help

    Greetings from Deutschland

    Brian

Comments are closed.