Follow

How to Include Image in RSS Feed

Background

Sailthru supports data feeds in both XML and JSON formats, and Atom and RSS are types of XML feeds. In the RSS 2.0 specification, however, there is no "image" tag for individual items but just for the whole channel. Therefore it is a limitation of the RSS standard and a workaround solution is often sought after.

Solution(s)

There are two workaround solutions each with its own pros and cons.

1. Include an HTML "img" tag in the "description" tag of an item and enclose the whole block with the "CDATA" tag. See the example code below:

<item>
...
  <description>
    <![CDATA[
      <img src="http://www.example.com/example.jpg">Description text here.
    ]]>
  </description>
...
</item>

This way the "description" tag contains HTML code and the Sailthru RSS parser is able to pick up the image URL embedded inside and pass the value to the "image" tag for the feed. As a result, the image URL can be referenced in a template using Zephyr code such as the following:

{foreach content as c}
  {c.image}
{/foreach>}

A disadvantage of this method is that if the "description" tag is directly presented to the user, the embedded image will also come up and could lead to an unfavourable situation like the following:

Screen_Shot_2018-01-18_at_3.59.59_PM.png

Therefore we would need to strip off the duplicated image from the description field using the following Zephyr code in the template:

{strip_tags( c.description )}

2. Another way to include an image for an item in RSS feed is to use the Sailthru RSS extension to bring in custom variables supported by Sailthru. Details about the Sailthru RSS extension can be found in the link below:

https://www.sailthru.com/rss-extension/

With the use of Sailthru namespace, custom variables contained in the <sailthru:vars> sub-element will be brought into Sailthru’s proxy feeds and stored in the "vars" field. See the example code below:

<item>
...
  <sailthru:vars>
    <sailthru:image>
        https://www.example.com/example.jpg
    </sailthru:image>
  </sailthru:vars>
...
</item>

Then the above image URL can be referenced in Zephyr using

{c.vars.image}

With this method, however, the image URL will not get picked up automatically so no image will be shown if the feed is being edited in the Recommendation Manager, which could be a disadvantage in some use cases.

Top