add FixedHeight

ErikHen · Jan 17, 2023 · 97d458e · 97d458e
1 parent b4fc5aa
commit 97d458e
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 2 deletions.
diff --git a/PictureRenderer/Picture.cs b/PictureRenderer/Picture.cs
@@ -98,8 +98,23 @@ private static string GetImgWidthAndHeightAttributes(PictureProfileBase profile,
             {
                 return $"width=\"{imgWidth}\" ";
             }
+            if(profile.ImgWidthHeight)
+            {
+                var widthAttribute = $"width=\"{profile.FallbackWidth}\" ";
+                var heightAttribute = "";
+                if (profile.AspectRatio > 0)
+                {
+                    heightAttribute = $"height=\"{Math.Round(profile.FallbackWidth / profile.AspectRatio)}\" ";
+                } 
+                else if (profile.FixedHeight != null && profile.FixedHeight > 0)
+                {
+                    heightAttribute = $"height=\"{profile.FixedHeight}\" ";
+
+                }
+                return widthAttribute + heightAttribute ;
+            }
 
-            return profile.ImgWidthHeight ? $"width=\"{profile.FallbackWidth}\" height=\"{Math.Round(profile.FallbackWidth / profile.AspectRatio)}\" " : string.Empty;
+            return string.Empty;
         }
 
         private static string RenderSourceElement(PictureData pictureData, string format = "")

diff --git a/PictureRenderer/PictureUtils.cs b/PictureRenderer/PictureUtils.cs
@@ -136,9 +136,17 @@ private static NameValueCollection AddFocalPointQuery((double x, double y) focal
         private static NameValueCollection AddHeightQuery(int imageWidth, NameValueCollection queryItems, PictureProfileBase profile)
         {
             //Add height if aspect ratio is set, and height is not already in the querystring.
-            if (profile.AspectRatio > 0 && queryItems["height"] == null)
+            if (queryItems["height"] != null)
+            {
+                return queryItems;
+            }
+            else if (profile.AspectRatio > 0)
             {
                 queryItems.Add("height", Convert.ToInt32(imageWidth / profile.AspectRatio).ToString()); 
+            } 
+            else if (profile.FixedHeight != null && profile.FixedHeight > 0)
+            {
+                queryItems.Add("height", profile.FixedHeight.ToString());
             }
 
             return queryItems;

diff --git a/PictureRenderer/Profiles/PictureProfileBase.cs b/PictureRenderer/Profiles/PictureProfileBase.cs
@@ -56,6 +56,12 @@ public int FallbackWidth
         /// </summary>
         public double AspectRatio { get; set; }
 
+        /// <summary>
+        /// Set a static height in order to render the height attribute in the img tag without setting a static aspect ratio. 
+        /// Useful for wide images on small screens, to utilize cropping in imagesharp.  
+        /// </summary>
+        public int? FixedHeight { get; set; }
+
         /// <summary>
         /// If true, width and height attributes will be rendered on the img element.
         /// </summary>

diff --git a/PictureRendererTests/PictureTests.cs b/PictureRendererTests/PictureTests.cs
@@ -71,6 +71,23 @@ public void RenderWithWidthAndHeightAndNoDecoding()
             Assert.Equal(expected, result);
         }
 
+        [Fact()]
+        public void RenderWithFixedHeight()
+        {
+            const string expected = "<picture><source srcset=\"/myImage.jpg?format=webp&width=150&height=100&quality=80 150w, /myImage.jpg?format=webp&width=300&height=100&quality=80 300w\" sizes=\"150px\" type=\"image/webp\"/><source srcset=\"/myImage.jpg?width=150&height=100&quality=80 150w, /myImage.jpg?width=300&height=100&quality=80 300w\" sizes=\"150px\" /><img alt=\"alt text\" src=\"/myImage.jpg?width=300&height=100&quality=80\" width=\"300\" height=\"100\" loading=\"lazy\" decoding=\"async\" /></picture>";
+            var profile = new ImageSharpProfile()
+            {
+                SrcSetWidths = new[] { 150, 300 },
+                Sizes = new[] { "150px" },
+                ImgWidthHeight = true,
+                FixedHeight = 100,
+            };
+
+            var result = Picture.Render("/myImage.jpg", profile, "alt text");
+
+            Assert.Equal(expected, result);
+        }
+
         [Fact()]
         public void RenderMultiImageTest()
         {

diff --git a/README.md b/README.md
@@ -82,6 +82,7 @@ public static class PictureProfiles
 * **Sizes (for single image)** – Define the size (width) the image should be according to a set of “media conditions” (similar to css media queries). Values are used to render the sizes attribute. Ignored when rendering multiple images.
 * **MultiImageMediaConditions (for multi image)** - Define image widths for different media conditions. 
 * **AspectRatio (optional)** – The wanted aspect ratio of the image (width/height). Ex: An image with aspect ratio 16:9 = 16/9 = 1.777.
+* **FixedHeight (optional)** – The wanted height of the image across varying screen widths. Overridden by AspectRatio.
 * **CreateWebpForFormat (optional)** - The image formats that should be offered as webp versions. Jpg format is aded by default.
 * **Quality (optional)** - Image quality. Lower value = less file size. Not valid for all image formats. Default value: `80`.
 * **FallbackWidth (optional)** – This image width will be used in browsers that don’t support the picture element. Will use the largest width if not set.