Image Templating with Javascript

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.

Copy
pageContent.data.illustration.url

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.

Copy
const image = content.data.responsiveImage

image.url // main image
image.tablet.url // tablet
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.

Copy
const image = pageContent.data.image

image.url // url
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.

Copy
const mobileView = pageContent.data.image.mobile

mobileView.url // mobile image url
mobileView.alt // mobile image alt

Get the image Width & Height

Here’s how to retrieve the main image’s width or height.

Copy
const image = document.data.featuredImage

image.dimensions.width // image width
image.dimensions.height // image height

Here is how to retrieve the width and height for a responsive image view.

Copy
const mobileImage = document.data.featuredImage.mobile;

mobileImage.dimensions.width // mobile image width
mobileImage.dimensions.height // mobile image height