Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
hi Soren,
i dont have for loops , please check my requiremnts i have
@Model.Content.GetCropUrl("postImage", "Desktop") @Model.Content.GetCropUrl("postImage", "Tablet") @Model.Content.GetCropUrl("postImage", "Mobile")
and i needs to use for different screen size , how can i fix this ?
Hi Gayathri
This is what the <picture> element is for. You can read more about it here: https://www.w3schools.com/tags/tag_picture.asp
<picture>
If you are just changing resolutions on the image, I would prefer to use srcset instead. And then you can utilise this awesome package by Jeavon Leopold https://our.umbraco.org/projects/website-utilities/slimsy/
srcset
i tried with this picture tag but doesnt working.
anything am i missing , it is showing the same image
<picture> <source media="(max-width: 1500px)" srcset="@Model.Content.GetCropUrl("imageCropper", "internalBannerDesktop")"> <source media="(max-width: 1000px)" srcset="@Model.Content.GetCropUrl("imageCropper", "internalBannerTablet")"> <source media="(max-width: 700px)" srcset="@Model.Content.GetCropUrl("imageCropper", "internalBannerMobile")"> <img src="@Model.Content.GetCropUrl("imageCropper", "internalBannerDesktop")"> </picture>
HI Soren
also i have tried that Slimsy package
<img data-srcset="@Model.Content.GetCropUrl("imageCropper", "internalBannerDesktop")" data-src="@Model.Content.GetCropUrl("imageCropper", "internalBannerTablet")" sizes="auto" class="lazyload" />
but the same image displaying the Tablet image doesn't changing can you check what am i missing , please
This is because of the order of your media queries. A viewport width of 400px also responds to max-width: 1500px, so you will never hit the lower ones.
max-width: 1500px
In stead you should be using min-widths.
<picture> <source media="(min-width: 1000px)" srcset="@Model.Content.GetCropUrl("imageCropper", "internalBannerDesktop")"> <source media="(min-width: 700px)" srcset="@Model.Content.GetCropUrl("imageCropper", "internalBannerTablet")"> <source media="(min-width: 0px)" srcset="@Model.Content.GetCropUrl("imageCropper", "internalBannerMobile")"> <img src="@Model.Content.GetCropUrl("imageCropper", "internalBannerDesktop")"> </picture>
For Slimsy to work, you need to use other methods for the url. It's all described in the documentation. In example:
@foreach (var feature in featuredPages) { var featureImage = Umbraco.TypedMedia(feature.GetPropertyValue<int>("image")); <div class="3u"> <!-- Feature --> <section class="is-feature"> <img data-srcset="@Url.GetSrcSetUrls(featureImage, 270, 161)" data-src="@Url.GetCropUrl(featureImage, 270, 161)" sizes="auto" class="lazyload" /> </section> </div> }
For Slimsy:
@Url.GetSrcSetUrls(Model.Content, "internalBannerDesktop", "imageCropper")
It's all in the docs -> https://github.com/Jeavon/Slimsy
i checked documentation , i am not sure , so only i have posted in Forum , i am new to Razor any help is appreciated .
i have changed according what you have suggested but still Tablet image not showing
<img data-srcset="@Url.GetSrcSetUrls(Model.Content, "internalBannerDesktop", "imageCropper")" data-src="@Url.GetSrcSetUrls(Model.Content, "internalBannerTablet", "imageCropper")" sizes="auto" class="lazyload" />
the Ratio for each cropper is already coming from internalBannerDesktop , internalBannerTablet
Do you have different ratios for desktop, tablet, etc? Then I would advise you to use <picture>
hmmm okay :)
what if i have a background image how do i use this , if image tag then will be simple i can use picture, but background image ?
<div class="page-header dark" style="background-image:url('@Model.Content.GetCropUrl("imageCropper", "internalBannerDesktop")');">
how can i achive this ?
I'm pretty sure you can use data-bgset instead of data-srcset and get a background image.
data-bgset
data-srcset
Like <div class="lazyload" data-bgset="@Url.GetSrcSetUrls(Model.Content, "internalBannerDesktop", "imageCropper")" data-sizes="auto"></div>
<div class="lazyload" data-bgset="@Url.GetSrcSetUrls(Model.Content, "internalBannerDesktop", "imageCropper")" data-sizes="auto"></div>
Haven't tried myself, and it isn't documented.
i have tried with data-bgset like this
<div class="lazyload" data-bgset="@Model.Content.GetCropUrl("imageCropper", "internalBannerDesktop") 200w, @Model.Content.GetCropUrl("imageCropper", "internalBannerDesktop") 400w [(max-width: 814px) and (max-height: 736px)] | @Model.Content.GetCropUrl("imageCropper", "internalBannerTablet") 300w, @Model.Content.GetCropUrl("imageCropper", "internalBannerTablet") 600w [(max-width: 700px)] | @Model.Content.GetCropUrl("imageCropper", "internalBannerMobile") 400w, @Model.Content.GetCropUrl("imageCropper", "internalBannerDesktop") 800w" data-sizes="auto" data-sizes="auto"></div>
but my output doesnt display the image when i hav einspect and check i got this in DOM
<div class=" lazyloaded" data-bgset="/media/1059/media-1001-personalloan-holiday2.jpg?anchor=center&mode=crop&width=1920&height=350&rnd=131729490100000000 200w, /media/1059/media-1001-personalloan-holiday2.jpg?anchor=center&mode=crop&width=1920&height=350&rnd=131729490100000000 400w [(max-width: 814px) and (max-height: 736px)] | /media/1059/media-1001-personalloan-holiday2.jpg?crop=0,0.044031282377487525,0.33827032686504904,0.57122935704252431&cropmode=percentage&width=1030&height=400&rnd=131729490100000000 300w, /media/1059/media-1001-personalloan-holiday2.jpg?crop=0,0.044031282377487525,0.33827032686504904,0.57122935704252431&cropmode=percentage&width=1030&height=400&rnd=131729490100000000 600w [(max-width: 700px)] | /media/1059/media-1001-personalloan-holiday2.jpg?crop=0.5705631539368865,0.091728903199209011,0,0.530077975225881&cropmode=percentage&width=680&height=400&rnd=131729490100000000 400w, /media/1059/media-1001-personalloan-holiday2.jpg?anchor=center&mode=crop&width=1920&height=350&rnd=131729490100000000 800w" data-sizes="auto"></div>
what am i missing ?
@Gayathri,
Do you have the lazysizes/plugins/bgset/ls.bgset.js plugin loaded?
lazysizes/plugins/bgset/ls.bgset.js
My solution in Umbraco cloud for the background images is the following:
<!-- Responsive images --> <script src="~/assets/js/plugin/lazysizes.min.js"></script> <script src="~/assets/js/plugin/picturefill.min.js"></script> <script src="~/assets/js/plugin/ls.bgset.min.js"></script> <!-- End responsive images --> var sliderImageDesktop = slide.SafeGetImageCropUrl("myImageAlias", "MyCropperDesktop", DefaultImages.DefaultDesktop); var sliderImageTablet = slide.SafeGetImageCropUrl("myImageAlias", "MyCropperTablet", DefaultImages.DefaultTablet); var sliderImageMobile = slide.SafeGetImageCropUrl("myImageAlias", "MyCropperMobile", DefaultImages.DefaultMobile); <div class="lazyload" data-bgset="@sliderImageMobile [(max-width: 480px)] | @sliderImageTablet [(max-width: 768px)] | @sliderImageDesktop" data-sizes="auto"> ... </div>
I can't help you with that. I have not tried data-bgset myself.
thank you , i will mark the above one , since its working for me for picture :)
is working on a reply...
Write your reply to:
Upload image
Image will be uploaded when post is submitted
responsive image cropper to pull in crops based on screen size Razor Umbraco
hi Soren,
i dont have for loops , please check my requiremnts i have
and i needs to use for different screen size , how can i fix this ?
Hi Gayathri
This is what the
<picture>element is for. You can read more about it here: https://www.w3schools.com/tags/tag_picture.aspIf you are just changing resolutions on the image, I would prefer to use
srcsetinstead. And then you can utilise this awesome package by Jeavon Leopold https://our.umbraco.org/projects/website-utilities/slimsy/hi Soren,
i tried with this picture tag but doesnt working.
anything am i missing , it is showing the same image
HI Soren
also i have tried that Slimsy package
but the same image displaying the Tablet image doesn't changing can you check what am i missing , please
This is because of the order of your media queries. A viewport width of 400px also responds to
max-width: 1500px, so you will never hit the lower ones.In stead you should be using min-widths.
For Slimsy to work, you need to use other methods for the url. It's all described in the documentation. In example:
hi Soren,
i dont have for loops , please check my requiremnts i have
and i needs to use for different screen size , how can i fix this ?
For Slimsy:
It's all in the docs -> https://github.com/Jeavon/Slimsy
hi Soren,
i checked documentation , i am not sure , so only i have posted in Forum , i am new to Razor any help is appreciated .
i have changed according what you have suggested but still Tablet image not showing
the Ratio for each cropper is already coming from internalBannerDesktop , internalBannerTablet
Do you have different ratios for desktop, tablet, etc? Then I would advise you to use
<picture>hmmm okay :)
what if i have a background image how do i use this , if image tag then will be simple i can use picture, but background image ?
how can i achive this ?
I'm pretty sure you can use
data-bgsetinstead ofdata-srcsetand get a background image.Like
<div class="lazyload" data-bgset="@Url.GetSrcSetUrls(Model.Content, "internalBannerDesktop", "imageCropper")" data-sizes="auto"></div>Haven't tried myself, and it isn't documented.
hi Soren,
i have tried with
data-bgsetlike thisbut my output doesnt display the image when i hav einspect and check i got this in DOM
what am i missing ?
@Gayathri,
Do you have the
lazysizes/plugins/bgset/ls.bgset.jsplugin loaded?My solution in Umbraco cloud for the background images is the following:
I can't help you with that. I have not tried data-bgset myself.
hi Soren,
thank you , i will mark the above one , since its working for me for picture :)
is working on a reply...