Are unsure whether this is the right topic, but need a method, preferably CSS, but also razor or jQuery if no other options exist. The website is built on Umbraco 7.2.2 and Bootstrap 3.3.2 (and MS SQL Express 2014).
When I upload an image to a page, it creates several crop sizes for the picture. This I got to work with: <img src='@Model.Content.GetCropUrl("imageCropper", "thumbW1920H1080")' />
But what if I want to replace thumbnail "thumbW1920H1080" with smaller images to smaller screens, Tablet and Mobile for effective downloading?
Someone who has a simple and straightforward method?
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).
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?
ImageCropper with responsive design (Bootstrap 3)
Are unsure whether this is the right topic, but need a method, preferably CSS, but also razor or jQuery if no other options exist. The website is built on Umbraco 7.2.2 and Bootstrap 3.3.2 (and MS SQL Express 2014).
When I upload an image to a page, it creates several crop sizes for the picture. This I got to work with:
<img src='@Model.Content.GetCropUrl("imageCropper", "thumbW1920H1080")' />
But what if I want to replace thumbnail "thumbW1920H1080" with smaller images to smaller screens, Tablet and Mobile for effective downloading?
Someone who has a simple and straightforward method?
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...