6

I have read various implementation approaches to render images in desktop/mobile view without cropping/stretching it.

Last time I had a chat with a fellow developer, they insisted on having a separate field for mobile image on a content item - so in all 2 fields, one for desktop image and one for mobile. I reckon that makes things hard for the content authors.

What is the best/easiest approach to address this issue - most efficient solution to have just one field for image for content authors to manage, yet have the image render nicely on different breakpoints without stretching them for larger breakpoints? Is that even possible? If not, which is the most user friendly way to implement this?

  • Which specific issue do you want to address? – Dmytro Shevchenko Dec 21 '17 at 14:10
  • Best way to have just one field for image for content authors to manage, yet have the image render nicely on different breakpoints without stretching them for larger breakpoints? – novicecoder Dec 21 '17 at 14:12
  • So you want to have one image in Sitecore, and you want to render that image "nicely" on all devices and resolutions. First of all, how is this specific to Sitecore? I would imagine this is just about styling. Second of all, what have you tried and what problems have you faced? – Dmytro Shevchenko Dec 21 '17 at 14:15
  • How is this specific? Because sitecore has inbuilt functionality to resize images with query string parameters. I am keen to know if anyone has implemented it that way. Or have they used a pipeline processor? – novicecoder Dec 21 '17 at 14:18
6

One option is to use sizes srcset on your <img> element. I've recently been a project where this was the approach.

Set it up like this. Example from a Razor View.

<img src="@Model.ImageUrl" sizes="(max-width: 764px) 50vw, 25vw" srcset="@Model.ImageSrcSet" />

While this technically does not give you options for mobile devices, it does give you something along the lines of what you are asking.

More information about sizes and srcset here: Responsive Images - The srcset and sizes Attributes

On the Sitecore side of things, you need to generate a list of Image Urls for the image. With different maxWidth constraints. One way to achieve that, is something like this:

ImageField imageField = item.Fields[imageFieldName];
if (imageField?.MediaItem != null /*&& imageField.MediaItem.Versions.Count > 0*/)
{
    var imageUrl = HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = maxWidth}));

    // ReSharper disable once UseObjectOrCollectionInitializer
    var urls = new List<string>();
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 100})) + " 100w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 200})) + " 200w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 300})) + " 300w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 400})) + " 400w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 500})) + " 500w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 600})) + " 600w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 1150})) + " 1150w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 1290})) + " 1290w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 1440})) + " 1440w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 1920})) + " 1920w");

    return new Tuple<string, string>(imageUrl, string.Join(",", urls));
}

Be sure to call in with a reasonable maxwidth as default, something like 300 or whatever is appropriate.

The upside to this; the device will try and download the most appropriate image resolution for the display device. Which is good.

The downside to this; many mobile phones have very high resolution displays on a very small surface area. This approach can still end up selecting a too high resolution image for a 3G connection.

That said; even if you DID do a 2nd field for "mobile images" - you would still need to determine "mobile". If you're going to do that based on device parameters - well then the above solution will do just as well. If - however - you aim to download the "mobile" image when the phone (or any device) is on a slow(ish) connection - well then you need something different. I'm not even sure how you could detect this.

0

This really depends on a lot of factors. If the dimensions of the image will be different in different devices, than it's going to be challenging to use the Sitecore Resizing/Cropping ability to handle that scenario, because the image may get cropped incorrectly, so in that case it's probably best to have different images per aspect ratio.

If however on your item you have a mobile and desktop version that are at an identical aspect ratio, than you should really look at ways of keeping this to just one field (Like you said, having multiple will add additional work for the content editor, which isn't ideal). In the one field, you can make sure the user uploads the largest image size (for desktop) and then you can either handle the shrinking of the image with CSS or you could do this with the Sitecore image crop/resizing functionality.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.