Enable SrcSet support with two different input formats for Image tag helper

src/Sitecore.AspNetCore.SDK.RenderingEngine/Extensions/SitecoreFieldExtensions.cs

@@ -1,4 +1,6 @@
-using System.Text.RegularExpressions;
+using System.Collections.Specialized;
+using System.Text.RegularExpressions;
+using System.Web;
 using Microsoft.AspNetCore.Routing;
 using Microsoft.AspNetCore.WebUtilities;
 using Sitecore.AspNetCore.SDK.LayoutService.Client.Response.Model.Fields;
@@ -21,12 +23,85 @@ public static partial class SitecoreFieldExtensions
         ArgumentNullException.ThrowIfNull(imageField);
         string? urlStr = imageField.Value.Src;
 
-        if (urlStr == null)
+        string? result = null;
+        if (urlStr != null)
         {
-            return null;
+            result = GetSitecoreMediaUri(urlStr, imageParams);
         }
 
-        return GetSitecoreMediaUri(urlStr, imageParams);
+        return result;
+    }
+
+    /// <summary>
+    /// Gets modified URL string to Sitecore media item for srcSet.
+    /// This method preserves existing URL parameters and merges them with new ones.
+    /// </summary>
+    /// <param name="imageField">The image field.</param>
+    /// <param name="imageParams">Base image parameters.</param>
+    /// <param name="srcSetParams">SrcSet specific parameters that override imageParams.</param>
+    /// <returns>Media item URL.</returns>
+    public static string? GetMediaLinkForSrcSet(this ImageField imageField, object? imageParams, object? srcSetParams)
+    {
+        ArgumentNullException.ThrowIfNull(imageField);
+        string? urlStr = imageField.Value.Src;
+
+        string? result = null;
+        if (urlStr != null)
+        {
+            Dictionary<string, object?> mergedParams = MergeParameters(imageParams, srcSetParams);
+            result = GetSitecoreMediaUriWithPreservation(urlStr, mergedParams);
+        }
+
+        return result;
+    }
+
+    /// <summary>
+    /// Merges base parameters with override parameters.
+    /// </summary>
+    /// <param name="imageParams">Base image parameters.</param>
+    /// <param name="srcSetParams">SrcSet specific parameters that take precedence.</param>
+    /// <returns>Merged parameters as dictionary.</returns>
+    private static Dictionary<string, object?> MergeParameters(object? imageParams, object? srcSetParams)
+    {
+        Dictionary<string, object?> result = new(StringComparer.OrdinalIgnoreCase);
+
+        // Add base parameters first
+        AddParametersToResult(result, imageParams);
+
+        // Override with srcSet parameters
+        AddParametersToResult(result, srcSetParams);
+
+        return result;
+    }
+
+    /// <summary>
+    /// Adds parameters from an object to the result dictionary.
+    /// </summary>
+    /// <param name="result">The result dictionary to add parameters to.</param>
+    /// <param name="parameters">The parameters object (can be Dictionary or any object with properties).</param>
+    /// <param name="skipNullValues">Whether to skip null values when adding parameters.</param>
+    private static void AddParametersToResult(Dictionary<string, object?> result, object? parameters, bool skipNullValues = false)
+    {
+        switch (parameters)
+        {
+            case null:
+                break;
+            case Dictionary<string, object?> paramDict:
+                foreach (KeyValuePair<string, object?> kvp in paramDict.Where(kvp => !skipNullValues || kvp.Value != null))
+                {
+                    result[kvp.Key] = kvp.Value;
+                }
+
+                break;
+            default:
+                RouteValueDictionary routeValues = new(parameters);
+                foreach (KeyValuePair<string, object?> kvp in routeValues.Where(kvp => !skipNullValues || kvp.Value != null))
+                {
+                    result[kvp.Key] = kvp.Value;
+                }
+
+                break;
+        }
     }
 
     /// <summary>
@@ -53,6 +128,129 @@ private static string GetSitecoreMediaUri(string url, object? imageParams)
             }
         }
 
