Sunday, October 26, 2008

Troubleshooting "Header Image Rotator plugin" for Wordpress!

For a while I was looking at a way to change the photos on my travel experience site with least effort. Not that I finally found a good answer but I did find a WP Plug-In which seemed to be doing the job. This plug-in is called "Header Image Rotator plugin for Wordpress!" and here's the website of the author.

So I quickly downloaded and set it all up but it didn't work. Then I put a post at the forum but unfortunately I didn't hear back. I searched around and I could not find any answer.

At the same time my brother-in-law and myself were thinking about it, not the plug-in but about the fact that we should write the necessary code to change header-photos on its own. So recently both of us sat together and thought that before we write a new piece of code,lets see if we can fix this wp image rotator plug-in. We were doing everything as per manual but somehow it was not working.

Let me give a brief of how this plug-in works.

1. Normally any WP template, worth its salt, would have a style-sheet.
2. Typically they would have a header-image.
3. Header-image will have its own div or its own descriptor in the .css file.
4. Normally, header.php file would be using this div to set the header-image.
5. When we use this plugin we copy certain photos at a location and then tell the plugin the div which the header.php is using.
6. Ideally, the plug-in would replace the div with its own code.

After not making any headway, we though about looking at the executed code which the browser was getting. So we loaded the home page on a browser and did 'View Source'. What we found was that the plug-in was indeed setting the right div to a random image but after that statement, the original template was again setting the same div to what it usually sets, so what was indeed happening was
1. Plugin sets a random image from your collection as header-image
2. Then, the original template sets the default or what-so-ever header-image to that div.

End result is that for a user, the world is all same.

Here's how we fixed it
1. We copied the style-sheet div section of the header-image in the .css file and created another one with a different name. In my case the header-image css was . I created another called .
2. In plug-in settings, I mentioned as my css id for header-image.
3. In header-php, we used instead of

And Voila it worked.

If you are having some problems here, you can try your luck by doing above.

5 comments:

DanielPC said...

Hello
Im having the same problem.
I dont understand your solution. Can you post your new file?
thanks
Daniel

Nandan Jha said...

Well, there is no new file. Just some changes in the existing files and those files differ from template to template. Let me try to summarize the solution.

1. Find out the div which your header-image corresponds to. This div would be there in header.php for most of the templates.

2. Find that div in your stylesheet.css file, there's usually only one .css file.

Are you able to follow above ? If you are using a free WP template then probably I can download that and take a look. Whats your website ?

Danielpc said...

Hi
now I understand your technique.
I have fix my site and it's working now.

Thanks

Nandan Jha said...

Cool. Glad that it worked for you.

Anonymous said...

what good is a so called free plugin if it don't work, and the jokers want your money too for the pro version i think that they are a bunch of cheaters.
no respons on the forum.
i say to all people don't buy this at all.
f*ck rotating-images-basic