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...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.
Continue discussion
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...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.