Image
Renders an image upload field and returns an Image object.
Renders an image upload field and returns an Image object. creators can upload an image or select one from their media library.
Returns: An Image object.
Example
---
attributes:
hero_image:
type: image
label: Hero image
default:
asset: images/hero.jpg
hint: Recommended image size 1920px by 600px
---<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">Setting defaults
Defaults can be defined as a URL or as an image from the theme assets directory.
URL
---
attributes:
background:
type: image
default:
url: https://example.com/image.jpg
---Image asset
---
attributes:
background:
type: image
default:
asset: images/my-image.jpg
---Usage
For responsive images with lazy loading, use the image partial:
{% render 'image',
image: hero_image,
alt: hero_image.alt,
classes: 'hero__image',
sizes: '100vw'
%}