Image Resource

Use the Image resource to represent an image.

This resource can be modified by the seller with the image-chooser control.

Schema type

Use image to reference this resource in the template schema.

Example 

{
	"src": "/uploads/b/3919bcf2d0/image_1704755801.png",
	"name": "image.png",
	"width": 3251,
	"height": 3251,
	"srcset": [],
	"attribution": []
}

{
	"src": "https://images.unsplash.com/photo-14903491234-73de22?fit=max&fm=jpg&&q=80&w=1080",
	"name": "Flowers in spring",
	"width": 1080,
	"height": 720,
	"srcset": {
		"400w": "https://images.unsplash.com/photo-14903491234-73de22?fit=max&fm=jpg&&q=85&w=400",
		"800w": "https://images.unsplash.com/photo-14903491234-73de22?fit=max&fm=jpg&&q=85&w=800",
		"1200w": "https://images.unsplash.com/photo-14903491234-73de22?fit=max&fm=jpg&&q=85&w=1200",
		"1600w": "https://images.unsplash.com/photo-14903491234-73de22?fit=max&fm=jpg&&q=85&w=1600",
		"2000w": "https://images.unsplash.com/photo-14903491234-73de22?fit=max&fm=jpg&&q=85&w=2000",
		"2400w": "https://images.unsplash.com/photo-14903491234-73de22?fit=max&fm=jpg&&q=85&w=2400"
	},
	"attribution": {
		"id": "YDNvydD910a",
		"url": "https://unsplash.com/@example",
		"name": "Example author"
	}
}

Improved URL Handling

The src and srcset URLs of the Image resource are automatically processed based on the environment. When the site is published, the CDN host is appended to relative URLs. In other environments, the URLs are updated accordingly without appending the host.

Image resources

Image

Field Type Description
attribution ImageAttribution[] If present, specifies that this image was selected by the image-chooser editor control and this image may require attribution
height Number The image height in pixels
name String The name of the uploaded image
src String The url of the uploaded image, can be an absolute url or a relative url. Compatible with the asset_url filter.
srcset ImageSourceSet If present, specifies that this image has multiple resolutions that can be used as a source set
width Number The image width in pixels

Back to top

ImageAttribution

If present, specifies that this image was selected by the image-chooser editor control and this image may require attribution

Field Type Description
id String The image ID
name String The image author’s name
url String The image attribution url

Back to top

ImageSourceSet

If present, specifies that this image has multiple resolutions that can be used as a source set

Field Type Description
400w String The 400px width image url
800w String The 800w width image url
1200w String The 1200w width image url
1600w String The 1600w width image url
2000w String The 2000w width image url
2400w 2400w The 2400w width image url

Back to top

See also