Hi Tom,

There are several jquery plugins that'll let you swap images dependant the users screen width, one is http://jquerypicture.com which I've used previously although I modified it to do backgrounds (couldn't do them straight in the css as it was a CMS system).

Hope that helps

Alex

Thanks for the tip, will be checked out in the morning.
If other have other options, such with CSS or razor, I'll check out them too.

I avoid using 3rd party supplier. Here is my working solution, located in master.cshtml

<script>

var thumbsize;

if (screen.width <= 375) {

thumbsize = "<img src='@Model.Content.GetCropUrl("imageCropper", "thumbW350H200")'/>";

} else if (screen.width <= 768) {

thumbsize = "<img src='@Model.Content.GetCropUrl("imageCropper", "thumbW768H432")'/>";

} else if (screen.width <= 1024) {

thumbsize = "<img src='@Model.Content.GetCropUrl("imageCropper", "thumbW1024H576")'/>";

} else if (screen.width <= 1366) {

thumbsize = "<img src='@Model.Content.GetCropUrl("imageCropper", "thumbW1366H768")'/>";

} else {

thumbsize = "<img src='@Model.Content.GetCropUrl("imageCropper", "thumbW1920H1080")'/>";

}

document.getElementById("bgThumb").innerHTML = thumbsize;

</script>

And the pictures are received with this simple code in a different template:

<span id="bgThumb" style="100%"></span>

But this does not look pretty, so how can I move codes in the master.cshtml to a .js file, since Razor codes can not be placed directly in the js file?

Hello,

You might want to check out Slimsy. 

There is also a YouTube video: https://www.youtube.com/watch?v=bQsvGmnYaUU.

I did a custom implementation in the Hybrid Framework: https://www.youtube.com/watch?v=Enni9r0whCE

Jeroen

Thanks for the tips. Will take a closer look at them later.

is working on a reply...