you can also alter the order in which
the various fields appear via the definetemplate()
method, and do a search and replace of text inside any of them via
addregexp()
. Together they enable you to reorganize and modify your RSS
entries' data as you see fit before they are shown to your visitors.
Customizing the display order of the rss entry's fields
Lets see how you'd reorganize the position of the various fields within your RSS entries when they are shown. By default they are shown in the following order:
Such a display works fine in standard situations, but there are certainly
instances where it doesn't. To shuffle the position of each entry's fields, call
the method definetemplate("template_string")
inside your
initialization code. The default "template_string
" value that's
used if this method isn't invoked explicitly is:
"{title} {label} {date}<br />{description}"
As you can see, it corresponds to the default output of the entries as shown
above. To change up the order then, simply shuffle the order of the field
keywords as they appear inside the string. The keywords that represent the
various entry fields you can use inside definetemplate("template_string")
are:
- {url}
- {title}
- {label}
- {date}
- {description}
The {url} keyword is a special one that lets you display the destination URL from that found inside {title} on its own anywhere in your output, such as to use it to hyperlink the {description} field.
"<a href="{url}">{description}</a>"
With the above string each of your RSS entries would simply consist of the description portion of the entry, hyperlinked to the entry's destination URL.
Your template string can also include additional, arbitrary HTML to format
the output exactly the way you want, such as removing the <br /> tag, wrapping
certain fields in DIV tags etc. The following uses the
definetemplate("template_string")
method to display
the following
RSS feed, which has the below entry structure:
<item>
<title>Spinning
icons using CSS3 transform</title>
<link>http://www.dynamicdrive.com/style/csslibrary/item/spinning_icons_using_css3_transform/</link>
<description><img
src="http://www.dynamicdrive.com/cssexamples/spinningicons.gif"
/></description>
<dc:date>2011-12-28T13:13:00-08:00</dc:date>
</item>
so the output consists of the description field first, followed by a <br /> tag, followed by the title field. Furthermore, we're going to hyperlink the description field. The result looks like this:
To do this, we call the
definetemplate("template_string")
method as highlighted in red
below inside the initialization code.
<script type="text/javascript">
var newcss=new gfeedfetcher("newcss", "", "")
newcss.addFeed("CSS Library", "http://www.dynamicdrive.com/style/csslibrary/rssimages/")
//Specify "label" plus URL to RSS feed
newcss.displayoptions("date description") //show the specified additional fields
newcss.definetemplate("<a href='{url}'>{description}</a><br
/>{title}")
newcss.setentrycontainer("div", "eachentry") //Display each entry as a
DIV (div element)
newcss.filterfeed(5, "date") //Show 5 entries, sort by date
newcss.init() //Always call this last
</script>
To get the entries to display side by side, we simply style the appropriate CSS classes that get automatically added to the output:
<style type="text/css">
#newcss{
overflow: hidden;
}
#newcss .eachentry{
float: left;
background: lightyellow;
width: 150px;
margin-right: 50px;
}
#newcss .eachentry img{
border: 1px solid black;
}
</style>
search and replace text within each RSS entry
Besides rearranging the position of the fields within each RSS entry, you can
also perform a search and replace inside them to actually manipulate what gets
shown and what doesn't. This is incredibly powerful, and sometimes crucial for
being able to show a feed the way you need it to. This is done with another
method, addregexp()
:
instance.addregexp(RegExpLiteral, "replacement_text",
["targetfield"])
- "titlefield"
- "labelfield"
- "datefield"
- "descriptionfield"
If the 3rd parameter is omitted, the operation will occur inside all of the above fields.
Lets say the description field of your RSS
entries contain the "[CDATA[
"
and "]]
" tags wrapped around it that's showing up in the
output. To remove them, you can call addregexp()
in such a
manner:
instance.addregexp(/(\[CDATA\[)|(\]\])/g,
'', 'descriptionfield')
The first parameter is a standard
JavaScript regular expression that basically detects the presence of
either "[CDATA[
" or "]]
" in the description
fields, with the 2nd parameter specifying that they should be replaced
with an empty string instead. The 3rd parameter limits the search and
replace to just the "description" field. Now, if your other
fields also contain the "[CDATA[
" tag, you can expand the
operation to all fields by leaving out the 3rd parameter inside addregexp()
:
instance.addregexp(/(\[CDATA\[)|(\]\])/g,
'')
Here are two different output for
this RSS feed, the first
without invoking addregexp()
to perform the above search and
replace, the 2nd, with:
Output WITHOUT call to addregexp() | Output with call to instance.addregexp(): |
In the second displayed set, we can see that all of those pesky "[CDATA[
"
tags are now gone thanks to addregexp()
.
You can call addregexp()
multiple times in your initiation code to apply multiple search and
replace operations. Continuing with the same RSS feed above, lets find
all occurrences of the word "script" inside the "description" field, and make it
bold and red:
dhtmlfeed3.addregexp(/(\[CDATA\[)|(\]\])/g,
'', 'descriptionfield')
dhtmlfeed3.addregexp(/(script)\b/ig, '<b style="color:red">$1</b>', 'descriptionfield')
The second call to addregexp()
scans for "script" as it appears as
a word (using the \b flag), with the search being global and case
insensitive (ig flag). It then replaces that with a bold red version of
"script". Instead of just entering the literal string "script" as the text to
replace, we use the backreference property $1 instead. This is so we can replace
whatever variation of "script" that's found (ie: "Script", "script", "sCript"
etc) with the exact same version, just made bolder and red:
Output with multuple calls to instance.addregexp():
As you can
see, the addregexp()
method is extremely powerful in carving the
data output to your exact specifications. If you're unfamiliar with JavaScript
regular expressions, I highly recommend the following two resources to quickly
help you get up to speed:
Table Of Contents