+        return ApplyJssMediaUrlPrefix(url);
+    }
+
+    /// <summary>
+    /// Gets modified URL string to Sitecore media item with parameter preservation.
+    /// This method preserves existing URL parameters and merges them with new ones.
+    /// </summary>
+    /// <param name="urlStr">The URL string.</param>
+    /// <param name="parameters">Parameters to merge.</param>
+    /// <returns>Modified URL string.</returns>
+    private static string? GetSitecoreMediaUriWithPreservation(string? urlStr, object? parameters)
+    {
+        string? url;
+
+        if (string.IsNullOrEmpty(urlStr))
+        {
+            url = urlStr;
+        }
+        else
+        {
+            // Parse existing query parameters and build merged parameters dictionary
+            Dictionary<string, object?> mergedParams = new(StringComparer.OrdinalIgnoreCase);
+
+            if (!Uri.TryCreate(urlStr, UriKind.RelativeOrAbsolute, out Uri? uri))
+            {
+                url = urlStr;
+            }
+            else
+            {
+                url = ParseUrlParams(uri, mergedParams);
+
+                // Add new parameters (these will override existing ones)
+                AddParametersToResult(mergedParams, parameters, skipNullValues: true);
+
+                // Add query parameters
+                foreach (KeyValuePair<string, object?> kvp in mergedParams)
+                {
+                    if (kvp.Value != null)
+                    {
+                        url = QueryHelpers.AddQueryString(url, kvp.Key, kvp.Value.ToString() ?? string.Empty);
+                    }
+                }
+            }
+        }
+
+        string? result = url == null ? null : ApplyJssMediaUrlPrefix(url);
+        return result;
+    }
+
+    /// <summary>
+    /// Parses URL query string parameters and adds them to the provided dictionary.
+    /// </summary>
+    /// <param name="uri">The Uri with potential query parameters.</param>
+    /// <param name="parameters">The dictionary to add parsed parameters to.</param>
+    /// <returns>The URL without query parameters.</returns>
+    private static string ParseUrlParams(Uri? uri, Dictionary<string, object?> parameters)
+    {
+        string result;
+
+        if (uri == null)
+        {
+            result = string.Empty;
+        }
+        else if (uri.IsAbsoluteUri)
+        {
+            result = ParseAbsoluteUriParams(uri, parameters);
+        }
+        else
+        {
+            result = ParseRelativeUriParams(uri, parameters);
+        }
+
+        return result;
+    }
+
+    private static string ParseAbsoluteUriParams(Uri uri, Dictionary<string, object?> parameters)
+    {
+        string url = $"{uri.Scheme}://{uri.Host}{uri.AbsolutePath}";
+        NameValueCollection queryParams = HttpUtility.ParseQueryString(uri.Query);
+        foreach (string? param in queryParams.AllKeys)
+        {
+            if (!string.IsNullOrEmpty(param))
+            {
+                parameters[param] = queryParams[param];
+            }
+        }
+
+        return url;
+    }
+
+    private static string ParseRelativeUriParams(Uri uri, Dictionary<string, object?> parameters)
+    {
+        // For relative URIs, accessing Uri.Query throws InvalidOperationException, so we use string manipulation
+        string original = uri.OriginalString;
+        int queryIndex = original.IndexOf('?');
+        string result;
+
+        if (queryIndex >= 0)
+        {
+            string query = original[queryIndex..];
+            Dictionary<string, Microsoft.Extensions.Primitives.StringValues> parsedQuery = QueryHelpers.ParseQuery(query);
+            foreach (KeyValuePair<string, Microsoft.Extensions.Primitives.StringValues> kvp in parsedQuery)
+            {
+                parameters[kvp.Key] = kvp.Value.Count > 0 ? kvp.Value[0] : null;
+            }
+
+            result = original[..queryIndex];
+        }
+        else
+        {
+            result = original;
+        }
+
+        return result;
+    }
+
+    /// <summary>
+    /// Applies JSS media URL prefix replacement to the given URL.
+    /// </summary>
+    /// <param name="url">The URL to transform.</param>
+    /// <returns>The URL with JSS media prefix applied if applicable.</returns>
+    private static string ApplyJssMediaUrlPrefix(string url)
+    {
         // TODO Review hardcoded matching and replacement
         Match match = MediaUrlPrefixRegex().Match(url);
         if (match.Success)

src/Sitecore.AspNetCore.SDK.RenderingEngine/TagHelpers/Fields/ImageTagHelper.cs

@@ -29,6 +29,8 @@ public class ImageTagHelper(IEditableChromeRenderer chromeRenderer) : TagHelper
     private const string VSpaceAttribute = "vspace";
     private const string TitleAttribute = "title";
     private const string BorderAttribute = "border";
+    private const string SrcSetAttribute = "srcset";
+    private const string SizesAttribute = "sizes";
     private readonly IEditableChromeRenderer _chromeRenderer = chromeRenderer ?? throw new ArgumentNullException(nameof(chromeRenderer));
 
     /// <summary>
@@ -53,6 +55,19 @@ public class ImageTagHelper(IEditableChromeRenderer chromeRenderer) : TagHelper
     /// </summary>
     public object? ImageParams { get; set; }
 
+    /// <summary>
+    /// Gets or sets the srcset configurations for responsive images.
+    /// Supports: object[] (anonymous objects) or Dictionary arrays.
+    /// Each item should contain width parameters like { mw = 300 }, { w = 100 }.
+    /// </summary>
+    public object? SrcSet { get; set; }
+
+    /// <summary>
+    /// Gets or sets the sizes attribute for responsive images.
+    /// Example: "(min-width: 960px) 300px, 100px".
+    /// </summary>
+    public string? Sizes { get; set; }
+
     /// <inheritdoc/>
     public override void Process(TagHelperContext context, TagHelperOutput output)
     {
@@ -98,6 +113,20 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
             {
                 output.Attributes.Add(ScrAttribute, field.GetMediaLink(ImageParams));
 
+                if (SrcSet != null)
+                {
+                    string srcSetValue = GenerateSrcSetAttribute(field);
+                    if (!string.IsNullOrEmpty(srcSetValue))
+                    {
+                        output.Attributes.Add(SrcSetAttribute, srcSetValue);
+                    }
+                }
+
+                if (!string.IsNullOrEmpty(Sizes))
+                {
+                    output.Attributes.Add(SizesAttribute, Sizes);
+                }
+
                 if (!string.IsNullOrWhiteSpace(field.Value.Alt))
                 {
                     output.Attributes.Add(AltAttribute, field.Value.Alt);
@@ -141,6 +170,42 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
         }
     }
 
+    private static string? GetWidthDescriptor(object? parameters)
+    {
+        if (parameters == null)
+        {
+            return null;
+        }
+
+        IDictionary<string, object> dictionary = HtmlHelper.AnonymousObjectToHtmlAttributes(parameters);
+
+        // Priority: w > mw > width > maxWidth (matching Content SDK behavior + legacy support)
+        string? width = null;
+        if (dictionary.TryGetValue("w", out object? wValue))
+        {
+            width = wValue.ToString();
+        }
+        else if (dictionary.TryGetValue("mw", out object? mwValue))
+        {
+            width = mwValue.ToString();
+        }
+        else if (dictionary.TryGetValue("width", out object? widthValue))
+        {
+            width = widthValue.ToString();
+        }
+        else if (dictionary.TryGetValue("maxWidth", out object? maxWidthValue))
+        {
+            width = maxWidthValue.ToString();
+        }
+
+        if (width != null && int.TryParse(width, out int widthValueInt) && widthValueInt <= 0)
+        {
+            return null;
+        }
+
+        return width != null ? $"{width}w" : null;
+    }
+
     private TagBuilder GenerateImage(ImageField imageField, TagHelperOutput output)
     {
         Image image = imageField.Value;
@@ -152,6 +217,20 @@ private TagBuilder GenerateImage(ImageField imageField, TagHelperOutput output)
         if (!string.IsNullOrWhiteSpace(image.Src))
         {
             tagBuilder.Attributes.Add(ScrAttribute, imageField.GetMediaLink(ImageParams));
+
+            if (SrcSet != null)
+            {
+                string srcSetValue = GenerateSrcSetAttribute(imageField);
+                if (!string.IsNullOrEmpty(srcSetValue))
+                {
+                    tagBuilder.Attributes.Add(SrcSetAttribute, srcSetValue);
+                }
+            }
+
+            if (!string.IsNullOrEmpty(Sizes))
+            {
+                tagBuilder.Attributes.Add(SizesAttribute, Sizes);
+            }
         }
 
         if (!string.IsNullOrWhiteSpace(image.Alt))
@@ -230,8 +309,52 @@ private HtmlString MergeEditableMarkupWithCustomAttributes(string editableMarkUp
             }
 
             imageNode.SetAttributeValue(ScrAttribute, imageField.GetMediaLink(ImageParams));
+
+            if (SrcSet != null)
+            {
+                string srcSetValue = GenerateSrcSetAttribute(imageField);
+                if (!string.IsNullOrEmpty(srcSetValue))
+                {
+                    imageNode.SetAttributeValue(SrcSetAttribute, srcSetValue);
+                }
+            }
+
+            if (!string.IsNullOrEmpty(Sizes))
+            {
+                imageNode.SetAttributeValue(SizesAttribute, Sizes);
+            }
         }
 
         return new HtmlString(doc.DocumentNode.OuterHtml);
     }
+
+    private string GenerateSrcSetAttribute(ImageField imageField)
+    {
+        if (SrcSet is not object[] parsedSrcSet || parsedSrcSet.Length == 0)
+        {
+            return string.Empty;
+        }
+
+        List<string> srcSetEntries = [];
+
+        foreach (object srcSetItem in parsedSrcSet)
+        {
+            // Get width descriptor first to check if this entry should be included
+            string? descriptor = GetWidthDescriptor(srcSetItem);
+            if (descriptor == null)
+            {
+                // Skip entries without valid width parameters (matching Content SDK behavior)
+                continue;
+            }
+
+            // Use GetMediaLinkForSrcSet to preserve existing URL parameters (like ttc, tt, hash, quality, format) because in preview context id the images doesn't get loaded with src-set implementation
+            string? mediaUrl = imageField.GetMediaLinkForSrcSet(ImageParams, srcSetItem);
+            if (!string.IsNullOrEmpty(mediaUrl))
+            {
+                srcSetEntries.Add($"{mediaUrl} {descriptor}");
+            }
+        }
+
+        return string.Join(", ", srcSetEntries);
+    }
 }