plainblack.com
Username Password
search
Bookmark and Share

Custom RSS Displays

A really nice feature that was introduced into WebGUI was the addition of RSS feeds from Collaboration Systems. These are great ways to get headlines and even content from your Collaboration Systems into other websites, but it can also be used on your own site. In this chapter, a basic Collaboration System will be combined with WebGUI's Syndicated Content feature, and then a custom template will be created to make it look nice.

 

The Pieces

 

There are many reasons why you might do this, a common one being to have a little news blurb on your front page that pulls articles from the collaboration system. This will demonstrate some neat little effects to make this all happen smoothly and seamlessly.

 

To be able to pull this together, there are several pieces that will work in concert: a Collaboration System, an RSS Feed from that collaboration system, and finally a Syndicated Content asset.

 

A Collaboration System

 

 

If you have been using WebGUI, you certainly have used a Collaboration System. They are a fantastic way of letting your users submit posts, files or news to one central location. They also are extremely customizable, serving as a platform to accomplish many different types of projects.

 

As mentioned earlier, any Collaboration System can also be turned into an RSS feed. It's actually amazingly simple to do, and very useful. There is only one real limitation here, and that's that not all of the information from a post is actually carried to the RSS feed.

 

Take a look at what actually does get put in.

 

 

Five pieces of data are carried over from whatever Collaboration System you use:

 

  • The Collaboration System's title

  • The URL to the Collaboration System

  • The title of each post

  • A link to each post

  • The post's summary

 

For this example, all of these pieces of data won't actually be used, but it's good to know what is available. This example will just use the title for the post, the link to the post, and a customized template to grab those values and insert them into the Syndicated Content asset.

 

Syndicated Content

 

 

The last piece is the Syndicated Content asset, which will grab the RSS feed from the site and display it. The custom template is going to control the look and feel of these posts and headers, but there are additional options to further customize it.

 

First things first though. An RSS feed needs to be enabled for the Collaboration System.

 

Enabling RSS

 

The first step in all of this is to enable RSS. This is a very simple feature found in any Collaboration System (CS), which can turn any CS into a feed. All you need to do is find the Enable RSS option under the display menu when you edit a CS and just like that you have an RSS feed.

 

RSS Radio Button

 

 

Enabling this option then creates a new object in the asset manager, which is the RSS feed asset.

 

Note: Because the RSS feed is an actual asset in WebGUI, it can appear in your navigation system. You may want to consider changing some of your navigation settings so this doesn't happen.

 

RSS Asset

 

 

The object has been created, but more is needed. You also need to know what its URL is. This is going to be important once the Syndicated Content asset is in place.

 

RSS URL

 

 

Make sure you copy the URL to the clipboard. It'll be important.

 

Bringing in the Syndicated Content

 

You have a Collaboration System, you've enabled RSS and you've gone ahead and copied the URL of that RSS Feed. You now have to actually create a Syndicated Content asset to take advantage of that feed. Syndicated Content is an option in the New Content menu, just like everything else you would place on a page in WebGUI.

 

 

Once you've selected the asset, you'll need to fill out a few settings. There are actually very few to worry about, which makes this asset incredibly easy to use and very powerful.

 

Note: Remember to check WebGUI Help for additional settings for all assets. The custom template used here will not actually take advantage of some of the settings that are available. You should fee free to dig into some of the additional variables to really customize the look you're going for.

 

Syndicated Content Settings

 

 

  • URL to RSS File: This is the main thing you're concerned with. Remember earlier it was stated that you'll want to copy the URL to your computer's clipboard. Here is where you're going to want to put it.

 

  • Process Macros in RSS URLs: It's possible to pass some WebGUI macros through the RSS's URL's. This option enables/disables that feature.

 

  • Maximum Number of Headlines: You can dictate how many titles will display.

 

  • With any of these terms: An incredibly useful feature, this acts as a filter showing only titles or summaries that have the word, or words, listed in this field.

 

  • Display Mode: There are two options available in this drop-down: Interleaved and Grouped by feed. To quote the text above:

 

 

"'Interleaved' means items from all feeds are lumped together. 'Grouped by Feed' means items are grouped by the feed they came from. Either setting is fine if you're only bringing in a single feed.”

 

Interleaved is used for this example. Once the settings are saved, this is the result.

 

 

Custom RSS Template

 

So how do you go from the example above to this?

 

 

With just a customized RSS template, of course! It's very easy to set up compared to other templates.

 

The Template Code

     

    <a name="id<tmpl_var assetId>" id="id<tmpl_var assetId>"></a>
    <tmpl_if session.var.adminOn>
        <p><tmpl_var controls></p>
    </tmpl_if>

     

  1. As always, the template begins with this code. Without it, there wouldn't be any controls when admin mode is turned on, and there wouldn't be an anchor tag for this asset allowing someone to target this specifically.

 

