Support » Plugin: Cimy Header Image Rotator » [Plugin: Cimy Header Image Rotator] Resizable images in Cimy rotator?

  • Resolved mcstevem

    (@mcstevem)


    Love the Cimy Header Image Rotator (as well as other excellent Cimy plugins — User Manager and Extra Fields). I’m incorporating the image rotator into highereds.org, built on a Twenty Eleven child theme, and would like to retain Twenty Eleven’s fluid page width and header image resizing. By changing the width of #cimy_div_id_0 to auto, it sorta works, but only for width. I can’t set height to auto or else the div shrinks down to nothing, because until the jQuery runs there is no content and hence no height. Is there a way to pick up the dynamic height of the image as the page rescales, and feed that into the div height?

    http://wordpress.org/extend/plugins/cimy-header-image-rotator/

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Marco Cimmino

    (@cimmo)

    Maybe you can preload an empty image but with correct width and height into the div that will be automatically overwritten after 1st image loaded?

    I tried that, both with a placeholder image and with a transparent PNG, both specifying the image height/width and leaving it out. The best I could do was a brief flash of the placeholder before the JS kicked in and set the div’s auto height down to 0. So I’m specifying a fixed height for that div, leaving it to resize the image but not the height of its container. Not ideal, but it will have to do, unless there’s a better way around this.

    Plugin Author Marco Cimmino

    (@cimmo)

    I checked your page and looks great to me.
    So I don’t understand what’s wrong actually:

    1. images aren’t all of the same size and you want that Rotator doesn’t shrink? But doesn’t seems the case to me.

    2. you want to use different width and height than images’ ones? But then why not crop or resize them?

    So I am not getting the point here.

    All the header images are the same size (1000×288), and they do resize as the page width shrinks. What doesn’t change is the depth of the div that contains the image. As a result, for small devices or narrow browser windows, there is an increasingly large white gap above the image (below the title/search box). On its own, without the Rotator, the Twenty Eleven theme doesn’t have this problem because it doesn’t place the image in a div, and so when it dynamically resizes, the space used by the image shrinks both vertically and horizontally, and the page content below the image moves up automatically to keep the page properly spaced.

    Plugin Author Marco Cimmino

    (@cimmo)

    Problem is NOT in my plug-in but in your style.css:
    #branding img {
    height: auto;
    margin-bottom: -7px;
    width: 100%;
    }

    remove ‘width: 100%’ and will fix the issue.

    Two things:
    1. always use Firebug to debug your website
    2. a donation is welcome since I helped you.

    Taking out the ‘width:100%’ stops the image from resizing at all. So I don’t have the white gap, but that’s because increasingly large sections of the now-fixed-size image aren’t displayed as the browser window shrinks.

    I definitely appreciate the help, and I don’t find any fault with your plug-in — it works great, and I’m very happy to have it available, as it adds great functionality to this shared organization site. I’m just trying to find a way to extend it to do something I’m sure it wasn’t originally designed to handle.

    Plugin Author Marco Cimmino

    (@cimmo)

    What about this?
    #branding img {
    height: 100%;
    margin-bottom: -7px;
    width: 100%;
    }

    Yes I know it doesn’t retain the proportions.

    Honestly you are developing your website with giant images and believe that this can work everywhere.
    Truth is websites should have a mobile version and cannot expect that 1000×288 images work great on mobiles, think also how many KB you are forcing people to download with a mobile, if they have a data plan where they pay per KB?

    So those are problems in your website, not in my plug-in. Still a donation is welcome but of course not mandatory.

    Plugin Author Marco Cimmino

    (@cimmo)

    Or sure I can also try to fix the plug-in, but this takes time.

    Help….
    where does the code go would go in the style.css file?

    how will it now to replace the header…. or is this just for a page where you want pictures to change?

    PS my website is about a trattoria in BOLOGNA.
    http://www.bolognaitalyrestaurants.com

    dOES THE rotating image ONLY go on the main page? if not how would you put it on a specific page?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘[Plugin: Cimy Header Image Rotator] Resizable images in Cimy rotator?’ is closed to new replies.