Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Gayathri 55 posts 175 karma points
    Jun 08, 2018 @ 06:24
    Gayathri
    0

    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

    @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 ?

  • Søren Kottal 713 posts 4571 karma points MVP 6x c-trib
    Jun 08, 2018 @ 07:39
    Søren Kottal
    0

    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

    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/

  • Gayathri 55 posts 175 karma points
    Jun 08, 2018 @ 07:42
    Gayathri
    0

    hi Soren,

    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>
    
  • Gayathri 55 posts 175 karma points
    Jun 08, 2018 @ 08:07
    Gayathri
    0

    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

  • Søren Kottal 713 posts 4571 karma points MVP 6x c-trib
    Jun 08, 2018 @ 08:08
    Søren Kottal
    0

    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.

    <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>
    
  • Søren Kottal 713 posts 4571 karma points MVP 6x c-trib
    Jun 08, 2018 @ 08:11
    Søren Kottal
    0

    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>
    }
    
  • Gayathri 55 posts 175 karma points
    Jun 08, 2018 @ 08:13
    Gayathri
    0

    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 ?

  • Søren Kottal 713 posts 4571 karma points MVP 6x c-trib
    Jun 08, 2018 @ 08:18
    Søren Kottal
    1

    For Slimsy:

    @Url.GetSrcSetUrls(Model.Content, "internalBannerDesktop", "imageCropper")
    

    It's all in the docs -> https://github.com/Jeavon/Slimsy

  • Gayathri 55 posts 175 karma points
    Jun 08, 2018 @ 08:21
    Gayathri
    100

    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

    <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

  • Søren Kottal 713 posts 4571 karma points MVP 6x c-trib
    Jun 08, 2018 @ 08:23
    Søren Kottal
    0

    Do you have different ratios for desktop, tablet, etc? Then I would advise you to use <picture>

  • Gayathri 55 posts 175 karma points
    Jun 08, 2018 @ 08:25
    Gayathri
    0

    hmmm okay :)

  • Gayathri 55 posts 175 karma points
    Jun 08, 2018 @ 08:27
    Gayathri
    0

    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 ?

  • Søren Kottal 713 posts 4571 karma points MVP 6x c-trib
    Jun 08, 2018 @ 08:37
    Søren Kottal
    0

    I'm pretty sure you can use data-bgset instead of data-srcset and 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.

  • Gayathri 55 posts 175 karma points
    Jun 11, 2018 @ 02:20
    Gayathri
    0

    hi Soren,

    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&amp;mode=crop&amp;width=1920&amp;height=350&amp;rnd=131729490100000000 200w, /media/1059/media-1001-personalloan-holiday2.jpg?anchor=center&amp;mode=crop&amp;width=1920&amp;height=350&amp;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&amp;cropmode=percentage&amp;width=1030&amp;height=400&amp;rnd=131729490100000000 300w, /media/1059/media-1001-personalloan-holiday2.jpg?crop=0,0.044031282377487525,0.33827032686504904,0.57122935704252431&amp;cropmode=percentage&amp;width=1030&amp;height=400&amp;rnd=131729490100000000 600w [(max-width: 700px)] |
        /media/1059/media-1001-personalloan-holiday2.jpg?crop=0.5705631539368865,0.091728903199209011,0,0.530077975225881&amp;cropmode=percentage&amp;width=680&amp;height=400&amp;rnd=131729490100000000 400w, /media/1059/media-1001-personalloan-holiday2.jpg?anchor=center&amp;mode=crop&amp;width=1920&amp;height=350&amp;rnd=131729490100000000 800w" data-sizes="auto"></div>
    

    what am i missing ?

  • Rahul Patel 8 posts 80 karma points
    Oct 04, 2018 @ 17:32
    Rahul Patel
    1

    @Gayathri,

    Do you have the lazysizes/plugins/bgset/ls.bgset.js plugin loaded?

  • Giacomo De Liberali 8 posts 78 karma points
    Feb 01, 2019 @ 18:23
    Giacomo De Liberali
    0

    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>
    
  • Søren Kottal 713 posts 4571 karma points MVP 6x c-trib
    Jun 11, 2018 @ 06:18
    Søren Kottal
    0

    I can't help you with that. I have not tried data-bgset myself.

  • Gayathri 55 posts 175 karma points
    Jun 11, 2018 @ 06:20
    Gayathri
    0

    hi Soren,

    thank you , i will mark the above one , since its working for me for picture :)

Please Sign in or register to post replies

Write your reply to:

Draft