From 32b2dac568152fca22abde4349bb1651fd7de95b Mon Sep 17 00:00:00 2001 From: Steven Hart Date: Thu, 5 Oct 2023 10:27:56 +0100 Subject: [PATCH 1/2] Respect height attributes when provided --- .../Classes/OurImageSize.cs | 3 +- Our.Umbraco.TagHelpers/ImgTagHelper.cs | 57 ++++++++++++++----- 2 files changed, 44 insertions(+), 16 deletions(-) diff --git a/Our.Umbraco.TagHelpers/Classes/OurImageSize.cs b/Our.Umbraco.TagHelpers/Classes/OurImageSize.cs index 846a264..392206a 100644 --- a/Our.Umbraco.TagHelpers/Classes/OurImageSize.cs +++ b/Our.Umbraco.TagHelpers/Classes/OurImageSize.cs @@ -5,10 +5,11 @@ namespace Our.Umbraco.TagHelpers.Classes internal class OurImageSize { public OurImageSize() { } - public OurImageSize(OurScreenSize screenSize, int imageWidth, string? cropAlias = null) + public OurImageSize(OurScreenSize screenSize, int imageWidth, int imageHeight, string? cropAlias = null) { ScreenSize = screenSize; ImageWidth = imageWidth; + ImageHeight = imageHeight; CropAlias = cropAlias; } public OurImageSize(OurScreenSize screenSize, int imageWidth, int imageHeight) diff --git a/Our.Umbraco.TagHelpers/ImgTagHelper.cs b/Our.Umbraco.TagHelpers/ImgTagHelper.cs index 5f287cc..1b95759 100644 --- a/Our.Umbraco.TagHelpers/ImgTagHelper.cs +++ b/Our.Umbraco.TagHelpers/ImgTagHelper.cs @@ -146,6 +146,7 @@ public override void Process(TagHelperContext context, TagHelperOutput output) var placeholderImgSrc = string.Empty; var jsLazyLoad = !_globalSettings.OurImg.UseNativeLazyLoading && !AboveTheFold; var style = ImgStyle; + var hasLqip = _globalSettings.OurImg.LazyLoadPlaceholder.Equals(ImagePlaceholderType.LowQualityImage); if (MediaItem is not null) { @@ -154,12 +155,13 @@ 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)) { // 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 imgSrc = MediaItem.GetCropUrl(width: (int)width, cropAlias: ImgCropAlias); - if (_globalSettings.OurImg.LazyLoadPlaceholder.Equals(ImagePlaceholderType.LowQualityImage)) + if (hasLqip) { // Generate a low quality placeholder image if configured to do so placeholderImgSrc = MediaItem.GetCropUrl(width: ImgWidth, cropAlias: ImgCropAlias, quality: _globalSettings.OurImg.LazyLoadPlaceholderLowQualityImageQuality); @@ -170,14 +172,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 (ImgHeight > 0) { - // 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 (hasLqip) + { + // 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 (hasLqip) + { + // 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 @@ -264,7 +280,7 @@ public override void Process(TagHelperContext context, TagHelperOutput output) if (jsLazyLoad) { output.Attributes.Add("data-src", imgSrc); - if (_globalSettings.OurImg.LazyLoadPlaceholder.Equals(ImagePlaceholderType.LowQualityImage) && !string.IsNullOrEmpty(placeholderImgSrc)) + if (hasLqip && !string.IsNullOrEmpty(placeholderImgSrc)) { output.Attributes.Add("src", placeholderImgSrc); } @@ -349,9 +365,20 @@ public override void Process(TagHelperContext context, TagHelperOutput output) 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 (size.ImageHeight > 0) + { + sb.AppendLine($""); + } + else + { + sb.AppendLine($""); + } + } } if (!string.IsNullOrEmpty(FileSource) && ImgWidth > 0 && ImgHeight > 0) @@ -456,23 +483,23 @@ private List GetImageSizes(bool isMedia = true) if(ImgWidthSmall > 0) { - imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.Small, ImgWidthSmall, ImgCropAliasSmall) : new OurImageSize(Enums.OurScreenSize.Small, ImgWidthSmall, ImgHeightSmall)); + imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.Small, ImgWidthSmall, ImgHeightSmall, ImgCropAliasSmall) : new OurImageSize(Enums.OurScreenSize.Small, ImgWidthSmall, ImgHeightSmall)); } if(ImgWidthMedium > 0) { - imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.Medium, ImgWidthMedium, ImgCropAliasMedium) : new OurImageSize(Enums.OurScreenSize.Medium, ImgWidthMedium, ImgHeightMedium)); + imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.Medium, ImgWidthMedium, ImgHeightMedium, ImgCropAliasMedium) : new OurImageSize(Enums.OurScreenSize.Medium, ImgWidthMedium, ImgHeightMedium)); } if(ImgWidthLarge > 0) { - imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.Large, ImgWidthLarge, ImgCropAliasLarge) : new OurImageSize(Enums.OurScreenSize.Large, ImgWidthLarge, ImgHeightLarge)); + imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.Large, ImgWidthLarge, ImgHeightLarge, ImgCropAliasLarge) : new OurImageSize(Enums.OurScreenSize.Large, ImgWidthLarge, ImgHeightLarge)); } if(ImgWidthExtraLarge > 0) { - imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.ExtraLarge, ImgWidthExtraLarge, ImgCropAliasExtraLarge) : new OurImageSize(Enums.OurScreenSize.ExtraLarge, ImgWidthExtraLarge, ImgHeightExtraLarge)); + imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.ExtraLarge, ImgWidthExtraLarge, ImgHeightExtraLarge, ImgCropAliasExtraLarge) : new OurImageSize(Enums.OurScreenSize.ExtraLarge, ImgWidthExtraLarge, ImgHeightExtraLarge)); } if(ImgWidthExtraExtraLarge > 0) { - imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.ExtraExtraLarge, ImgWidthExtraExtraLarge, ImgCropAliasExtraExtraLarge) : new OurImageSize(Enums.OurScreenSize.ExtraExtraLarge, ImgWidthExtraExtraLarge, ImgHeightExtraExtraLarge)); + imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.ExtraExtraLarge, ImgWidthExtraExtraLarge, ImgHeightExtraExtraLarge, ImgCropAliasExtraExtraLarge) : new OurImageSize(Enums.OurScreenSize.ExtraExtraLarge, ImgWidthExtraExtraLarge, ImgHeightExtraExtraLarge)); } return imageSizes; From 0f4c945a68fbae36d5733333ef4c00c3eefe525d Mon Sep 17 00:00:00 2001 From: Steven Hart Date: Thu, 12 Oct 2023 08:56:29 +0100 Subject: [PATCH 2/2] Improved height calculation when using src --- Our.Umbraco.TagHelpers/ImgTagHelper.cs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Our.Umbraco.TagHelpers/ImgTagHelper.cs b/Our.Umbraco.TagHelpers/ImgTagHelper.cs index 1b95759..5d20d0e 100644 --- a/Our.Umbraco.TagHelpers/ImgTagHelper.cs +++ b/Our.Umbraco.TagHelpers/ImgTagHelper.cs @@ -215,7 +215,7 @@ public override void Process(TagHelperContext context, TagHelperOutput output) width = ImgWidth; height = ImgHeight; - imgSrc = AddQueryToUrl(FileSource, "width", width.ToString()); + imgSrc = AddQueryToUrl(FileSource, "width", width.ToString()) + "&height=" + height.ToString(); #region Autogenerate alt text if unspecfied if (string.IsNullOrWhiteSpace(ImgAlt)) @@ -384,7 +384,7 @@ public override void Process(TagHelperContext context, TagHelperOutput output) 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()); + var sourceUrl = AddQueryToUrl(FileSource, "width", size.ImageWidth.ToString()) + "&height=" + size.ImageHeight; sb.AppendLine($" 0 ? $" height=\"{sourceHeight}\"" : "")} />"); }