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. The following integrates a page's illustration image field.

ejs
pug
pug (API v1)

Copy

<img src="<%= document.data.illustration.url %>" />

Copy

img(src=document.data.illustration.url)

Copy

img(src=document.getImage('page.illustration').url)

The following is an example of integrating an illustration with a caption.

ejs
pug
pug (API v1)

Copy

<img src="<%= document.data.illustration.url %>" />
<span class="image-caption"><%= document.data.caption %></span>

Copy

img(src=document.data.illustration.url)
span.image-caption !{document.data.caption}

Copy

img(src=document.getImage('page.illustration').url)
span.image-caption !{document.getText('page.caption')}

Get an image view

Here is how you would retrieve and use your responsive image views. The following is an example of how to add responsive images using the HTML picture element.

ejs
pug
pug (API v1)

Copy

<% var mainView = document.data.responsiveImage %>
<% var tabletView = document.data.responsiveImage.tablet %>
<% var mobileView = document.data.responsiveImage.mobile %>

<picture>
  <source media="(max-width: 400px)" srcset="<%= mobileView.url %>" />
  <source media="(max-width: 900px)" srcset="<%= tabletView.url %>" />
  <source srcset="<%= mainView.url %>" />
  <img src="<%= mainView.url %>" />
</picture>

Copy

- var mainView = document.data.responsiveImage
- var tabletView = document.data.responsiveImage.tablet
- var mobileView = document.data.responsiveImage.mobile

picture
    source(media='(max-width: 400px)', srcset=mobileView.url)
    source(media='(max-width: 900px)', srcset=tabletView.url)
    source(srcset=mainView.url)
    img(src=mainView.url)

Copy

- var mainView = document.getImage('page.responsive-image').getView('main')
- var tabletView = document.getImage('.responsive-image').getView('tablet')
- var mobileView = document.getImage('page.responsive-image').getView('mobile')

picture
    source(media='(max-width: 400px)', srcset=mobileView.url)
    source(media='(max-width: 900px)', srcset=tabletView.url)
    source(srcset=mainView.url)
    img(src=mainView.url)

Get the image Alt Text

If you added an alt text value to your image, you retrieve and apply it as shown below.

ejs
pug
pug (API v1)

Copy

<% var imageUrl = document.data.image.url %>
<% var imageAlt = document.data.image.alt %>

<img src="<%= imageUrl %>" alt="<%= imageAlt %>" />

Copy

- var imageUrl = document.data.image.url
- var imageAlt = document.data.image.alt

img(src=imageUrl, alt=imageAlt)

Copy

- var imageUrl = document.getImage('page.image').url
- var imageAlt = document.getImage('page.image').main.alt

img(src=imageUrl, alt=imageAlt)

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.

ejs
pug
pug (API v1)

Copy

<% var mobileView = document.data.image.mobile %>
<% var mobileUrl = mobileView.url %>
<% var mobileAlt = mobileView.alt %>

<img src="<%= mobileUrl %>" alt="<%= mobileAlt %>" />

Copy

- var mobileView = document.data.image.mobile
- var mobileUrl = mobileView.url
- var mobileAlt = mobileView.alt

img(src=mobileUrl, alt=mobileAlt)

Copy

- var mobileView = document.getImage('page.image').getView('mobile')
- var mobileUrl = mobileView.url
- var mobileAlt = mobileView.alt

img(src=mobileUrl, alt=mobileAlt)

Get the image Width & Height

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

ejs
pug
pug (API v1)

Copy

var width = document.data.featuredImage.dimensions.width;
var height = document.data.featuredImage.dimensions.height;

Copy

var width = document.data.featuredImage.dimensions.width;
var height = document.data.featuredImage.dimensions.height;

Copy

var width = document.getImage('article.featured-image').main.width;
var height = document.getImage('article.featured-image').main.height;

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

ejs
pug
pug (API v1)

Copy

var mobileView = document.data.featuredImage.mobile;
var mobileWidth = mobileView.dimensions.width;
var mobileHeight = mobileView.dimensions.height;

Copy

var mobileView = document.data.featuredImage.mobile;
var mobileWidth = mobileView.dimensions.width;
var mobileHeight = mobileView.dimensions.height;

Copy

var mobileView = document.getImage('article.featured-image').getView('mobile');
var mobileWidth = mobileView.width;
var mobileHeight = mobileView.height;

Was this article helpful?

Not really

Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.