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.

  1. 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.
  2. 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; }
  3. 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:
    1. 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');
    2. Find the section // find images to animate and set initial css attributes and change it so that the CSS contains position: 'relative' instead of absolute and 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
      });
    3. Apply these changes also to jquery.cross-slide.min.js because only this minified version is in use. You cannot simply delete the minified version because it is referred to in the head section. 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;
  4. 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.

9 thoughts on “How to achieve flexible width images with Cimy Header Image Rotator?

  1. Hi!

    I’m trying to use the following code generated by the Cimy Header Image Rotator plugin on Twenty Eleven theme. But on top of the header images I will be using a logo on the left (the site is under construction). When I use the code, the logo is overwritten and is placed in the background… Do you happen to know how I could have the logo in the foreground even if I use the code?

    Thank you and Merry Christmas!
    /Stefan

    Läser in bilder….

    #cimy_div_id_0 {
      float: left;
      margin: 1em auto;
      border: 1px solid #000000;
      width: 1000px;
      height: 288px;
    }
    div.cimy_div_id_0_caption {
      position: absolute;
      margin-top: 175px;
      margin-left: -75px;
      width: 150px;
      text-align: center;
      left: 50%;
      padding: 5px 10px;
      background: black;
      color: white;
      font-family: sans-serif;
      border-radius: 10px;
      display: none;
      z-index: 2;
    }

     

  2. I guess it's the z-index: 2; part of your CSS code that brings the stuff before your logo. Either remove that or use a higher z-index on your logo … together with positioning your logo as absolute, relative or fixed. See a good CSS documentation for details. (Sorry if this is telling you the obvious and you already tried this … . And, Merry Christmas to you too!)

  3. Hi, I did it all the way like you explained it here, and it works fine (I think). I did this for this website http://www.van-gogh.be/ , and I use the fading effects, and it seems to work.
    Only thing that doenst work is that when I resize my screen the cimy header image rotator disappears, but comes back if you go to other page on website, or if you refresh…

    Thanks for this info!

    Steven

  4. hmmm I have to reconsider my answer… strangely enough it works on chrome, but not on other browsers :'( . they don’t show the image rotator anymore… any idea?

  5. I’m beginner here, can you explain the last part please?

    “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;”

    what is SSH?? what should I do here?

  6. Steven, about the part of copying the non-minified version over: You have to overwrite file wp-content/plugins/cimy-header-image-rotator/js/jquery.cross-slide.js with file wp-content/plugins/cimy-header-image-rotator/js/jquery.cross-slide.min.js. It does not matter how you do this. As a beginner, you probably use FTP for file manipulation, so just use that. I use SSH for that (which is a command-line interface to your server), but as I said, there are other options.

  7. As for your other concerns: I mentioned this hack to the author of Cimy Header Image Rotator in this thread, and according to the author’s tests there, it did not work with fading effects. Additionally, some version came out after plugin version 6.1.0, with the effect that my instructions do no longer work for current Chrome (which won’t show the header image, even without fading effects). So I guess some more CSS hacking has to be done to get this to work (again). Which means, I’m sorry to tell, but I don’t know the solution.

  8. I just posted the below onto the official FAQ page but I’m cross-posting it here because its still in the moderation queue at the moment and also, with 750+ comments over 11 pages and no search it could easily be lost in the shuffle for future googlers:

    HOW TO MAKE THIS PLUGIN RESPONSIVE
    I almost started hacking the code up on this because I missed it and searching this page for “responsive” didn’t get me to the right comment (there is one in here but it just calls it auto resize.

    1/ Goto the admin panel of the plugin (Settings – CIMY Header Image Rotator) and tick “Adapt the container’s size to the window’s size (Requires browser page refresh)”
    2/ Copy the snippet over (again if you already have it in your theme – its changed)
    3/ In my case I had to add a z-index: 1 to the main div and I removed the 1em top bottom margin

    After that it will work sort of, you can resize the browser and the images will scale but the container box stays the same size which can cause display issues. If you refresh the page then it will correctly size to its new height. This is a limitation of the underlying cross-slide plugin which has been discontinued so I don’t see this being improved on until the author of CIMY upgrades the plugin to work with a modern slideshow script 🙂

    This was good enough for my project anyway…

  9. @rtpHarry, thank you for posting this! I finally updated my template to use this solution as well. No worrying about breaking things with updates anymore 🙂 I updated the post above to point to your solution.

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>