New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


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"])

The first parameter of this method is a regular expression to isolate the text you wish to replace, and the 2nd, the new text to replace it with. An optional 3rd parameter lets you limit the operation to a specific field within each RSS entry, with the valid keywords being:
  • "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