WordPress.org

Ready to get started?Download WordPress

Forums

Cimy Header Image Rotator
[resolved] Resizable images in Cimy rotator? (11 posts)

  1. mcstevem
    Member
    Posted 2 years ago #

    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/

  2. Marco Cimmino
    Member
    Plugin Author

    Posted 2 years ago #

    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?

  3. mcstevem
    Member
    Posted 2 years ago #

    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.

  4. Marco Cimmino
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  5. mcstevem
    Member
    Posted 2 years ago #

    All the header images are the same size (1000x288), 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.

  6. Marco Cimmino
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  7. mcstevem
    Member
    Posted 2 years ago #

    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.

  8. Marco Cimmino
    Member
    Plugin Author

    Posted 2 years ago #

    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 1000x288 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.

  9. Marco Cimmino
    Member
    Plugin Author

    Posted 2 years ago #

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

  10. marvalpert1
    Member
    Posted 2 years ago #

    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

  11. marvalpert1
    Member
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic