Rotating Header Images

Keeping things fresh, adding new content and providing a little eye candy in the process makes coming to your blog an interesting experience.

poppy header image

I installed the header-rotator plugin this week and after a little tweaking found I’m really enjoying the fresh look it is providing for our Tucson Real Estate in the News blog. I’ve got a dozen images which will change every minute. You won’t see the change unless you refresh or move to a new post or page. If you want to see them stick around for a dozen minutes and hit the F5 key a dozen times.

There is an admin panel where you can set the frequency of change from one minute to once a week.

One caveat, you will need to create a directory named header-images in the wp-content directory and place your header images inside this directory.

prickly pear header

The images are easy to add and remove by simply adding them to a directory. Once there they are in the “loop”. Delete or remove from the directory . . . you get the idea.

Setting it up isn’t hard if your header is called #header in your CSS file. If it isn’t you will have to make a change to the plugin code for it to work. However, this isn’t as hard as it might seem. The plugin author has one of the best trouble shooting posts for a plugin I’ve ever seen. Without it I wouldn’t have gotten this plugin to work. Following his instructions it was as easy as one, two, three. But don’t forget four, and five; they are critical steps.

If it doesn’t work right from the start, read the trouble shooting post and follow every instruction precisely.

brittle bush header

With a little more creativity you could use this to change backgrounds for sidebars and footers as well as headers. There are probably already plugins for doing that, no sense in using this one unless you like the challenge of using a knife for a screwdriver.

Choose Background Images that Compliment

Note where your title appears in the header and the color of the font. I chose images that wouldn’t compliment the title and search box. I changed the Title color from black to white before choosing my background images. If you have a background image specified in your CSS you can comment it out with

<! dash dash before the background code and dash dash> after it.

If you have some time on your hands or just want to visually spice up your blog header a bit then get the header-rotator plugin. I think you will at least have some fun.

For me the most fun is creating header images from some of the many wildflower images I took this spring.

sobrero peak header

Comments

  1. Nifty find, Dave. I’ve already shot an email off to Eric Blackwell and a couple others that I know that have been looking for an ability to rotate their header photos.

    Not quite my thing personally, as I LIKE the familiarity of a static image. Call me boring, but at least I’m consistent. 😛

  2. Dave-
    I know you wrote about this before, but it never affected me. I always have a picture my posts, but till now, I take the 1280X1024 photo and uploaded then use WP to reduce it to around 250px. Someone said I should upload 2 copies, one small one (250px) and then the larger one for when people click on them.

    I find this is a hassle using the editor to upload 2 photos and trying to remember what each is named. I am not motivated enough to open my FTP and send them to the site.

    Thoughts?

  3. Scott,

    Get motivated : )

    I only FTP images. I never use the editor to upload. I have an image directory and put all images in that directory.

    I resize all images to 1024 wide if I’m going to display them as large using lightbox. Otherwise I size them to fit the post usually around 350 px.

    If you upload all large images and display them as small you are slowing your site down considerably. The entire large image has to be loaded then resized on the fly. This is why I only upload the size I want to display if it isn’t going to be enlarged.

    If I want a large copy to show using lightbox I load it into my photo editor resize it to 1024 wide. Use a keyword description in the title and save it. Now I resize it again for display in the post and save it again with sm at the end of the name.

    Ex. cactus.jpg cactussm.jpg. I have a code snippet saved in google notebook that I copy into the html window of the post then I copy the first file name and paste it into the snippet, in this example it would be cactus all the rest is already in the notebook snippet.

    That’s my process, it only takes a minute to add in my images.

    I process all the images for the post at the same time and save them in a special image directory. My FTP program is always set to default to that directory for uploads.

    I get google traffic from all the images as well as the posts. Both the large and small images get indexed. That is why you want keywords in the file name as well as the description. DSC_1003 doesn’t get searched very often.

  4. I know, I know. I need to do the extra step! I am just lazy.

    Are you using any plugs-ins to manage images? At WP.org there are about 150 different ones.

  5. Scott,

    No plugins, I’ve outlined my system above. That’s how I do on all my blogs. (5) of them at the moment.

  6. Sir Dave is there a chance that in rotating you get the same image?

  7. Searching some to replace my flash blog header by the validation issues of my site with flash, have found this useful post for me. Now my blog see very nice and this headers give that a fresh look. Thanks for useful post and keep up good work.

  8. Originally Posted By Adier
    Sir Dave is there a chance that in rotating you get the same image?

    Adier, Yes, you get the same image when it rotates back to that location in the list. These header images are not random, they appear in order of the list of images, if you have 10 images in the folder and set the plugin to rotate every minute it will take 11 minutes to rotate back to the first images. If you set it to rotate every day, it will take 10 days.

    If you put 25 or 30 images in your header it will go through the entire list before coming back to the top. I think I now have about 15 images in rotation and when I find a new one that will make a good header image I add it to the rotation. I’ve already removed some images from the rotation order. It keep things fresh and and provides a new look, for me minute by minute. I chose the images carefully to complement the Blog Title location and color and the search box on the opposite side of the header. It is all html and seems to function quite well. I’m pleased with it on the Tucson News Blog.

  9. @Tomelloso
    I’m glad it is working for you. I’m very happy with the way it has performed this past week on my site. Glad you stopped by the Lab. Hope you will find more useful information in the future.

Trackbacks

  1. […] modified a blog theme which lead to this series of posts. One of the things I did was add the Rotating Header Image Plug-in. I have a directory of images which are sized to the header space provided and the plug-in allows […]