This is the custom template, and you can do whatever you want, but it's just a good idea to keep the first line, and it's essential to keep the rest.

 

 

<a name="id<tmpl_var assetId>" id="id<tmpl_var assetId>"></a>

<tmpl_if session.var.adminOn>

<p><tmpl_var controls></p>

</tmpl_if>

 

 

<div class="synContent">

<tmpl_if description>

<tmpl_var description>

</tmpl_if>

</div>

 

 

  1. Now, draw the wrapper <div> tag, as well as a quick test to see whether or not someone has entered a description in the Syndicated Content's description field. If not, nothing will show up above the rest of the template.

 

 

<

a name="id<tmpl_var assetId>" id="id<tmpl_var assetId>"></a>

<tmpl_if session.var.adminOn>

<p><tmpl_var controls></p>

</tmpl_if>

 

 

<div class="synContent">

<tmpl_if description>

<tmpl_var description>

</tmpl_if>

 

<h2 class="synHeader">

<tmpl_if channel.link>

<tmpl_var channel.title>

<span>

[<a href="<tmpl_var channel.link>">

Get More

</a>]

</span>

<tmpl_else>

<tmpl_var channel.title>

</tmpl_if>

</h2>

</div>

 

 

  1. The lines beginning with h2 indicate that this is going to be the header (<h2> tag).

     

The templ_if and templ_else lines indicate a logic test. Look to see if there is a link associated with the particular RSS that's being fed. If there is, it draws a link to that channel along with its title. Otherwise, it just draws the title.

     

Finally, the other lines are the actual lines that are drawing the text. The first group is if a link is actually included, the second group is if there isn't one.

 

 

<a name="id<tmpl_var assetId>" id="id<tmpl_var assetId>"></a>

<tmpl_if session.var.adminOn>

<p><tmpl_var controls></p>

</tmpl_if>

 

 

<div class="synContent">

<tmpl_if description>

<tmpl_var description>

</tmpl_if>

 

<h2 class="synHeader">

<tmpl_if channel.link>

<tmpl_var channel.title>

<span>

[<a href="<tmpl_var channel.link>">

Get More

</a>]

</span>

<tmpl_else>

<tmpl_var channel.title>

</tmpl_if>

</h2>

 

<table class="synContent">

<tmpl_loop item_loop>

<tr>

<td style="vertical-align:top">&bull;</td>

<td style="vertical-align:top">

<tmpl_if link>

<a href="<tmpl_var link>"><tmpl_var title></a> &raquo;

<tmpl_else>

<tmpl_var title>

</tmpl_if>

</td>

</tr>

</tmpl_loop>

</table>

</div>

 

 

  1. And now, the final piece. The text in bold is actually what gets drawn on the page. You'll see there is a simple two-column table here. One column holds the orange bullets, the other holds the titles/links. There isn't a particular reason to go with a table instead of a bullet list. Feel free to experiment.

 

The tmpl_loop text near the top and bottom of the bold text is noting the loop that is going through each one of the RSS feed items. Everything between those tags will be repeated for each one.

 

Finally, a logic test sees if a link is associated with the title. If so, it draws the title as a link. Otherwise, it merely draws it as a title.

 

As a side note, there is a little bit of CSS that has been put into the head block of the template, but it has no serious bearing on the template, it just is making it look “pretty.” For your reference, it is displayed below.

 

CSS For Template

 

 

.synContent {

font-weight:bold;

margin-left:30px;

color:orange;

font-size:15pt

}

.synContent a {

color:#598BFF;

font-size:14px;

}

.synHeader {

color:#20456a;

vertical-align:middle;

}

.synHeader span {

font-size:10px;

font-weight:normal

}

.synHeader a {

color:#598BFF;

text-decoration:none;

}

 

 

Displaying What You Want

 

Just to have a little fun, since this is basically the preview area for other content on the site, you could even narrow down what you want displayed. All you have to do is enter in a value in the “With any of these terms” field.

 

For example, maybe you would only want to display news articles that are somehow related to “community”. You would simply put the word “community” into the “With any of these terms” field and click save.

 

Narrowing it Down

 

Enter “community” into the “With any of these terms” field and click save.

 

 

And just like that, you've narrowed down your display to only articles that have the word “community” in them.

 

 

Conclusion

 

RSS feeds are a great way to get your information out to other people's sites, but it's an equally valuable tool to use within your own site. All it takes is a little bit of template work and a smidgen of creativity, and you can come up with some fancy little headlines.

 

Be sure to play with the settings, and even the template variables. This chapter only touched on some of the ones that are available, and there are definitely more worth exploring.

 

Keywords: collaboration system CSS feeds HTML metadata RSS shortcut shortcut override syndicated content Templates

Search | Most Popular | Recent Changes | Wiki Home
© 2018 Plain Black Corporation | All Rights Reserved