public static Image GetBestImage(this Image image)
{
if (image == null)
{
return(null);
}
var compressedImage = image.Images.FirstOrDefault(i => i.Options.HasValue && i.ImageOptions.Value.HasFlag(ImageOptions.GoogleCompression));
if (compressedImage != null)
{
return(compressedImage);
}
return(image);
}
public static IHtmlString GetImageTag(this Image image, bool lazyLoad, bool showDebug, string title = null, string cssClass = null, bool marginTop = false)
{
//@media(min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
//@media(min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
//@media(min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
//@media(min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
//@media(min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
//@media(min-width:1281px) { /* hi-res laptops and desktops */ }
var pictureTag = new TagBuilder("picture");
Image fallbackImage = null;
Image mobileImage = null;
Image tabletImage = null;
if (image != null)
{
foreach (var childImage in image.Images)
{
if (childImage.ImageOptions.HasFlag(ImageOptions.Mobile))
{
mobileImage = childImage;
}
else if (childImage.ImageOptions.HasFlag(ImageOptions.Tablet))
{
tabletImage = childImage;
}
else if (childImage.ImageOptions.HasFlag(ImageOptions.GoogleCompression) && fallbackImage == null)
{
fallbackImage = childImage;
}
}
if (fallbackImage == null)
{
fallbackImage = image;
}
}
var img = new TagBuilder("img");
if (fallbackImage != null)
{
var desktopSource = new TagBuilder("source");
desktopSource.Attributes["media"] = "(min-width: 961px)";
if (showDebug)
{
desktopSource.Attributes["debug-id"] = fallbackImage.Id.ToString();
desktopSource.Attributes["debug-parentid"] = fallbackImage.ParentImageId.ToString();
}
desktopSource.Attributes["srcset"] = Uri.EscapeUriString(fallbackImage.Url);
pictureTag.InnerHtml += desktopSource.ToString(TagRenderMode.SelfClosing);
if (tabletImage != null)
{
var tabletSource = new TagBuilder("source");
tabletSource.Attributes["media"] = "(min-width: 641px)";
tabletSource.Attributes["srcset"] = Uri.EscapeUriString(tabletImage.Url);
if (marginTop)
{
tabletSource.Attributes["style"] = $"margin-top: -{tabletImage.Height / 2}px;";
}
if (showDebug)
{
tabletSource.Attributes["debug-id"] = tabletImage.Id.ToString();
tabletSource.Attributes["debug-parentid"] = tabletImage.ParentImageId.ToString();
}
pictureTag.InnerHtml += tabletSource.ToString(TagRenderMode.SelfClosing);
}
if (mobileImage != null)
{
var mobileSource = new TagBuilder("source");
mobileSource.Attributes["media"] = "(min-width: 320px)";
mobileSource.Attributes["srcset"] = Uri.EscapeUriString(mobileImage.Url);
if (marginTop)
{
mobileSource.Attributes["style"] = $"margin-top: -{mobileImage.Height / 2}px;";
}
if (showDebug)
{
mobileSource.Attributes["debug-id"] = mobileImage.Id.ToString();
mobileSource.Attributes["debug-parentid"] = mobileImage.ParentImageId.ToString();
}
pictureTag.InnerHtml += mobileSource.ToString(TagRenderMode.SelfClosing);
}
if (!string.IsNullOrWhiteSpace(title))
{
img.Attributes["title"] = title;
}
else
{
img.Attributes["title"] = image.AlternateText;
}
if (!string.IsNullOrWhiteSpace(cssClass))
{
img.AddCssClass(cssClass);
}
;
if (marginTop)
{
img.Attributes["style"] = $"margin-top: -{fallbackImage.Height / 2}px;";
}
//img.Attributes["height"] = $"{fallbackImage.Height}px";
//img.Attributes["width"] = $"{fallbackImage.Width}px";
if (!string.IsNullOrWhiteSpace(image.AlternateText))
{
img.Attributes["alt"] = image.AlternateText;
}
if (string.IsNullOrWhiteSpace(image.AlternateText) && string.IsNullOrWhiteSpace(title))
{
img.Attributes["alt"] = image.OriginalFileName;
}
img.Attributes[lazyLoad ? "data-src" : "SRC"] = Uri.EscapeUriString(fallbackImage.Url);
if (!string.IsNullOrWhiteSpace(image.BackgroundColor))
{
img.Attributes["style"] = $"background-color: {image.BackgroundColor}";
}
if (lazyLoad)
{
img.AddCssClass("js-lazy-image");
}
}
pictureTag.InnerHtml += img.ToString(TagRenderMode.SelfClosing);
var picTag = pictureTag.ToString(TagRenderMode.Normal);
return(MvcHtmlString.Create(picTag));
}
