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.
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)
<img src="<%= document.data.illustration.url %>" />
img(src=document.data.illustration.url)
img(src=document.getImage('page.illustration').url)
The following is an example of integrating an illustration with a caption.
- ejs
- pug
- pug (API v1)
<img src="<%= document.data.illustration.url %>" />
<span class="image-caption"><%= document.data.caption %></span>
img(src=document.data.illustration.url)
span.image-caption !{document.data.caption}
img(src=document.getImage('page.illustration').url)
span.image-caption !{document.getText('page.caption')}
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)
<% 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>
- 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)
- 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)
If you added an alt text value to your image, you retrieve and apply it as shown below.
- ejs
- pug
- pug (API v1)
<% var imageUrl = document.data.image.url %>
<% var imageAlt = document.data.image.alt %>
<img src="<%= imageUrl %>" alt="<%= imageAlt %>" />
- var imageUrl = document.data.image.url
- var imageAlt = document.data.image.alt
img(src=imageUrl, alt=imageAlt)
- 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)
<% var mobileView = document.data.image.mobile %>
<% var mobileUrl = mobileView.url %>
<% var mobileAlt = mobileView.alt %>
<img src="<%= mobileUrl %>" alt="<%= mobileAlt %>" />
- var mobileView = document.data.image.mobile
- var mobileUrl = mobileView.url
- var mobileAlt = mobileView.alt
img(src=mobileUrl, alt=mobileAlt)
- var mobileView = document.getImage('page.image').getView('mobile')
- var mobileUrl = mobileView.url
- var mobileAlt = mobileView.alt
img(src=mobileUrl, alt=mobileAlt)
- ejs
- pug
- pug (API v1)
var width = document.data.featuredImage.dimensions.width;
var height = document.data.featuredImage.dimensions.height;
var width = document.data.featuredImage.dimensions.width;
var height = document.data.featuredImage.dimensions.height;
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)
var mobileView = document.data.featuredImage.mobile;
var mobileWidth = mobileView.dimensions.width;
var mobileHeight = mobileView.dimensions.height;
var mobileView = document.data.featuredImage.mobile;
var mobileWidth = mobileView.dimensions.width;
var mobileHeight = mobileView.dimensions.height;
var mobileView = document.getImage('article.featured-image').getView('mobile');
var mobileWidth = mobileView.width;
var mobileHeight = mobileView.height;