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>
}
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:
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
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.
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.
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 :
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
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.
Thanks again for the info. below is what I ended up with for reference.
is working on a reply...