slimsy issue when browser is resized 200 beta3 - Slimsy Feedback

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

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

Slimsy issue when browser is resized (2.0.0-beta3)

Slimsy Feedback

Umbraco 7

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.

Copy Link

JamesW 18 posts 128 karma points

Mar 14, 2018 @ 11:53

0

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

Copy Link
Will Phillips 8 posts 145 karma points c-trib

Mar 14, 2018 @ 12:23

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 :-)

Copy Link
JamesW 18 posts 128 karma points

Mar 14, 2018 @ 12:35

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.

Copy Link
Kevin Jump 2310 posts 14695 karma points MVP 7x c-trib

Mar 14, 2018 @ 13:32

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

Copy Link
JamesW 18 posts 128 karma points

Mar 14, 2018 @ 13:34

0

Hi Kevin

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

Copy Link
Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Mar 14, 2018 @ 14:20

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

Copy Link
JamesW 18 posts 128 karma points

Mar 14, 2018 @ 14:36

0

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

Thanks Jeavon.

Copy Link
is working on a reply...

Please Sign in or register to post replies