public Dictionary <String, ResponsiveImage> CreateResponsiveImages()
{
String mq = "media query?";
ResponsiveImage imgKitchen = new ResponsiveImage();
imgKitchen.src = "/Images/kitchen.jpg";
imgKitchen.alt = "Kitchen";
imgKitchen.srcset.Add(new ResponsiveImageSrc("/Images/kitchen.jpg", mq));
roomImages.Add("kitchen", imgKitchen);
ResponsiveImage imgBath = new ResponsiveImage();
imgBath.src = "/Images/bathroom.jpg";
imgBath.alt = "Bathroom";
imgBath.srcset.Add(new ResponsiveImageSrc("/Images/bathroom.jpg", mq));
roomImages.Add("bathroom", imgBath);
ResponsiveImage Outdoor = new ResponsiveImage();
Outdoor.src = "/Images/outdoor.jpg";
Outdoor.alt = "Laundry";
Outdoor.srcset.Add(new ResponsiveImageSrc("/Images/outdoor.jpg", mq));
roomImages.Add("outdoor", Outdoor);
ResponsiveImage Laundry = new ResponsiveImage();
Laundry.src = "/Images/laundry.jpg";
Laundry.alt = "Laundry";
Laundry.srcset.Add(new ResponsiveImageSrc("/Images/laundry.jpg", mq));
roomImages.Add("laundry", Laundry);
return(roomImages);
}
public ResponsiveImage Build(IPublishedContent image,
string cropPrefix,
string altText = null,
ImageBreakpoints breakpoints = null,
string imageClass = null,
string containerClass = null,
string cropSeparator = StringConstants.Separators.Hyphen,
int?width = null,
int?height = null,
bool includeRetina = true,
bool enableWebP = false,
int?quality = null)
{
var imageSources = BuildResponsiveImageSources(image, cropPrefix, breakpoints, cropSeparator, width, height, includeRetina, enableWebP, quality);
if (!imageSources.HasAny())
{
return(null);
}
var model = new ResponsiveImage
{
ImageSources = imageSources,
ImageClass = imageClass,
ContainerClass = containerClass,
AltText = altText.HasValue() ? altText : image.Name
};
return(model);
}
/// <summary>
/// Returns CSS <c>@media</c> At-rule blocks.
/// </summary>
/// <param name="responsiveImage"><see cref="ResponsiveImage" /></param>
/// <returns></returns>
public static string ToCssMediaAtRules(this ResponsiveImage responsiveImage)
{
responsiveImage.EnsureResponsiveImage();
var candidatesCollection = responsiveImage
.Candidates
.Select(i => $"background-image: url({i.ImageUri?.OriginalString});");
if (!candidatesCollection.Any())
{
return(string.Empty);
}
var sizesCollection = responsiveImage
.Sizes
.Select(i => $"@media only screen and {i.MediaCondition}");
if (!sizesCollection.Any())
{
return(string.Empty);
}
var stringCollection = sizesCollection
.Zip(candidatesCollection, (media, background) => $@"
{media} {{{
spacer}{background}
}}");
return(string.Join(string.Empty,
new[] {
$"/* {responsiveImage.Description ?? string.Empty} */"
}.Concat(stringCollection)
));
}
static void EnsureResponsiveImage(this ResponsiveImage responsiveImage)
{
if (responsiveImage == null)
{
throw new ArgumentNullException(nameof(responsiveImage));
}
}
private bool TryGetImageUrl(ContentReference imageReference, string imageType, out string imageUrl)
{
if (ContentReference.IsNullOrEmpty(imageReference))
{
imageUrl = string.Empty;
return(false);
}
var imagePath = UrlResolver.GetUrl(imageReference);
if (imagePath.Contains("epieditmode"))
{
imagePath = UrlResolver.GetUrl(imageReference, null, new VirtualPathArguments
{
ContextMode = ContextMode.Default
});
}
var imageData = new ResponsiveImageData
{
Path = imagePath,
Image = imageReference,
ImageType = imageType
};
var responsiveImage = new ResponsiveImage(imageData);
imageUrl = responsiveImage.GetImageURL();
return(!string.IsNullOrWhiteSpace(imageUrl));
}
/// <summary>
/// Returns <c>img</c> markup with <c>srcset</c> and <c>sizes</c>.
/// </summary>
/// <param name="responsiveImage"><see cref="ResponsiveImage" /></param>
/// <returns></returns>
public static string ToImgMarkup(this ResponsiveImage responsiveImage)
{
responsiveImage.EnsureResponsiveImage();
var srcset = responsiveImage.ToSrcSetAttribute();
var sizes = responsiveImage.ToSizesSetAttribute();
return($@"
<img{
spacer}alt=""{responsiveImage.Description ?? string.Empty}""{
spacer}src=""{responsiveImage.Source?.OriginalString ?? string.Empty}""{srcset}{sizes}>
");
}
// Foreach of the associates, lets attach a responsive image
private Dictionary <int, ResponsiveImage> PrepareAssociateImages(List <User> associates)
{
Dictionary <int, ResponsiveImage> imgs = new Dictionary <int, ResponsiveImage>();
for (int i = 0; i < associates.Count(); i++)
{
String mq = "TODO - What is this for?";
ResponsiveImage img = new ResponsiveImage();
img.src = associates[i].ImageString();
img.alt = associates[i].firstName;
img.srcset.Add(new ResponsiveImageSrc(img.src, mq));
imgs.Add(associates[i].id, img);
}
return(imgs);
}
/// <summary>
/// Reduces <see cref="ResponsiveImage.Candidates" /> to the <c>srcset</c> attribute.
/// </summary>
/// <param name="responsiveImage"><see cref="ResponsiveImage" /></param>
/// <returns></returns>
public static string ToSrcSetAttribute(this ResponsiveImage responsiveImage)
{
responsiveImage.EnsureResponsiveImage();
var collection = responsiveImage
.Candidates
.Select(i => $"{i.ImageUri} {i.Width ?? i.PixelDensity}");
if (!collection.Any())
{
return(string.Empty);
}
var attributeValue = collection.Aggregate((a, i) => $"{a},{spacer}{i}");
return($@"{spacer}srcset=""{attributeValue}""");
}
/// <summary>
/// Reduces <see cref="ResponsiveImage.Sizes" /> to the <c>sizes</c> attribute.
/// </summary>
/// <param name="responsiveImage"><see cref="ResponsiveImage" /></param>
/// <returns></returns>
public static string ToSizesSetAttribute(this ResponsiveImage responsiveImage)
{
responsiveImage.EnsureResponsiveImage();
var collection = responsiveImage
.Sizes
.Select(i => $"({i.MediaCondition}) {i.LayoutWidth}");
if (!collection.Any())
{
return(string.Empty);
}
var attributeValue = collection.Aggregate((a, i) => $"{a},{spacer}{i}");
return($@"{spacer}sizes=""{attributeValue}""");
}
public static IHtmlString GetPictureTag(this ResponsiveImage responsiveImage, string pictureClasses = "",
string imageClasses = "", string alternativeText = "", int imageQuality = 80)
{
var pictureTag = new TagBuilder("picture");
pictureTag.MergeAttribute("class", pictureClasses.IsNullOrWhiteSpace() ? responsiveImage.DefaultPictureClasses : $"{responsiveImage.DefaultPictureClasses} {pictureClasses}");
if (responsiveImage.Crops == null || !responsiveImage.Crops.Any())
{
return(new HtmlString(pictureTag.ToString()));
}
var crops = responsiveImage.Crops.OrderByDescending(x => x.BreakPoint).ToList();
// Skip smallest crop
foreach (var crop in crops.Take(responsiveImage.Crops.Count - 1))
{
var sourceTag = new TagBuilder("source");
sourceTag.MergeAttribute("media", $"(min-width: {crop.BreakPoint}px)");
sourceTag.MergeAttribute("srcset",
crop.Coordinates != null
? $"{responsiveImage.Url}?crop={crop.Coordinates.X1},{crop.Coordinates.Y1},{crop.Coordinates.X2},{crop.Coordinates.Y2}&cropmode=percentage&mode=crop&width={crop.Width}&height={crop.Height}&quality={imageQuality}"
: $"{responsiveImage.Url}?center={responsiveImage.FocalPoint.Top},{responsiveImage.FocalPoint.Left}&cropmode=percentage&mode=crop&width={crop.Width}&height={crop.Height}&quality={imageQuality}");
pictureTag.InnerHtml += sourceTag;
}
var smallestCrop = crops.Last();
var imageTag = new TagBuilder("img");
imageTag.MergeAttribute("src",
smallestCrop.Coordinates != null
? $"{responsiveImage.Url}?crop={smallestCrop.Coordinates.X1},{smallestCrop.Coordinates.Y1},{smallestCrop.Coordinates.X2},{smallestCrop.Coordinates.Y2}&cropmode=percentage&mode=crop&width={smallestCrop.Width}&height={smallestCrop.Height}&quality={imageQuality}"
: $"{responsiveImage.Url}?center={responsiveImage.FocalPoint.Top},{responsiveImage.FocalPoint.Left}&cropmode=percentage&mode=crop&width={smallestCrop.Width}&height={smallestCrop.Height}&quality={imageQuality}");
imageTag.MergeAttribute("alt", alternativeText);
imageTag.MergeAttribute("class", imageClasses.IsNullOrWhiteSpace() ? responsiveImage.DefaultImageClasses : $"{responsiveImage.DefaultImageClasses} {imageClasses}");
pictureTag.InnerHtml += imageTag;
return(new HtmlString(pictureTag.ToString()));
}
