Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Respect height attributes when provided #69

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Respect height attributes when provided #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
32b2dac
Respect height attributes when provided
stayawakesteve Oct 5, 2023
0f4c945
Improved height calculation when using src
stayawakesteve Oct 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion Our.Umbraco.TagHelpers/Classes/OurImageSize.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
61 changes: 44 additions & 17 deletions Our.Umbraco.TagHelpers/ImgTagHelper.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
{
Expand All @@ -154,12 +155,13 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
var originalWidth = media.GetValue<double>("umbracoWidth"); // Determine the width from the originally uploaded image
var originalHeight = media.GetValue<double>("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);
Expand All @@ -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
Expand All @@ -199,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))
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -349,15 +365,26 @@ 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($"<source {(jsLazyLoad ? "data-" : "")}srcset=\"{MediaItem.GetCropUrl(width: size.ImageWidth, cropAlias: cropAlias)}\" media=\"({(_globalSettings.OurImg.MobileFirst ? $"min-width: {minWidth}" : $"max-width: {minWidth - 1}")}px)\" width=\"{size.ImageWidth}\"{(sourceHeight > 0 ? $" height=\"{sourceHeight}\"" : "")} />");
sb.AppendLine($"<source {(jsLazyLoad ? "data-" : "")}srcset=\"{MediaItem.GetCropUrl(width: size.ImageWidth, cropAlias: cropAlias)}\" media=\"({(_globalSettings.OurImg.MobileFirst ? $"min-width: {minWidth}" : $"max-width: {minWidth - 1}")}px)\" width=\"{size.ImageWidth}\"{(sourceHeight > 0 ? $" height=\"{sourceHeight}\"" : "")} />");
}
else
{
if (size.ImageHeight > 0)
{
sb.AppendLine($"<source {(jsLazyLoad ? "data-" : "")}srcset=\"{MediaItem.GetCropUrl(width: size.ImageWidth, height: size.ImageHeight)}\" media=\"({(_globalSettings.OurImg.MobileFirst ? $"min-width: {minWidth}" : $"max-width: {minWidth - 1}")}px)\" width=\"{size.ImageWidth}\" height=\"{size.ImageHeight}\" />");
}
else
{
sb.AppendLine($"<source {(jsLazyLoad ? "data-" : "")}srcset=\"{MediaItem.GetCropUrl(width: size.ImageWidth)}\" media=\"({(_globalSettings.OurImg.MobileFirst ? $"min-width: {minWidth}" : $"max-width: {minWidth - 1}")}px)\" width=\"{size.ImageWidth}\" />");
}
}
}

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($"<source {(jsLazyLoad ? "data-" : "")}srcset=\"{sourceUrl}\" media=\"({(_globalSettings.OurImg.MobileFirst ? $"min-width: {minWidth}" : $"max-width: {minWidth - 1}")}px)\" width=\"{size.ImageWidth}\"{(sourceHeight > 0 ? $" height=\"{sourceHeight}\"" : "")} />");

}
Expand Down Expand Up @@ -456,23 +483,23 @@ private List<OurImageSize> 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;
Expand Down