Skip to content

Commit be63b4f

Browse files
warrenbuckleywarrenbuckley
authored
Merge pull request #69 from stayawakesteve/respect-heights
Respect height attributes when provided
2 parents 519e052 + 0f4c945 commit be63b4f

File tree

2 files changed

+46
-18
lines changed

2 files changed

+46
-18
lines changed

‎Our.Umbraco.TagHelpers/Classes/OurImageSize.cs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ namespace Our.Umbraco.TagHelpers.Classes
55
internal class OurImageSize
66
{
77
public OurImageSize() { }
8-
public OurImageSize(OurScreenSize screenSize, int imageWidth, string? cropAlias = null)
8+
public OurImageSize(OurScreenSize screenSize, int imageWidth, int imageHeight, string? cropAlias = null)
99
{
1010
ScreenSize = screenSize;
1111
ImageWidth = imageWidth;
12+
ImageHeight = imageHeight;
1213
CropAlias = cropAlias;
1314
}
1415
public OurImageSize(OurScreenSize screenSize, int imageWidth, int imageHeight)

‎Our.Umbraco.TagHelpers/ImgTagHelper.cs

Lines changed: 44 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
146146
var placeholderImgSrc = string.Empty;
147147
var jsLazyLoad = !_globalSettings.OurImg.UseNativeLazyLoading && !AboveTheFold;
148148
var style = ImgStyle;
149+
var hasLqip = _globalSettings.OurImg.LazyLoadPlaceholder.Equals(ImagePlaceholderType.LowQualityImage);
149150

150151
if (MediaItem is not null)
151152
{
@@ -154,12 +155,13 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
154155
var originalWidth = media.GetValue<double>("umbracoWidth"); // Determine the width from the originally uploaded image
155156
var originalHeight = media.GetValue<double>("umbracoHeight"); // Determine the height from the originally uploaded image
156157
width = ImgWidth > 0 ? ImgWidth : originalWidth; // If the element wasn't provided with a width property, use the width from the media object instead
158+
157159
if (!string.IsNullOrEmpty(ImgCropAlias))
158160
{
159161
// The element contains a crop alias property, so pull through a cropped version of the original image
160162
// Also, calculate the height based on the given width using the crop profile so it's to scale
161163
imgSrc = MediaItem.GetCropUrl(width: (int)width, cropAlias: ImgCropAlias);
162-
if (_globalSettings.OurImg.LazyLoadPlaceholder.Equals(ImagePlaceholderType.LowQualityImage))
164+
if (hasLqip)
163165
{
164166
// Generate a low quality placeholder image if configured to do so
165167
placeholderImgSrc = MediaItem.GetCropUrl(width: ImgWidth, cropAlias: ImgCropAlias, quality: _globalSettings.OurImg.LazyLoadPlaceholderLowQualityImageQuality);
@@ -170,14 +172,28 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
170172
}
171173
else
172174
{
173-
// Pull through an image based on the given width and calculate the height so it's to scale.
174-
imgSrc = MediaItem.GetCropUrl(width: (int)width);
175-
if (_globalSettings.OurImg.LazyLoadPlaceholder.Equals(ImagePlaceholderType.LowQualityImage))
175+
if (ImgHeight > 0)
176176
{
177-
// Generate a low quality placeholder image if configured to do so
178-
placeholderImgSrc = MediaItem.GetCropUrl(width: (int)width, quality: _globalSettings.OurImg.LazyLoadPlaceholderLowQualityImageQuality);
177+
imgSrc = MediaItem.GetCropUrl(width: (int)ImgWidth, height: (int)ImgHeight);
178+
if (hasLqip)
179+
{
180+
// Generate a low quality placeholder image if configured to do so
181+
placeholderImgSrc = MediaItem.GetCropUrl(width: (int)ImgWidth, height: (int)ImgHeight, quality: _globalSettings.OurImg.LazyLoadPlaceholderLowQualityImageQuality);
182+
}
183+
width = ImgWidth;
184+
height = ImgHeight != 0 ? ImgHeight : (originalHeight / originalWidth) * width;
185+
}
186+
else
187+
{
188+
// Pull through an image based on the given width and calculate the height so it's to scale.
189+
imgSrc = MediaItem.GetCropUrl(width: (int)width);
190+
if (hasLqip)
191+
{
192+
// Generate a low quality placeholder image if configured to do so
193+
placeholderImgSrc = MediaItem.GetCropUrl(width: (int)width, quality: _globalSettings.OurImg.LazyLoadPlaceholderLowQualityImageQuality);
194+
}
195+
height = (originalHeight / originalWidth) * width;
179196
}
180-
height = (originalHeight / originalWidth) * width;
181197
}
182198

183199
#region Autogenerate alt text if unspecfied
@@ -199,7 +215,7 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
199215
width = ImgWidth;
200216
height = ImgHeight;
201217

202-
imgSrc = AddQueryToUrl(FileSource, "width", width.ToString());
218+
imgSrc = AddQueryToUrl(FileSource, "width", width.ToString()) + "&height=" + height.ToString();
203219

204220
#region Autogenerate alt text if unspecfied
205221
if (string.IsNullOrWhiteSpace(ImgAlt))
@@ -264,7 +280,7 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
264280
if (jsLazyLoad)
265281
{
266282
output.Attributes.Add("data-src", imgSrc);
267-
if (_globalSettings.OurImg.LazyLoadPlaceholder.Equals(ImagePlaceholderType.LowQualityImage) && !string.IsNullOrEmpty(placeholderImgSrc))
283+
if (hasLqip && !string.IsNullOrEmpty(placeholderImgSrc))
268284
{
269285
output.Attributes.Add("src", placeholderImgSrc);
270286
}
@@ -349,15 +365,26 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
349365
var cropWidth = MediaItem.LocalCrops.GetCrop(cropAlias).Width;
350366
var cropHeight = MediaItem.LocalCrops.GetCrop(cropAlias).Height;
351367
sourceHeight = (StringUtils.GetDouble(cropHeight) / StringUtils.GetDouble(cropWidth)) * size.ImageWidth;
352-
}
353368

354-
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}\"" : "")} />");
369+
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}\"" : "")} />");
370+
}
371+
else
372+
{
373+
if (size.ImageHeight > 0)
374+
{
375+
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}\" />");
376+
}
377+
else
378+
{
379+
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}\" />");
380+
}
381+
}
355382
}
356383

