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

[Krishanthaudayakumara]

Description / Motivation

This PR implements responsive image support for the ImageTagHelper by adding srcset and sizes attribute functionality, enabling developers to output responsive images using Sitecore's built-in media resizing capabilities.

Key Changes:

1. Added SrcSet and Sizes Properties: Extended the ImageTagHelper with new properties to support responsive image configuration for both <sc-img> and <img> tags.

2. Multiple Input Format Support: The SrcSet property accepts two different input formats for maximum flexibility:

   • Anonymous objects: new object[] { new { w = 800 }, new { mw = 400 } }
   • Dictionary arrays: new Dictionary<string, object> { {"w", 800} }

3. Content SDK Parameter Priority: Implements the same parameter precedence as Content SDK:

   • w (width) takes priority over mw (max width) for srcset descriptors
   • Extended support for legacy parameters: w > mw > width > maxWidth
   • Only entries with valid width parameters are included in srcset
   • Matches Content SDK's getSrcSet function behavior exactly

4. Enhanced Parameter Merging with Preservation:

   • Base imageParams are merged with individual srcSet parameters
   • srcSet parameters override imageParams for each srcset entry
   • Critical Fix: Added GetSitecoreMediaUriWithPreservation method to preserve existing query parameters
   • Preserves essential Sitecore parameters (rev, db, la, vs, ts, hash, ttc, tt, etc.)
   • Follows Content SDK's { ...imageParams, ...params } merge pattern

5. Dual URL Processing Methods:

   • Legacy GetSitecoreMediaUri: Maintains existing behavior (strips query parameters)
   • New GetSitecoreMediaUriWithPreservation: Preserves critical parameters for responsive images
   • GetMediaLinkForSrcSet: Specialized method for srcSet URL generation with parameter preservation
   • Ensures backward compatibility while fixing responsive image display issues

Content SDK Compatibility:

The implementation now produces identical output to the Content SDK's Image component:

Content SDK (React):

<Image 
  field={imageField} 
  imageParams={{quality: 80}} 
  srcSet={[{w: 800}, {mw: 400}]} 
  sizes="(min-width: 768px) 800px, 400px" 
/>

ASP.NET Core SDK (Razor):

<sc-img asp-for="@Model.ImageField" 
        image-params='new { quality = 80 }'
        src-set='new object[] { new { w = 800 }, new { mw = 400 } }'
        sizes="(min-width: 768px) 800px, 400px" />

Technical Implementation Details:

1. Parameter Preservation Architecture:

   • MergeParameters(): Merges base and override parameters using reflection and dictionary handling
   • GetSitecoreMediaUriWithPreservation(): Preserves existing URL parameters while adding new ones
   • ConvertToStringDictionary(): Converts objects to string dictionaries for URL building
   • GetMediaLinkForSrcSet(): Specialized extension method for responsive image URL generation

2. JsonElement Handling: Enhanced support for JSON deserialization scenarios to handle JsonElement types properly

3. Helper Methods: Added AddResponsiveImageAttributes() overloads to eliminate code duplication across Process(), GenerateImage(), and editable markup methods

Usage Examples:

<!-- Basic responsive image -->
<sc-img asp-for="@Model.HeroImage" 
        src-set='new object[] { new { w = 1200 }, new { w = 800 }, new { w = 400 } }'
        sizes="(min-width: 1200px) 1200px, (min-width: 800px) 800px, 400px" />

<!-- With base parameters (preserves existing URL params) -->
<img asp-for="@Model.ProductImage" 
     image-params='new { quality = 80, format = "webp" }'
     src-set='new object[] { new { w = 800, h = 600 }, new { mw = 400, mh = 300 } }'
     sizes="(min-width: 768px) 800px, 400px" />

<!-- Legacy parameter support -->
<sc-img asp-for="@Model.LegacyImage" 
        src-set='new object[] { new { width = 800 }, new { maxWidth = 400 } }'
        sizes="(min-width: 768px) 800px, 400px" />

This implementation ensures feature parity with the Content SDK while maintaining the familiar ASP.NET Core TagHelper syntax, full backward compatibility, and proper parameter preservation for functional image display.

Testing

• The Unit & Integration tests are passing.
• I have added the necessary tests to cover my changes.

Terms

• I agree to follow this project's Code of Conduct.

Fix #16

[Copilot]

Pull Request Overview

This PR implements comprehensive responsive image support for the ImageTagHelper by adding srcset and sizes attribute functionality. The implementation enables developers to output responsive images using Sitecore's built-in media resizing capabilities while maintaining compatibility with the Content SDK behavior.

• Added SrcSet and Sizes properties to ImageTagHelper with support for multiple input formats (anonymous objects, dictionary arrays, JSON strings)
• Implemented parameter merging logic that preserves existing URL parameters while allowing srcSet parameters to override base imageParams
• Added extensive test coverage for various srcSet scenarios including parameter precedence, validation, and edge cases

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
ImageTagHelper.cs	Core implementation of srcSet/sizes support with parameter parsing and URL generation logic
SitecoreFieldExtensions.cs	Added parameter preservation methods and URL building logic for responsive images
ImageTagHelperFixture.cs	Comprehensive test suite covering all srcSet functionality and edge cases