Adding Images to your Template

Locate images in your feed

In order to have add images to your email, it has to be published in the content source aka: your feed. 
Digest supports 3 different image elements. To verify if images are populated in your feed, open the feed page (xml) and search for these elements. 

1) <enclosure>
This is the standard way to pass images in RSS feed.
<enclosure url="http://perkuto.com/wp-content/uploads/2017/05/perkuto_sigle_200x200_t.png" length="900" type="image/jpg" />Ex: 

2) <media:content>
Ex: 
<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:description type="plain"><![CDATA[SOTW_Fruit]]></media:description>
    </media:content>

3) Embeded image
With this method, images are added at the begining of your 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 c
an't locate images in your feed? Contact us or check out this tutorial to add images to your feed (Wordpress only).

Add Images to your template

Adding images to your template is fairly simple.
First you need to chose the Advanced Design option


Then, from the Digest Editor, position your cursor where you would like the image to appear and select the Digesto Tag (below) that correspond to the source of the image from your feed.  



Since all feeds are not created equal, Digesto supports 4 different ways to add images to your template.

1) Featured Image for the Header section

Digesto supports 3 sources for post featured images.  For all methods below, we recommend setting image styling as inline style or image attributes as part of source code of your template. Use the </> button to toggle to code view. 

1.1) Enclosure Images (Recommended)
Feed requirements:
Feed is populated with <enclosure> element containing the desired image. It will show up in each post of your feed as: 
<enclosure url="http://exampleimage.jpg" length="0" type="image/jpeg">

Digesto template setup:
Use Description (Abstract) OR Content-Encoded (Full) tag
Use Enclosure Image (Embed Code) in your template editor or go in code view and insert {{ITEM-IMAGE-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-IMAGE-URL}}" width="100%" height="auto"></a><!-- END IMAGE CODE -->

If your feed does not have enclosures, it should be fairly simple to add it. Using Wordpress? Check out this article to add featured images as enclosures using a free plugin.

1.2) Media Content Images 

Feed requirements:
Feed is populated with
 <media:content> element containing the desired image. It will show up in each post of your feed as: <media:content url="http://exampleimage.jpg" type="image/jpeg" medium="image" width="100%" height="auto">
    </media:content>

Digesto template setup:
Use Media Content Image (Embed Code) in your template editor or go in code view and insert  {{ITEM-MEDIA-CONTENT-IMAGE-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-MEDIA-CONTENT-IMAGE-URL}}" width="100%" height="auto"></a><!-- END IMAGE CODE -->

1.3) First Post Image

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. 

Feed Requirement:
RSS Feeds must have images populated within your post full article (<content:encoded>) or as part of the abstract (<description> element in RSS feed).   

Digesto template setup:
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 -->

2) Body Images
Images from your post where originally formatted to fit a web page. 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 by using Digesto image attribute and inline style settings. 

Feed Requirements:
Images must be populated are included as part of the post either
 within  <content:encoded> elemenent (full article) or as part of the abstract (<description> element).  

Digesto Tag(s)  and setting:
Use 
 {{ITEM-DESCRIPTION}} (Abstract) OR  {{ITEM-CONTENT-ENCODED}} (Full Post) as part of your Digesto template. 

Image Inline Style and Image Attributes parameters will apply to all images parsed in the body section of your email, in replacement of the styling and attributes use on the web page. Note that these settings will only affect images parsed inside the <content:encoded> or <description> element and will not affect formatting on header images referenced in section 1 above. 

Image Style and Image Attributes



Feedback and Knowledge Base