From 09f20612d617caaf2ed35df6c071300ed4141954 Mon Sep 17 00:00:00 2001 From: Kamila Mielczarek Date: Tue, 27 Jun 2023 14:03:23 +0100 Subject: [PATCH] Respect heights - with media-item + ignore-crops flag - respect any height values passed in, including responsive heights - with src - respect height values passed in --- Our.Umbraco.TagHelpers/ImgTagHelper.cs | 59 +++++++++++++++++++++----- README.md | 36 +++++++++++++++- 2 files changed, 83 insertions(+), 12 deletions(-) diff --git a/Our.Umbraco.TagHelpers/ImgTagHelper.cs b/Our.Umbraco.TagHelpers/ImgTagHelper.cs index 5f287cc..06026ae 100644 --- a/Our.Umbraco.TagHelpers/ImgTagHelper.cs +++ b/Our.Umbraco.TagHelpers/ImgTagHelper.cs @@ -118,6 +118,9 @@ public ImgTagHelper(IOptions globalSettings, [HtmlAttributeName("abovethefold")] public bool AboveTheFold { get; set; } + [HtmlAttributeName("ignore-crops")] + public bool IgnoreCrops { get; set; } + protected HttpRequest Request => ViewContext.HttpContext.Request; [ViewContext] @@ -154,7 +157,7 @@ public override void Process(TagHelperContext context, TagHelperOutput output) var originalWidth = media.GetValue("umbracoWidth"); // Determine the width from the originally uploaded image var originalHeight = media.GetValue("umbracoHeight"); // Determine the height from the originally uploaded image width = ImgWidth > 0 ? ImgWidth : originalWidth; // If the element wasn't provided with a width property, use the width from the media object instead - if (!string.IsNullOrEmpty(ImgCropAlias)) + if (!string.IsNullOrEmpty(ImgCropAlias) && !IgnoreCrops) { // The element contains a crop alias property, so pull through a cropped version of the original image // Also, calculate the height based on the given width using the crop profile so it's to scale @@ -170,14 +173,28 @@ public override void Process(TagHelperContext context, TagHelperOutput output) } else { - // Pull through an image based on the given width and calculate the height so it's to scale. - imgSrc = MediaItem.GetCropUrl(width: (int)width); - if (_globalSettings.OurImg.LazyLoadPlaceholder.Equals(ImagePlaceholderType.LowQualityImage)) + if (IgnoreCrops) { - // Generate a low quality placeholder image if configured to do so - placeholderImgSrc = MediaItem.GetCropUrl(width: (int)width, quality: _globalSettings.OurImg.LazyLoadPlaceholderLowQualityImageQuality); + imgSrc = MediaItem.GetCropUrl(width: (int)ImgWidth, height: (int)ImgHeight); + if (_globalSettings.OurImg.LazyLoadPlaceholder.Equals(ImagePlaceholderType.LowQualityImage)) + { + // Generate a low quality placeholder image if configured to do so + placeholderImgSrc = MediaItem.GetCropUrl(width: (int)ImgWidth, height: (int)ImgHeight, quality: _globalSettings.OurImg.LazyLoadPlaceholderLowQualityImageQuality); + } + width = ImgWidth; + height = ImgHeight != 0 ? ImgHeight : (originalHeight / originalWidth) * width; + } + else + { + // Pull through an image based on the given width and calculate the height so it's to scale. + imgSrc = MediaItem.GetCropUrl(width: (int)width); + if (_globalSettings.OurImg.LazyLoadPlaceholder.Equals(ImagePlaceholderType.LowQualityImage)) + { + // Generate a low quality placeholder image if configured to do so + placeholderImgSrc = MediaItem.GetCropUrl(width: (int)width, quality: _globalSettings.OurImg.LazyLoadPlaceholderLowQualityImageQuality); + } + height = (originalHeight / originalWidth) * width; } - height = (originalHeight / originalWidth) * width; } #region Autogenerate alt text if unspecfied @@ -312,7 +329,7 @@ public override void Process(TagHelperContext context, TagHelperOutput output) #region If multiple responsive image variants have been supplied, wrap the img element with a picture element and source elements per variant. // Only one image will be rendered at a given time based on the current screen width. // The configuration allows us to define whether images are configured "mobile first". This simply alternates between min-width & max-width media queries. - var imageSizes = GetImageSizes(MediaItem != null); + var imageSizes = GetImageSizes(MediaItem != null && !IgnoreCrops); if (imageSizes != null && imageSizes.Any()) { @@ -344,21 +361,41 @@ public override void Process(TagHelperContext context, TagHelperOutput output) null; #endregion - if (!string.IsNullOrEmpty(cropAlias)) + if (!string.IsNullOrEmpty(cropAlias) && !IgnoreCrops) { var cropWidth = MediaItem.LocalCrops.GetCrop(cropAlias).Width; var cropHeight = MediaItem.LocalCrops.GetCrop(cropAlias).Height; sourceHeight = (StringUtils.GetDouble(cropHeight) / StringUtils.GetDouble(cropWidth)) * size.ImageWidth; + + sb.AppendLine($" 0 ? $" height=\"{sourceHeight}\"" : "")} />"); } - sb.AppendLine($" 0 ? $" height=\"{sourceHeight}\"" : "")} />"); + else if (IgnoreCrops) + { + imgSrc = MediaItem.GetCropUrl(width: (int)ImgWidth, height: (int)ImgHeight); + if (_globalSettings.OurImg.LazyLoadPlaceholder.Equals(ImagePlaceholderType.LowQualityImage)) + { + // Generate a low quality placeholder image if configured to do so + placeholderImgSrc = MediaItem.GetCropUrl(width: (int)ImgWidth, height: (int)ImgHeight, quality: _globalSettings.OurImg.LazyLoadPlaceholderLowQualityImageQuality); + } + width = ImgWidth; + height = ImgHeight; + + sourceHeight = size.ImageHeight > 0 ? size.ImageHeight : (ImgHeight / ImgWidth) * size.ImageWidth; + + sb.AppendLine($" 0 ? $" height=\"{size.ImageHeight}\"" : "")} />"); + } + else + { + sb.AppendLine($" 0 ? $" height=\"{sourceHeight}\"" : "")} />"); + } } if (!string.IsNullOrEmpty(FileSource) && ImgWidth > 0 && ImgHeight > 0) { sourceHeight = size.ImageHeight > 0 ? size.ImageHeight : (ImgHeight / ImgWidth) * size.ImageWidth; var sourceUrl = AddQueryToUrl(FileSource, "width", size.ImageWidth.ToString()); - sb.AppendLine($" 0 ? $" height=\"{sourceHeight}\"" : "")} />"); + sb.AppendLine($" 0 ? $" height=\"{sourceHeight}\"" : "")} />"); } } diff --git a/README.md b/README.md index a0f5850..4c598f3 100644 --- a/README.md +++ b/README.md @@ -550,7 +550,7 @@ Applying any of the below configurations within your `appsettings.json` file wil #### Example 1 -This will produce a simple `` tag with an alt tag either defined within the media properties in Umbraco, or auto generated based on the file name. +This will produce a simple `` tag with an alt tag either defined within the media properties in Umbraco, or auto generated based on the file name. `width` and `height` are worked out based on image crops set on the media item. ```cshtml @@ -615,6 +615,40 @@ This will produce an `` tag with: ``` +#### Example 5 + +`ignore-crops` to use provided size + +```cshtml + +``` + +**Output:** + +```cshtml +Some alt text +``` + + +#### Example 6 + +`ignore-crops` to use provided responsive sizes + +```cshtml + +``` + +**Output:** + +```cshtml + + + + Some alt text + +``` + + ## `our-self-host` This is a tag helper attribute that can be applied to any element using a `src` or `href` attribute in the razor template or partial. It will automatically download and self hosting of third party assets, like javascript, css or images. This was written by Soren Kottal for 24Days.in Umbraco Advent calendar 2022 article - https://24days.in/umbraco-cms/2022/static-assets-taghelper/