All Collections
Email Design
Adding Images to Your Template
Adding Images to Your Template
Jason Olliver avatar
Written by Jason Olliver
Updated over a week ago

In order to display images in your template:

Locate Images in Your Feed

To verify if images are populated in your feed, open the feed page (xml) and look for one of these elements. Digesto supports three different image elements:

1) Enclosure Image (<enclosure>)
This is the standard way to pass images in an RSS feed.

Example:
<enclosure url="http://perkuto.com/wp-content/uploads/2017/05/perkuto_sigle_200x200_t.png" length="900" type="image/jpg" />

2) Media-Content Image (<media:content>)
Example:
<media:content url="http://www.learningliftoff.com/wp-content/uploads/2015/09/SOTW_Fruit.jpg" type="image/jpeg" medium="image" width="100%" height="auto">

</media:content>

3) Embed Image
Image added to the beginning of the Excerpt text (<description>) or Full Content element (<content:encoded>).
Example:
<content:encoded><![CDATA[ <img class="size-full wp-image-7788" src="http://perkuto.com/wp-content/uploads/2017/05/mkto-core.png" alt="" width="720" height="405" srcset="http://perkuto.com/wp-content/uploads/2017/05/mkto-core.png 720w, http://perkuto.com/wp-content/uploads/2017/05/mkto-core-300x169.png 300w, http://perkuto.com/wp-content/uploads/2017/05/mkto-core-555x312.png 555w" sizes="(max-width: 720px) 100vw, 720px" /><br />...

Still can't locate images in your feed? Contact us or check out this tutorial (WordPress only) to add images to your feed.

Add Featured Images to Your Template

To add images to your Digest, you can either chose a new template from our gallery (recommended) or customize your existing template with the WYSIWYG editor or by manually adding it via the code editor.

Using a New Template

The quickest and easiest way to add images to your template is to use and benefit from one of our pre-formatted templates that will already have a placeholder for your post images.

Using the Editor

From the Digest Editor, position your cursor where you would like the image to appear and select the Digesto Tag for Enclosure Image, Enclosure Image (URL). Alternatively, for Embed Image, use First Post Image (Embed Code), or for Media Content Image, use First Post Image (Embed Code).

Manual update

Toggle to code view (</>) to edit the code manually. Use the following merge tags to dynamically insert image URLs into your Digest Template.

1) For Enclosure image, use the {{ITEM-IMAGE-URL}} merge tag

Example:
<!-- BEGIN IMAGE CODE --><a href="{{ITEM-LINK}}"><img border="0" alt="Post Image" onerror="this.style.display = 'none'" src="{{ITEM-IMAGE-URL}}" width="100%" height="auto"></a><!-- END IMAGE CODE -->

2) For Media Content image, use the {{ITEM-MEDIA-CONTENT-IMAGE-URL}} merge tag

Example:

<!-- BEGIN IMAGE CODE --><a href="{{ITEM-LINK}}"><img border="0" alt="Post Image" onerror="this.style.display = 'none'" src="{{ITEM-MEDIA-CONTENT-IMAGE-URL}}" width="100%" height="auto"></a><!-- END IMAGE CODE -->

3) For Embed image, use the {{ITEM-FIRSTPOSTIMAGE-URL}} merge tag
Digesto offers a special features that will extract the image from the "body" of your feed to make it available to use as a header image. This allows for more control of the image styling.Use First Image (Embed Code) in your template editor or go in code view and insert {{ITEM-FIRSTPOSTIMAGE-URL}} as part of your image code.

Example:

<!-- BEGIN IMAGE CODE --><a href="{{ITEM-LINK}}"><img border="0" alt="Post Image" onerror="this.style.display = 'none'" src="{{ITEM-FIRSTPOSTIMAGE-URL}}" width="100%" height="auto"></a><!-- END IMAGE CODE -->


Adjusting Body Images

In addition to featured\thumbnail images, Images may appear on the body section of your post. Your blog email may require a different formatting to adjust to a different width and adapt to specific email clients and ensure responsiveness. You can gain control image formatting with CSS Styling and Images attributes using the Image Inline Style and Image Attribute fields found under "Advanced Settings" at the bottom of the template editor.

Important to Note

  • The way featured\thumbnail images display across email clients and devices can differ and is somewhat unpredictable,

  • If you wish to use images, please ensure that ALL your blog posts have an image in the proper tag.

  • We recommend you first test your images through a validator such as Email On Acid or Litmus. If you are not satisfied with the rendering across all email clients and devices, we recommend that you not use featured images or thumbnails.

Did this answer your question?