Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • JamesW 18 posts 128 karma points
    Mar 14, 2018 @ 10:25
    JamesW
    0

    Slimsy issue when browser is resized (2.0.0-beta3)

    Hi

    I have an issue with Slimsy that when the page loads it will display the correct image/crop.

    But if I resize the browser it will only change the image if I make the browser larger.

    If start with the browser at a mobile breakpoint the image will change correctly up to large desktop size, but if I then make the browser smaller again it won't change the image back to the smaller sizes.

    So the image will only resize upwards and never down, but loads the correct image initially no matter what size the browser.

    I have seen this answered question but the solution wasn't applicable to my problem: https://our.umbraco.org/projects/website-utilities/slimsy/slimsy-feedback/89147-slimsy-issue-when-browser-is-made-smaller-then-bigger

    I've stripped the page right down and tested again but still the same issue, is there something i'm missing?

    CREATE IMAGE SIZES

    @{
        string Images = "";
        var imagecrop = Model.Content.FeatureImage.Crops;
    }
    
    
    @foreach (var image in imagecrop)
    {
        Images += Model.Content.FeatureImage.Src + Model.Content.FeatureImage.GetCropUrl(image.Alias) + " " + image.Width + "w, ";
    }
    <img data-srcset="@Images" sizes="auto" data-sizes="auto" class="lazyload" style="width:100%;" />
    

    HTML PRODUCED

        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title> - My ASP.NET Application</title>
    
            <style type="text/css">
                img { display: block }
            </style>
        </head>
        <body>      
    
        <script src="/scripts/jquery-3.0.0.min.js"></script>
        <script src="/scripts/jquery-ui-1.12.1.min.js"></script>
        <script src="/scripts/picturefill.min.js"></script>
        <script src="/scripts/lazysizes.min.js" async=""></script>
    
        <img data-srcset="/media/1022/shutterstock_521972305.jpg?anchor=center&amp;mode=crop&amp;width=1500&amp;height=550 1500w,
    /media/1022/shutterstock_521972305.jpg?anchor=center&amp;mode=crop&amp;width=1000&amp;height=500 1000w,
    /media/1022/shutterstock_521972305.jpg?anchor=center&amp;mode=crop&amp;width=600&amp;height=600 600w, 
    " sizes="auto" data-sizes="auto" class="lazyload" style="width:100%;" />
        </body>
        </html>
    

    Thanks for any help.

  • JamesW 18 posts 128 karma points
    Mar 14, 2018 @ 11:53
    JamesW
    0

    Just noticed that the issue is with Chrome & IE, but works as expected in FF.

  • Will Phillips 8 posts 135 karma points c-trib
    Mar 14, 2018 @ 12:23
    Will Phillips
    3

    Hi James,

    Thank you for your feedback and for using Slimsy, just to let you know that this would be the expected behaviour as once it has loaded a large image if the browser shrinks in size it won't update the image for a smaller one as this would add an unnecessary request to the server for a new image when it can just resize the already loaded image.

    The loading of a new, larger image is however needed when going from mobile -> desktop and the quality of the image loaded for a mobile view wouldn't be sufficient enough for a desktop view.

    I hope this answers your question, any others don't hesitate to ask :-)

  • JamesW 18 posts 128 karma points
    Mar 14, 2018 @ 12:35
    JamesW
    0

    Hi Will

    Thanks for your reply, sorry just a couple more questions.

    I've noticed that it works the way I want it to in FF though. Is it possible to change the behaviour to work so it loads images when the browser is made smaller as well as larger?

    The reason I require it to work like this is because I the mobile/tablet crops are taller than the desktop crops, so if it doesn't load the smaller image it doesn't look or position correctly. Am I even going about this the correct way to load different crop sizes? As i would have thought this was quite a common requirement.

    Thanks James.

  • Kevin Jump 1780 posts 11431 karma points MVP 4x c-trib
    Mar 14, 2018 @ 13:32
    Kevin Jump
    2

    Hi James,

    as Will says that is sort of the expected behavior because the browser gets to choose what images is shown where when you using the srcset values in an image.

    if you want more control you should look at switching over to the picture element which gives more control over what image is loaded based on browser size (there is still some client discretion stuff going on in the src-set element, but you can control what appears where)

    there is quite a good MDN Article on this here : https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimediaandembedding/Responsive_images

  • JamesW 18 posts 128 karma points
    Mar 14, 2018 @ 13:34
    JamesW
    0

    Hi Kevin

    Great thanks for the tip, i'll have a look in to using the picture element.

  • Jeavon Leopold 3005 posts 13196 karma points MVP 7x admin c-trib
    Mar 14, 2018 @ 14:20
    Jeavon Leopold
    100

    Hi James,

    As Kevin as mentioned above it sounds like you are looking for a approach called <picture> "art direction".

    However "art direction" is currently beyond the scope of Slimsy although it's something we have been considering adding in a basic form in the future.

    Jeavon

  • JamesW 18 posts 128 karma points
    Mar 14, 2018 @ 14:36
    JamesW
    0

    That looks exactly like what i'm after, i'll implement it in to my test.

    Thanks Jeavon.

Please Sign in or register to post replies

Write your reply to:

Draft