private static MvcHtmlString GeneratePictureElement(PictureProfile profile,
string imgUrl,
IResponsiveImage focalPoint, ResizedPictureViewModel pictureModel)
{
var sourceElements = profile.Sources?.Select(x => CreateSourceElement(imgUrl, x, focalPoint,
profile.MaxImageDimension, profile.Format));
var pictureElement = new TagBuilder("picture")
{
InnerHtml =
string.Join(string.Empty,
sourceElements?.Select(x => x.ToString(TagRenderMode.SelfClosing)) ?? new string[0]) +
CreateImgElement(
BuildResizedImageUrl(imgUrl, profile.DefaultWidth, ScaleMode.Default, AspectRatio.Original,
null, focalPoint, null, profile.Format).ToString(), pictureModel.ImgElementAttributes)
.ToString(TagRenderMode.SelfClosing)
};
foreach (var kv in pictureModel.PictureElementAttributes)
{
pictureElement.Attributes.Add(kv.Key, kv.Value);
}
return(new MvcHtmlString(pictureElement.ToString()));
}
public static CropSettings GetCropSettings(AspectRatio aspectRatio, IResponsiveImage image)
{
if (image == null)
{
return(null);
}
// must always add crop parameter because of
// https://github.com/imazen/resizer/issues/247
var focalPoint = image.FocalPoint ?? new FocalPoint(0.5, 0.5);
var sourceWidth = image.Width;
var sourceHeight = image.Height;
var focalPointY = (int)Math.Round(sourceHeight * focalPoint.Y);
var focalPointX = (int)Math.Round(sourceWidth * focalPoint.X);
var sourceAspectRatio = (double)sourceWidth / sourceHeight;
var targetAspectRatio = aspectRatio != null && aspectRatio.Ratio > 0
? aspectRatio.Ratio
: sourceAspectRatio;
var x1 = 0;
var y1 = 0;
int x2;
int y2;
if (targetAspectRatio.Equals(sourceAspectRatio))
{
x2 = image.Width;
y2 = image.Height;
}
else if (targetAspectRatio > sourceAspectRatio)
{
// the requested aspect ratio is wider than the source image
var newHeight = (int)Math.Floor(sourceWidth / targetAspectRatio);
x2 = sourceWidth;
y1 = Math.Max(focalPointY - (int)Math.Round((double)newHeight / 2), 0);
y2 = Math.Min(y1 + newHeight, sourceHeight);
if (y2 == sourceHeight)
{
y1 = y2 - newHeight;
}
}
else
{
// the requested aspect ratio is narrower than the source image
var newWidth = (int)Math.Round(sourceHeight * targetAspectRatio);
x1 = Math.Max(focalPointX - (int)Math.Round((double)newWidth / 2), 0);
x2 = Math.Min(x1 + newWidth, sourceWidth);
y2 = sourceHeight;
if (x2 == sourceWidth)
{
x1 = x2 - newWidth;
}
}
return(new CropSettings {
X1 = x1, X2 = x2, Y1 = y1, Y2 = y2
});
}
public ActionResult ResponsiveImage()
{
// Get datasource model data from glass mapper
IResponsiveImage datasourceItem = _glassMapperService.GetDataSourceItem <IResponsiveImage>();
if (datasourceItem != null)
{
_logger.DebugInfo(string.Format("Added Responsive Image to page with following data source: {0}", datasourceItem.FullPath));
return(PartialView("~/Views/Feature/GeneralContent/ResponsiveImage.cshtml", datasourceItem));
}
return(PartialView("~/Views/Common/NoDataSourceItem.cshtml"));
}
private static UrlBuilder BuildResizedImageUrl(string imageUrl, int width,
ScaleMode scaleMode, AspectRatio targetAspectRatio, int?quality,
IResponsiveImage image, int?maxImageDimension, ResizedImageFormat format)
{
width = Math.Min(width, maxImageDimension ?? int.MaxValue);
var target = new UrlBuilder(imageUrl);
if (scaleMode != ScaleMode.Default)
{
target.Mode(scaleMode);
}
if (quality.HasValue)
{
target.Quality(quality.Value);
}
target.Format(format);
if (scaleMode != ScaleMode.Default && scaleMode != ScaleMode.Max &&
image != null)
{
if (targetAspectRatio == null || !targetAspectRatio.HasValue)
{
throw new ArgumentException("Aspect ratio is required when ScaleMode is other than Max");
}
var height = (int)(width / targetAspectRatio.Ratio);
if (height > maxImageDimension)
{
height = maxImageDimension.Value;
width = (int)(height * targetAspectRatio.Ratio);
}
target.Width(width);
target.Height(height);
var cropSettings = ImageCropper.GetCropSettings(targetAspectRatio, image);
if (cropSettings != null)
{
target.Crop(cropSettings);
}
}
else
{
target.Width(width);
}
return(target);
}
private static TagBuilder CreateSourceElement(string imageUrl, PictureSource source,
IResponsiveImage focalPoint, int maxImageDimension, ResizedImageFormat format)
{
var srcSets = source.AllowedWidths
.Select(width => BuildSize(imageUrl, width, source.Mode, source.TargetAspectRatio, source.Quality,
focalPoint, maxImageDimension, format));
var tagBuilder = new TagBuilder("source")
{
Attributes =
{
{ "media", $"{source.MediaCondition}" },
{ "srcset", string.Join(", ", srcSets) },
{ "sizes", string.Join(", ", source.Sizes)}
}
};
return(tagBuilder);
}
private static MvcHtmlString GenerateResizedPicture(string imageBaseUrl,
PictureProfile profile, IResponsiveImage image, ResizedPictureViewModel pictureModel)
{
return(GeneratePictureElement(profile, imageBaseUrl, image, pictureModel));
}
private static string BuildSize(string imageUrl, int width, ScaleMode sourceMode,
AspectRatio sourceTargetAspectRatio, int?sourceQuality, IResponsiveImage focalPoint, int maxImageDimension,
ResizedImageFormat format)
{
var url = BuildResizedImageUrl(imageUrl, width, sourceMode, sourceTargetAspectRatio, sourceQuality,
focalPoint,
maxImageDimension,
format);
return($"{url} {width}w");
}
