Update: Responsive width is now a feature in the new versions of CIMY Header Image Rotator. You do no longer need the hack described in this post. Instead see the comment by @rtpHarry on this page for how to set things up!
On this very website, I have rotating imagery in each pages header, and I use the quite sophisticated WordPress plugin Cimy Header Image Rotator 6.1.0 for that. The only thing I missed was having the header image width decrease with the rest of the page's width, when scaling down the window or when seeing the website on low resolution screens. By default, it wants a fixed width and height (in pixels) for the header image container div to be set in the plugin config form – and that will of course mean that the div with image in it will always have that size, if necessary even with a scrollbar, when scaling down the window or watching the page at 1024×768 px resolution.
Here is how I changed that for this website. I use no image fading effects, just wanting a random image for every page that gets loaded. So I do not know if this hack still works if you employ the plugin's effects and other options.
- In the WordPress admin area, go to where you inserted the Cimy Header Image Rotator code into your template – mostly it is about editing your template's header.php via "Appearance -> Editor". There, locate this CSS information:
#cimy_div_id_0 { width: 1170px; }
and instead make it to be:
#cimy_div_id_0 { max-width: 100%; }
The Cimy plugin already sets "overflow:hidden" for this header image container div, but that only has an effect for images larger than its width. We want this width now to depend on the available space, not to be constant. - In the same place as in the last step, I also want to remove excess space over and below the header images by deleting this CSS information, but that's merely a cosmetic issue:
#cimy_div_id_0 { margin: 1em auto; } - In the WordPress admin area, go to "Plugins -> Editor" and edit the file
cimy-header-image-rotator/js/jquery.cross-slide.js. You have to do these changes:- Disable the following lines, as with them the plugin's JavaScript would not create the list of images any more because we eliminated the
width:setting from the image container element:
if (! self.width() || ! self.height())
abort('container element does not have its own width and height'); - Find the section
// find images to animate and set initial css attributesand change it so that the CSS containsposition: 'relative'instead ofabsoluteand also add'max-width': 'none'. Note the use of quotation marks in CSS attributes with a dash! So, it will look like this:
var imgs = self.find('img').css({
position: 'relative',
'max-width': 'none';
visibility: 'hidden',
top: 0,
left: 0,
'z-index': 1,
border: 0
}); - Apply these changes also to
jquery.cross-slide.min.jsbecause only this minified version is in use. You cannot simply delete the minified version because it is referred to in theheadsection. Creating a new minified version with something like minifyjavascript.com should be possible, but at least this particular tool introduced errors for me that prohibited the header image rotation from working. So the simplest working method is to copy the non-minified version over. Via SSH:
cd wp-content/plugins/cimy-header-image-rotator/js;
cp jquery.cross-slide.js jquery.cross-slide.min.js;
- Disable the following lines, as with them the plugin's JavaScript would not create the list of images any more because we eliminated the
- Reload your page and try resizing its width. It should work now: when the header section width becomes narrower than the image width, portions of the image will be clipped from the right. The image will no longer stick out of the header section to the right. Job done 🙂
This hack solution was tested and found working in Firefox 16.0 and Chromium 20.0.
Leave a Reply