The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
RSS feeds are a convenient way to inform users instantly when a new blog post is available for them to review and comment. This post will show you how to add an image in the feed’s list.
The first thing you will need to do is add a custom field to your blog posts. This field needs to be an image selector that persists the image URL as its value. I have used the resource available in Slavo Ingilizov’s blog. This selector persists the ID of the image in the form of a Guid, so in order for the image to be properly passed, we need to alter the Javascript so it persists the URL. The changes needed are in the SimpleImageSelector.js file, where you need to replace:
var
imageUrl = args.get_dataItem().ThumbnailUrl;
var
imageUrl = args.get_dataItem().MediaUrl;
SimpleImageSelectorDialog.js where you need to locate the _doneLinkClicked function and replace it with the one below:
And in the
_doneLinkClicked:
function
(sender, args) {
var
selectedValue =
this
.get_imageSelector().get_selectedImageUrl();
if
(!selectedValue || selectedValue ===
""
) {
alert(
"No image selected."
);
}
else
{
dialogBase.close(selectedValue);
}
}
After that is done you can apply the custom field in the blog posts as per Slavo’s instructions.
After this is done we need to stream the image in the RSS. Sitefinity uses RSS 2.0. This means that all of the elements that are visible to the end user have to be part of the <channel> tag. Naturally streaming the custom field image with the default <image> xml tag will not work here as it is not a sub tag of the <channel> one. In order to be able to properly pass an image we need to do so with html so as to get freedom for sizing and styling. The only xml tag in the <channel> one that is able to display html is the <description> tag and it needs some modification in order to properly do so.
The first thing we need to do is to create a custom RSS outbound pipe. This way we can extend the default properties of Sitefinity’s default pipe. You need to create a class that inherits from our inbuilt RssOutboundPipe class. The code below presents a pipe with the name customRssOutboundPipe:
using
System;
using
System.Collections.Generic;
using
System.ComponentModel;
using
System.Data;
using
System.Linq;
using
System.ServiceModel.Syndication;
using
System.Xml;
using
System.Xml.Linq;
using
Telerik.Sitefinity.Data.Summary;
using
Telerik.Sitefinity.Modules.GenericContent;
using
Telerik.Sitefinity.Modules.Libraries;
using
Telerik.Sitefinity.Publishing;
using
Telerik.Sitefinity.Publishing.Model;
using
Telerik.Sitefinity.Publishing.Pipes;
using
Telerik.Sitefinity.Publishing.Translators;
using
Telerik.Sitefinity.Web.Utilities;
namespace
SitefinityWebApp.RssOutboundPipe
{
// specifies the pipe designer in the backend
[PipeDesigner(
null
,
typeof
(CustomRssAtomPipeDesignerView))]
public
class
CustomRssOutboundPipe : RSSOutboundPipe
{
public
override
string
Name
{
get
{
return
CustomRssOutboundPipe.PipeName;
}
}
/// <summary>
/// Creates a SyndicationItem object from the given data.
/// </summary>
/// <param name="values">The data used to build a SyndicationItem object.</param>
/// <returns>A SyndicationItem object.</returns>
protected
override
SyndicationItem BuildSyndicationItem(WrapperObject values)
{
SyndicationItem item =
new
SyndicationItem();
var properties = TypeDescriptor.GetProperties(values);
var title =
this
.GetPropertyValue(values, properties, PublishingConstants.FieldTitle);
title = PublishingHelper.SanitizeStringForXml(title);
item.Title =
new
TextSyndicationContent(title);
if
(
this
.RssPipeSettings.OutputSettings != RssContentOutputSetting.TitleOnly)
{
var content =
this
.GetPropertyValue(values, properties, PublishingConstants.FieldContent);
//Resolve to real urls links and media(images, video, docs) pointing to internal sitefinity content by ID
content = LinkParser.ResolveLinks(content, DynamicLinksParser.GetContentUrl,
null
,
false
,
true
);
if
(
this
.RssPipeSettings.OutputSettings == RssContentOutputSetting.TitleAndTruncatedContent)
{
content = SummaryParser.GetSummary(content,
new
SummarySettings(SummaryMode.None, -1,
true
));
if
(content.Length >
this
.RssPipeSettings.ContentSize)
{
if
(
this
.RssPipeSettings.ContentSize == 0)
content = String.Empty;
else
{
content = content.Substring(0,
this
.RssPipeSettings.ContentSize);
content +=
"..."
;
}
}
}
content = PublishingHelper.SanitizeStringForXml(content);
}
//BACK LINK to the web page with the original posting
if
(properties.Find(PublishingConstants.FieldLink,
true
) !=
null
)
{
var itemUrl = GetItemUrl(values);
if
(!
string
.IsNullOrEmpty(itemUrl))
item.Links.Add(SyndicationLink.CreateAlternateLink(
new
Uri(itemUrl)));
}
//AUTHOR
var ownerFirstNameProp = properties.Find(PublishingConstants.FieldOwnerFirstName,
true
);
var ownerLastNameProp = properties.Find(PublishingConstants.FieldOwnerLastName,
true
);
var ownerEmailProp = properties.Find(PublishingConstants.FieldOwnerEmail,
true
);
if
(ownerFirstNameProp !=
null
&& ownerLastNameProp !=
null
&& ownerEmailProp !=
null
)
{
item.Authors.Add(
new
SyndicationPerson(
(
string
)ownerEmailProp.GetValue(values),
(
string
)ownerFirstNameProp.GetValue(values) +
" "
+
(
string
)ownerLastNameProp.GetValue(values),
null
));
}
//PUBLICATION DATE
var pubDateProp = properties.Find(PublishingConstants.FieldPublicationDate,
true
);
if
(pubDateProp !=
null
)
{
var pubDateVal = pubDateProp.GetValue(values);
if
(pubDateVal !=
null
)
item.PublishDate =
new
DateTimeOffset(((DateTime)pubDateVal).ToUniversalTime());
}
//ORIGINAL ITEM ID
var itemIdProp = properties.Find(PublishingConstants.FieldItemId,
true
);
if
(itemIdProp !=
null
)
{
var itemIdVal = itemIdProp.GetValue(values);
if
(itemIdVal !=
null
)
{
item.Id = String.Format(
"urn:uuid:{0}"
, itemIdVal.ToString());
}
}
//CATEGORIES
var catProp = properties.Find(PublishingConstants.FieldCategories,
true
);
if
(catProp !=
null
)
{
var catVal = catProp.GetValue(values);
if
(catVal !=
null
)
{
var categories = ((
string
)catVal).Split(
new
string
[] {
","
}, StringSplitOptions.RemoveEmptyEntries);
foreach
(var cat
in
categories)
item.Categories.Add(
new
SyndicationCategory(cat));
}
}
//SUMMARY
var summaryProp = properties.Find(PublishingConstants.FieldSummary,
true
);
if
(summaryProp !=
null
)
{
var summaryVal = summaryProp.GetValue(values);
if
(summaryVal !=
null
&& !summaryVal.ToString().IsNullOrEmpty())
{
var summary = summaryVal.ToString();
summary = PublishingHelper.SanitizeStringForXml(summary);
item.Summary =
new
TextSyndicationContent(summary);
}
}
return
item;
}
// registers the pipe
public
static
void
AddCustomRssOutboundPipe()
{
// registers the pipe type
PublishingSystemFactory.RegisterPipe(CustomRssOutboundPipe.PipeName,
typeof
(CustomRssOutboundPipe));
// registers the pipe settings of the pipe
var pipeSettings = RSSOutboundPipe.GetTemplatePipeSettings();
//PublishingSystemFactory.CreateDefaultRssOutboundPipeSettings(CustomRssOutboundPipe.PipeName);
pipeSettings.UIName =
"Custom RSS feed"
;
pipeSettings.PipeName = CustomRssOutboundPipe.PipeName;
PublishingSystemFactory.RegisterTemplatePipeSettings(CustomRssOutboundPipe.PipeName, pipeSettings);
PublishingSystemFactory.RegisterPipeSettings(CustomRssOutboundPipe.PipeName, pipeSettings);
// registers the mappings for the pipe
var mappingsList = RSSOutboundPipe.GetDefaultMappings();
//PublishingSystemFactory.GetDefaultOutboundMappingForRss();
CustomRssOutboundPipe.AddFieldNames(mappingsList);
PublishingSystemFactory.RegisterPipeMappings(CustomRssOutboundPipe.PipeName,
false
, mappingsList);
// registers the definitions for the pipe
var definitions = PublishingSystemFactory.CreateDefaultRSSPipeDefinitions();
PublishingSystemFactory.RegisterPipeDefinitions(CustomRssOutboundPipe.PipeName, definitions);
}
private
static
void
AddFieldNames(List<Mapping> mappingsList)
{
foreach
(var fieldName
in
CustomRssOutboundPipe.FieldNames)
{
mappingsList.Add(PublishingSystemFactory.CreateMapping(fieldName, TransparentTranslator.TranslatorName,
true
, fieldName));
}
}
// list all custom fields of your custom type
private
static
readonly
string
[] FieldNames =
new
[] {
"Image"
};
public
const
string
PipeName =
"CustomRssOutboundPipe"
;
}
}
We also need a designer for the pipe so it can be visible in the dialog placed under Administration->Alternative publishing:
namespace
SitefinityWebApp.RssOutboundPipe
{
public
class
CustomRssAtomPipeDesignerView : RssAtomPipeDesignerView
{
public
override
IEnumerable<System.Web.UI.ScriptDescriptor> GetScriptDescriptors()
{
// gets the base script descriptor
var scriptDescriptor = (ScriptControlDescriptor)
base
.GetScriptDescriptors().Last();
// replaces the component type in order not to inherit the js component
scriptDescriptor.Type =
typeof
(RssAtomPipeDesignerView).FullName;
// replaces the default pipe settings with the ones of the custom rss outbound pipe
var settings =
new
Dictionary<
string
,
object
>();
var defaults = PublishingSystemFactory.GetPipe(CustomRssOutboundPipe.PipeName).GetDefaultSettings();
settings.Add(
"settings"
, defaults);
settings.Add(
"pipe"
,
new
WcfPipeSettings(CustomRssOutboundPipe.PipeName, PublishingManager.GetProviderNameFromQueryString()));
scriptDescriptor.AddProperty(
"_settingsData"
, settings);
return
new
[] { scriptDescriptor };
}
}
}
protected
void
Application_Start(
object
sender, EventArgs e)
{
Telerik.Sitefinity.Abstractions.Bootstrapper.Initialized +=
new
EventHandler<Telerik.Sitefinity.Data.ExecutedEventArgs>(Bootstrapper_Initialized);
}
void
Bootstrapper_Initialized(
object
sender, ExecutedEventArgs e)
{
if
(e.CommandName ==
"Bootstrapped"
)
{
CustomRssOutboundPipe.AddCustomRssOutboundPipe();
}
After you have created and registered your custom pipe, it is time to extend it so as it can pass the image from the custom field. As you can see, Sitefinity’s RssOutboundPipe uses the Syndication Item (http://msdn.microsoft.com/en-us/library/system.servicemodel.syndication.syndicationitem(v=vs.110).aspx) with all of its properties in order to build the RSS. As you can see this class does not build the <description> tag so we need to add it. We use the SyndicationItem.Element extensions to do so. We do a query to match the name of the syndication item with the name of the post and then pass the value of the custom blog posts field to the feed. In order to display the image properly we need to embed it in html. This is done with a CDATA section that forces the xml to ignore the html contained in it:
BlogsManager blogMan = BlogsManager.GetManager();
var blog = blogMan.GetBlogPosts().Where(b => b.Status == Telerik.Sitefinity.GenericContent.Model.ContentLifecycleStatus.Live).ToList();
foreach
(var oneblog
in
blog)
{
if
(item.Title.Text == oneblog.Title)
{
var Field = oneblog.GetValue(
"RSSImg"
);
item.ElementExtensions.Add(
new
XElement(
"description"
,
new
XCData(@
"<img src="
""
+ Field + @
""
""
+
" />"
+
"</div>"
+ content +
"</div>"
)));
}
}
As you can see I have named my custom field RSSImage. You can name yours as you like, but remember to pass it correctly in the GetValue extension method.
Steps to set the sample:
View all posts from Ivan D.Dimitrov on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Learn MoreSubscribe to get all the news, info and tutorials you need to build better business apps and sites