Templating the Image field
The Image field allows content writers to upload an image that can be configured with size constraints and responsive image views.
Retrieve the image url
The easiest way to integrate an image is to retrieve and add the image url to image elements.
Here is an example that retrieves the url from an Image field with the API ID of illustration.
Get an image view
It's easy to get the url for an image and any of its views. The following shows how to retrieve the image url for the main view as well as its tablet and mobile views. In this case, the Image field has an API ID of responsive_image.
const image = document.data.responsive_image const mainUrl = image.url // main image const tabletUrl = image.tablet.url // tablet const mobileUrl = image.mobile.url // mobile
Get the image Alt Text
If you added an alt text value to your image, you retrieve and apply it as shown below. Here the Image field has the API ID of image.
const image = document.data.image const imageUrl = image.url // url const imageAlt = image.alt // alt
The following shows how to retrieve the alt text for a responsive image view. Note that the alt text will be the same for all views.
const mobileView = document.data.image.mobile const mobileUrl = mobileView.url // mobile image url const mobileAlt = mobileView.alt // mobile image alt
Get the image Width & Height
Here’s how to retrieve the main image’s width or height. Here the Image field has the API ID of featured_image.
const image = document.data.featured_image const imageWidth = image.dimensions.width // image width const imageHeight = image.dimensions.height // image height
Here is how to retrieve the width and height for a responsive image view.
const mobileImage = document.data.featured_image.mobile; const mobileWidth = mobileImage.dimensions.width // mobile image width const mobileHeight = mobileImage.dimensions.height // mobile image height