Adding Images to your Template

← Email Design
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 3 different image elements:

1) Enclosure Image (<enclosure>)
This is the standard way to pass images in 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>)
Ex:<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 to add images to your feed (Wordpress only).

Add featured Images to your template

To add images to your feed, 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 to the code.

Using a new template

An easy way to add images to your template and benefit from pre-formatted template that will already have a placeholder for your post images. 
From the Digest Editor, position your cursor where you would like the image to appear and select the Digesto Tag 
for Embed Image, use First Post Image (Embed Code) 
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 to 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) 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. Ex:
<!-- 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 under Advanced settings. 
 

Image Style and Image Attributes



Email Design

  1. Examples of Digesto Emails
  2. Adding Images to your Template
  3. Limit the length of your blog excerpt

Feedback and Knowledge Base

(thinking…)