Copied to clipboard

Flag this post as spam?

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


  • Sam 75 posts 391 karma points
    Mar 23, 2018 @ 19:01
    Sam
    0

    Responsive images using Slimmage, is there a way to change the aspect ratio depending on the screen width?

    I am trying to set up a slider that is full screen. I am using the GetCropUrl with slimmage and the imageprocessor to get the image at the right size, but I am running into issue if I want to show the image at a different aspect ratio for a tablet or phone screen size.

    for mobile devices the image would essentially become a portrait image instead of landscape.

    Is there anyway to adjust the original width and height if the screen is smaller than a certain size.

     @if (Slide.HasValue("slideImage")){
                var image = Umbraco.TypedMedia(Slide.GetPropertyValue<int>("slideImage"));
                @*img tag must have style of max-width 100%*@
                <div class="fill">
                    <img src='@image.GetCropUrl(1900, 0, ratioMode:ImageCropRatioMode.Height, furtherOptions:"&slimmage=true")' alt="" />
                </div>
            }
    
  • Kevin Jump 1701 posts 10914 karma points MVP 4x c-trib
    Mar 24, 2018 @ 11:13
    Kevin Jump
    101

    Hi Sam,

    you can serve different images up to different size devices in a number of ways them main two are: using the SrcSet attribute on the image and using the picture tag.

    for what you want (different ratio images) you are best using the picture tag - with the picture tag, you can dictate to the browser what image it should use for each size:

    An Example picture tag might look like :

    <picture>
      <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
      <source media="(min-width: 800px)" srcset="elva-800w.jpg">
      <img src="elva-800w.jpg">
    </picture>
    

    here one image is shown below 800px and another for larger screens.

    Within Umbraco you then would have different crops in each of the srcset values - so your portrait crop would appear in teh fist source element and the second one (and the img tag) would contain your current crop.

    I would encourage you to play about with this and read up responsive images there are lots of options and stuff for dealing with things like retina displays and the like, Its not to complicated, but its worth reading around

  • Sam 75 posts 391 karma points
    Mar 26, 2018 @ 15:47
    Sam
    0

    Thanks for the reply. I guess I was thinking to hard about it, and did not realize there was a simple html solution existing. I will give it a try with my setup and cropper tools, and let you know.

  • Sam 75 posts 391 karma points
    Mar 26, 2018 @ 20:52
    Sam
    1

    Thanks again for the info. below is what I ended up with for reference.

    @if (Slide.HasValue("slideImage")){
                var image = Umbraco.TypedMedia(Slide.GetPropertyValue<int>("slideImage"));
                <picture class="fill">
                        <source media="(max-width: 498px)" srcset="@image.GetCropUrl("Mobile")">
                        <source media="(max-width: 767px)" srcset="@image.GetCropUrl("Small")">
                        <source media="(max-width: 1024px)" srcset="@image.GetCropUrl("Medium")">
                        <source media="(min-width: 1025px)" srcset="@image.GetCropUrl("Large")">
                        <img src="@image.Url">     
                </picture>
            }
    
Please Sign in or register to post replies

Write your reply to:

Draft