NEW: <our-img> tag helper

Our.Umbraco.TagHelpers/Classes/OurImageSize.cs

@@ -0,0 +1,25 @@
+using Our.Umbraco.TagHelpers.Enums;
+
+namespace Our.Umbraco.TagHelpers.Classes
+{
+    internal class OurImageSize
+    {
+        public OurImageSize() { }
+        public OurImageSize(OurScreenSize screenSize, int imageWidth, string? cropAlias = null)
+        {
+            ScreenSize = screenSize;
+            ImageWidth = imageWidth;
+            CropAlias = cropAlias;
+        }
+        public OurImageSize(OurScreenSize screenSize, int imageWidth, int imageHeight)
+        {
+            ScreenSize = screenSize;
+            ImageWidth = imageWidth;
+            ImageHeight = imageHeight;
+        }
+        public OurScreenSize ScreenSize { get; set; }
+        public int ImageWidth { get; set; }
+        public int ImageHeight { get; set; }
+        public string? CropAlias { get; set; }
+    }
+}

Our.Umbraco.TagHelpers/Configuration/OurUmbracoTagHelpersConfiguration.cs

@@ -0,0 +1,47 @@
+using Our.Umbraco.TagHelpers.Enums;
+
+namespace Our.Umbraco.TagHelpers.Configuration
+{
+    public class OurUmbracoTagHelpersConfiguration
+    {
+        public ImgTagHelperConfiguration OurImg { get; set; } = new ImgTagHelperConfiguration();
+    }
+    public class ImgTagHelperConfiguration
+    {
+        /// <summary>
+        /// Define the typical responsive breakpoints (S,M,L,XL,XXL) in which your website uses during screen resize
+        /// </summary>
+        public MediaQuerySizes MediaQueries { get; set; } = new MediaQuerySizes();
+        /// <summary>
+        /// If true, let the browser handle image lazy loading, otherwise disable to use a 3rd party JavaScript based library
+        /// </summary>
+        public bool UseNativeLazyLoading { get; set; } = true;
+        /// <summary>
+        /// Applicable if UseNativeLazyLoading is false
+        /// </summary>
+        public string LazyLoadCssClass { get; set; } = "lazyload";
+        /// <summary>
+        /// Applicable if UseNativeLazyLoading is false
+        /// </summary>
+        public ImagePlaceholderType LazyLoadPlaceholder { get; set; } = ImagePlaceholderType.SVG;
+        /// <summary>
+        /// Applicable if UseNativeLazyLoading is false & LazyLoadPlaceholder is LowQualityImage
+        /// </summary>
+        public int LazyLoadPlaceholderLowQualityImageQuality { get; set; } = 5; 
+        public bool ApplyAspectRatio { get; set; } = false;
+        public bool MobileFirst { get; set; } = true;
+
+        /// <summary>
+        /// The property alias of the media type containing the alternative text value.
+        /// </summary>
+        public string AlternativeTextMediaTypePropertyAlias { get; set; } = "alternativeText";
+    }
+    public class MediaQuerySizes
+    {
+        public int Small { get; set; } = 576;
+        public int Medium { get; set; } = 768;
+        public int Large { get; set; } = 992;
+        public int ExtraLarge { get; set; } = 1200;
+        public int ExtraExtraLarge { get; set; } = 1400;
+    }
+}

Our.Umbraco.TagHelpers/Configuration/OurUmbracoTagHelpersConfigurationComposer.cs

@@ -0,0 +1,16 @@
+using Microsoft.Extensions.DependencyInjection;
+using Our.Umbraco.TagHelpers.Services;
+using Umbraco.Cms.Core.Composing;
+using Umbraco.Cms.Core.DependencyInjection;
+
+namespace Our.Umbraco.TagHelpers.Configuration
+{
+    public class OurUmbracoTagHelpersConfigurationComposer : IComposer
+    {
+        public void Compose(IUmbracoBuilder builder)
+        {
+            builder.Services.AddOptions<OurUmbracoTagHelpersConfiguration>()
+                .Bind(builder.Config.GetSection("Our.Umbraco.TagHelpers"));
+        }
+    }
+}

Our.Umbraco.TagHelpers/Enums/ImagePlaceholderType.cs

@@ -0,0 +1,14 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Our.Umbraco.TagHelpers.Enums
+{
+    public enum ImagePlaceholderType
+    {
+        SVG,
+        LowQualityImage
+    }
+}

Our.Umbraco.TagHelpers/Enums/OurScreenSize.cs

@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Our.Umbraco.TagHelpers.Enums
+{
+    public enum OurScreenSize
+    {
+        Small = 100,
+        Medium = 200,
+        Large = 300,
+        ExtraLarge = 400,
+        ExtraExtraLarge = 500
+    }
+}