image_tag​

Creates an HTML <img> tag for a specified image_url.

By default, the <img> tag will include width and height attributes based on the image URL's dimensions and aspect ratio. These attributes can be overridden by specifying the width and height parameters. If a single parameter is specified, it will be the only attribute included.

Parameters​

• image_url {String}: The image_url helper.
• [hash.width] {Number}: Sets the width attribute of the <img> tag. Assign the parameter a null value to omit the attribute.
• [hash.height] {Number}: Sets the height attribute of the <img> tag. Assign the parameter a null value to omit the attribute.
• [hash.sizes] {String}: Defines the source sizes using the HTML sizes attribute.
• [hash.widths] {String}: Defines the source widths using the HTML sizes attribute.
• [hash.srcset] {String}: By default, Shopline generates a srcset. However, you have the option to create a custom srcset. The srcset parameter overrides the width parameter. Use the srcset parameter only if you intend to omit the attribute by assigning the parameter a null value..
• [hash.alt] {String}: The alt attribute of the <img> tag is set by default to the media alt text or the resource title of article, collection, line item, product, and variant images. You have the option to override this default setting or specify a value if no default exists.
• [hash.preload] {Boolean}: Determines if the the image should be preloaded. When preload is enabled, a resource hint is included in Link HTTP header with the rel attribute set to preload. The Link header additionally includes imagesrcset and imagesizes that correspond to the tag's srcset and sizes attributes, if they are present:

LINK: <IMAGE_CDN_URL>; rel="preload"; as="image"
LINK: <IMAGE_CDN_URL>; rel="preload"; as="image"; imagesrcset=URL 500w; imagesizes=50vw

• [HTML attributes] {String}: You can define HTML attributes by adding parameters that correspond to the attribute names and assigning them the desired values.
• returns {String}: The <img> tag.

Usage​

{{ image_tag (image_url object) }}

Example​

{{ image_tag (image_url image width=200) }}