357384
if (!string.IsNullOrEmpty(FileSource) && ImgWidth > 0 && ImgHeight > 0)
358385
{
359386
sourceHeight = size.ImageHeight > 0 ? size.ImageHeight : (ImgHeight / ImgWidth) * size.ImageWidth;
360-
var sourceUrl = AddQueryToUrl(FileSource, "width", size.ImageWidth.ToString());
387+
var sourceUrl = AddQueryToUrl(FileSource, "width", size.ImageWidth.ToString()) + "&height=" + size.ImageHeight;
361388
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}\"" : "")} />");
362389

363390
}
@@ -456,23 +483,23 @@ private List<OurImageSize> GetImageSizes(bool isMedia = true)
456483

457484
if(ImgWidthSmall > 0)
458485
{
459-
imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.Small, ImgWidthSmall, ImgCropAliasSmall) : new OurImageSize(Enums.OurScreenSize.Small, ImgWidthSmall, ImgHeightSmall));
486+
imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.Small, ImgWidthSmall, ImgHeightSmall, ImgCropAliasSmall) : new OurImageSize(Enums.OurScreenSize.Small, ImgWidthSmall, ImgHeightSmall));
460487
}
461488
if(ImgWidthMedium > 0)
462489
{
463-
imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.Medium, ImgWidthMedium, ImgCropAliasMedium) : new OurImageSize(Enums.OurScreenSize.Medium, ImgWidthMedium, ImgHeightMedium));
490+
imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.Medium, ImgWidthMedium, ImgHeightMedium, ImgCropAliasMedium) : new OurImageSize(Enums.OurScreenSize.Medium, ImgWidthMedium, ImgHeightMedium));
464491
}
465492
if(ImgWidthLarge > 0)
466493
{
467-
imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.Large, ImgWidthLarge, ImgCropAliasLarge) : new OurImageSize(Enums.OurScreenSize.Large, ImgWidthLarge, ImgHeightLarge));
494+
imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.Large, ImgWidthLarge, ImgHeightLarge, ImgCropAliasLarge) : new OurImageSize(Enums.OurScreenSize.Large, ImgWidthLarge, ImgHeightLarge));
468495
}
469496
if(ImgWidthExtraLarge > 0)
470497
{
471-
imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.ExtraLarge, ImgWidthExtraLarge, ImgCropAliasExtraLarge) : new OurImageSize(Enums.OurScreenSize.ExtraLarge, ImgWidthExtraLarge, ImgHeightExtraLarge));
498+
imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.ExtraLarge, ImgWidthExtraLarge, ImgHeightExtraLarge, ImgCropAliasExtraLarge) : new OurImageSize(Enums.OurScreenSize.ExtraLarge, ImgWidthExtraLarge, ImgHeightExtraLarge));
472499
}
473500
if(ImgWidthExtraExtraLarge > 0)
474501
{
475-
imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.ExtraExtraLarge, ImgWidthExtraExtraLarge, ImgCropAliasExtraExtraLarge) : new OurImageSize(Enums.OurScreenSize.ExtraExtraLarge, ImgWidthExtraExtraLarge, ImgHeightExtraExtraLarge));
502+
imageSizes.Add(isMedia ? new OurImageSize(Enums.OurScreenSize.ExtraExtraLarge, ImgWidthExtraExtraLarge, ImgHeightExtraExtraLarge, ImgCropAliasExtraExtraLarge) : new OurImageSize(Enums.OurScreenSize.ExtraExtraLarge, ImgWidthExtraExtraLarge, ImgHeightExtraExtraLarge));
476503
}
477504

478505
return imageSizes;

0 commit comments

Comments
 (0)