All Technologies / Node.js / Templating the Image field

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.