{{responsiveImageAttributes}} helper

The responsiveImageAttributes helper dynamically generates the srcset and sizes attributes for images, guiding the browser to select the most suitable image source based on the current device's screen size and resolution. 

Syntax:

{{responsiveImageAttributes @config.custom.imageOptionName [type] [group]}}

• @config.custom.imageOptionName: targets the image defined in the theme's configuration.
• type (optional): categorizes the image into specific types such as optionImages, tagImages, authorImages, contentImages, or featuredImages.
• group (optional): indicates the size group for the image, allowing for tailored image sizes for different design components.

Please note: The type and group are optional and only work with the featuredImages settings. 

When the helper's syntax specifies an image type directly, alongside srcset and sizes, the functionality remains unchanged. 

In instances where the syntax begins with an option name and an image type is not explicitly provided, the script now intelligently infers the image type based on the path of the image. 

The responsiveImageAttributes leverages responsiveSizes, the image type is automatically detected from the image path if not specified. 

Example:

{{responsiveImageAttributes @config.custom.heroImage 'featuredImage' 'hero'}}