Possible to set style attribute (#18)

PictureRenderer/Picture.cs

@@ -65,7 +65,7 @@ public static string Render(string[] imagePaths, PictureProfileBase profile, str
         /// </summary>
         /// <param name="focalPoint">Value range: 0-1 for ImageSharp, 1-[image width/height] for Storyblok.</param>
         /// <returns></returns>
-        public static string Render(string imagePath, PictureProfileBase profile, string altText = "", LazyLoading lazyLoading = LazyLoading.Browser, (double x, double y) focalPoint = default, string cssClass = "", string imgWidth = "")
+        public static string Render(string imagePath, PictureProfileBase profile, string altText = "", LazyLoading lazyLoading = LazyLoading.Browser, (double x, double y) focalPoint = default, string cssClass = "", string imgWidth = "", string style = "")
         {
             var pictureData = PictureUtils.GetPictureData(imagePath, profile, altText, focalPoint, cssClass);
 
@@ -77,7 +77,7 @@ public static string Render(string imagePath, PictureProfileBase profile, string
                 sourceElementWebp = RenderSourceElement(pictureData, ImageFormat.Webp);
             }
 
-            var imgElement = RenderImgElement(pictureData, profile, lazyLoading, imgWidth);
+            var imgElement = RenderImgElement(pictureData, profile, lazyLoading, imgWidth, style);
             var pictureElement = $"<picture>{sourceElementWebp}{sourceElement}{imgElement}</picture>"; //Webp source element must be rendered first. Browser selects the first version it supports.
             var infoElements = RenderInfoElements(profile, pictureData);
 
@@ -91,23 +91,24 @@ public static string Render(string[] imagePaths, PictureProfileBase profile, str
         {
             var pictureData = PictureUtils.GetMultiImagePictureData(imagePaths, profile, altText, focalPoints, cssClass);
             var sourceElements = RenderSourceElementsForMultiImage(pictureData);
-            var imgElement = RenderImgElement(pictureData, profile, lazyLoading);
+            var imgElement = RenderImgElement(pictureData, profile, lazyLoading, string.Empty, string.Empty);
             var pictureElement = $"<picture>{sourceElements}{imgElement}</picture>";
             var infoElements = RenderInfoElements(profile, pictureData);
 
             return $"{pictureElement}{infoElements}";
         }
 
-        private static string RenderImgElement(PictureData pictureData, PictureProfileBase profile, LazyLoading lazyLoading, string imgWidth = "")
+        private static string RenderImgElement(PictureData pictureData, PictureProfileBase profile, LazyLoading lazyLoading, string imgWidth, string style)
         {
             var idAttribute = string.IsNullOrEmpty(pictureData.UniqueId) ? string.Empty : $" id=\"{pictureData.UniqueId}\"";
             var widthAndHeightAttributes = GetImgWidthAndHeightAttributes(profile, imgWidth);
             var loadingAttribute = lazyLoading == LazyLoading.Browser ? "loading=\"lazy\" " : string.Empty;
             var classAttribute = string.IsNullOrEmpty(pictureData.CssClass) ? string.Empty : $"class=\"{HttpUtility.HtmlEncode(pictureData.CssClass)}\"";
             var decodingAttribute = profile.ImageDecoding == ImageDecoding.None ? string.Empty :  $"decoding=\"{Enum.GetName(typeof(ImageDecoding), profile.ImageDecoding)?.ToLower()}\" ";
             var fetchPriorityAttribute = profile.FetchPriority == FetchPriority.None ? string.Empty :  $"fetchPriority=\"{Enum.GetName(typeof(FetchPriority), profile.FetchPriority)?.ToLower()}\" ";
+            var styleAttribute = string.IsNullOrEmpty(style) ? string.Empty : $"style=\"{style}\" ";
 
-            return $"<img{idAttribute} alt=\"{HttpUtility.HtmlEncode(pictureData.AltText)}\" src=\"{pictureData.ImgSrc}\" {widthAndHeightAttributes}{loadingAttribute}{decodingAttribute}{fetchPriorityAttribute}{classAttribute}/>";
+            return $"<img{idAttribute} alt=\"{HttpUtility.HtmlEncode(pictureData.AltText)}\" src=\"{pictureData.ImgSrc}\" {widthAndHeightAttributes}{loadingAttribute}{decodingAttribute}{fetchPriorityAttribute}{classAttribute}{styleAttribute}/>";
         }
 
         private static string GetImgWidthAndHeightAttributes(PictureProfileBase profile, string imgWidth)

PictureRenderer/PictureRenderer.csproj

@@ -2,7 +2,7 @@
 
   <PropertyGroup>
     <TargetFramework>netstandard2.0</TargetFramework>
-    <Version>3.9</Version>
+    <Version>3.10</Version>
     <Authors>Erik Henningson</Authors>
     <Company />
     <Product />

PictureRendererTests/ImageSharpTests.cs

@@ -36,6 +36,17 @@ public void RenderWithWebpTest()
             Assert.Equal(expected, result);
         }
 
+        [Fact()]
+        public void RenderWithStyleTest()
+        {
+            const string expected = "<picture><source srcset=\"/myImage.jpg?format=webp&width=150&height=150&quality=80 150w, /myImage.jpg?format=webp&width=300&height=300&quality=80 300w\" sizes=\"150px\" type=\"image/webp\"/><source srcset=\"/myImage.jpg?width=150&height=150&quality=80 150w, /myImage.jpg?width=300&height=300&quality=80 300w\" sizes=\"150px\" /><img alt=\"alt text\" src=\"/myImage.jpg?width=400&height=400&quality=80\" loading=\"lazy\" decoding=\"async\" style=\"float: right;\" /></picture>";
+            var profile = GetTestImageProfile();
+
+            var result = PictureRenderer.Picture.Render("/myImage.jpg", profile, "alt text", style: "float: right;");
+
+            Assert.Equal(expected, result);
+        }
+
         [Fact()]
         public void RenderWithCssClassAndImageDecodingAuto()
         {

README.md

@@ -135,6 +135,7 @@ This setting should of course never be true in your live/production environment,
 Note that this may not work if using Blazor.
 
 ## Version history
+* **3.10** Possible to set style attribute (added to img element).
 * **3.9** Possible to set [fetchpriority](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority) attribute. Thanks [Karol](https://github.com/karolberezicki)!
 * **3.8** Possible to disable Cloudflare processing (may be wanted on dev environment).
 * **3.7** Added support for Storyblok and Cloudflare image services.