<our-img> - Alternative src's & prevent upscaling

[AndyBoot]

A couple of minor bits to try and include/fix. Firstly is the ability to supply more than one src or media-item so that responsive images can alternate between different images based on screen size. An example of this could be site header logo where the desktop may show the company logo with both logo & text, but on mobile just the logo. In Umbraco we'd have a doc type with two fields. To add additional bloat to the existing properties I propose we add the following:

• src--s
• src--m
• src--l
• src--xl
• src--xxl
• media-item--s
• media-item--m
• media-item--l
• media-item--xl
• media-item--xxl

These would be wired up the same way as the current width, height & cropalias properties.

Secondly, I've discovered if we supply a width larger than the original base image then ImageSharp will resize & upscale the image beyond what it is capable of. I seem to remember Umbraco 8 & ImageProcessor had the ability to set an upscale boolean property, but doesn't appear to be on offer with Umbraco 9+ & ImageSharp. May have to do something hacky if it's not on offer by comparing the original size in the media library with what's requested by the tag helper.

[warrenbuckley]

Hi @AndyBoot
I assume you will take a stab at looking at this, considering you done all the work for the image stuff before ?

[AndyBoot]

Hi @AndyBoot I assume you will take a stab at looking at this, considering you done all the work for the image stuff before ?

Yes bud I will try to. I just wanted to document it in case anybody using it also comes across similar drawbacks, and also so I didn't forget what was on my mind at the time. Ofcourse anybody seeing this who fancies taking a look is more than welcome to, just let me know in the comments so we don't trip over each other.