WordPress.org

Ready to get started?Download WordPress

Forums

Background Manager
[resolved] Image Squish (9 posts)

  1. Michael
    Member
    Posted 2 years ago #

    Thank you for the great plugin, this is really robust.

    Is there a setting (CSS, JS, or other) that will tell my browser window to cut off the image rather than squishing it? When a browser window goes smaller width-wise the image squishes before it starts to get cut off. This makes the people in the pictures seem very odd.

    Is there a way to override this default behavior?

    Thank you for your time on this plugin, I truly appreciate it.

    http://wordpress.org/extend/plugins/background-manager/

  2. andri86
    Member
    Posted 2 years ago #

    Hi and thanks for this awesome plugin!

    I finally found this plugin before starting to make my own after trying out many others that I did´nt like. This has all the features that I wanted plus more!

    But like Michael, I would like the background image to always stay porportional when I resize my browser similar how the Supersized plugin works for example.

    Hope you can take a look at this feature request.

    Best regards,
    Andri

  3. myatu
    Member
    Plugin Author

    Posted 2 years ago #

    Hi!

    It is controlled by CSS (the exact file is in wp-content/plugins/background-manager/resources/css/pub(.dev).css in case you're interested - if WP_DEBUG is true, it uses the one with "dev" in the filename).

    Currently, the width of the browser window takes precedence and adjusts the image according to it. But to keep the entire screen filled, it also stretches the image height to 100% (otherwise leaving an "empty" bar). This particularly causes that "squishing" on very wide images.

    So if the images are generally wide overall, this can be changed by modifying .myatus_bgm_fs to:

    .myatu_bgm_fs {
        min-width: 100%;
        width: auto;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }

    This would essentially reverse what it does now (and so, narrow images could end up looking "squished" - if images are large enough, you can remove the height: 100% portion) - Hint: use the Custom CSS metabox.

    Obviously this is a temporary fix, as the whole idea is to do no file editing at all ;) I'll look into better ways to keep the aspect ratio correct at all times, whilst ensuring the entire screen remains covered.

  4. myatu
    Member
    Plugin Author

    Posted 2 years ago #

    Version 1.0.24 has been released today.

    This version includes CSS changes, that changes the way full screen backgrounds are displayed and will stop the "squishing" described. This also required some Javascript changes for the transition effects.

    Extremely large images may need to be reduced in size using the current display method, and I will continue to improve upon that.

  5. Michael
    Member
    Posted 2 years ago #

    Myatu,
    Thank you for your work on this plugin and responding to my questions. I've updated to 1.0.25 but my images are still squishing.
    What size do you recommend using for landscape oriented shots?

  6. myatu
    Member
    Plugin Author

    Posted 2 years ago #

    Hi!

    Do you have any examples of the the image squishing (sample image or URL)?

    As for the size, using the common 16:9 wide-screen format, 1920x1080 or less (width in pixels * 9 / 16) will work well for most visitors.

    Mike (Myatu)

  7. Michael
    Member
    Posted 2 years ago #

    Here is a demo site that we are currently building.
    http://ecg-ministry.com/

    Thank you for your time.

  8. myatu
    Member
    Plugin Author

    Posted 2 years ago #

    Thanks! I just had a look and there's a CSS (stylesheet) entry that appears to be changing the intended behavior of the full screen background.

    In the file styles.css for the theme, there's the following entry:

    /* Images
    ------------------------------------------------------------ */
    
    img {
        height: auto;
        max-width: 100%;
    }

    This disallows the background to adjust the width (and causes squishing, as it can only adjust the height).

    What I can suggest is, from within Background Manager, edit the Image Set containing the images and in the Custom Stylesheet box add the following:

    .myatu_bgm_fs {
    max-width: 1280px;
    }

    And then save the Image Set. This should address the squishing you're experiencing - at least minimise it, without having to edit the theme directly. You can adjust the size after "max-width:" (ie., 1024px, 1280px, 1920px) to suit your taste/needs.

  9. Michael
    Member
    Posted 2 years ago #

    BAM! Great catch! Thank you very much

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic