dnnstuffadmin posted on March 03, 2010 01:31
Introduction
For those of you not familiar with the
jQuery Featured Content Slider skin for the
Aggregator module,
it's a new skin that is included with Aggregator 6.0+ and converts
either tabs you create or an RSS feed into a very nice content slider.
I created the content slider template after I saw a
similarly named tutorial. It's probably easiest to
view the demo
before going further. When you're done taking a look at the various
elements that make up the slider, come back to the article.
In this article I'm going to show you how to properly set up an RSS feed to drive the content.
Content Slider Elements
Each frame of the slider contains
common elements that are provided through the rss feed. Here is an
image that shows the elements of a pane with their corresponding rss
elements.
Caption is pretty self explanatory. This is just the title of your rss feed, which in turn is turned into the caption.
When the caption appears in the bottom section, it is used as a link to
the actual rss article. You can't see it in this image because the link
has no decoration but it's easy to see if you view the demo.
If you specify a summary in your RSS feed, then that will be used for
the text body but if you leave that out it will use the rss item body.
Using a summary each time is the best way to keep the text to a
manageable size for the bottom body section.
RSS Setup
The biggest hurdle in setting this up correctly is providing the
proper image size (400x250) and making sure the image is included as an
attachment to the rss item, not embedded in the body of the rss item
itself. In the
Ventrian News Articles module
(which I use and highly recommend) setting all this up is relatively
simple. In the News Articles Admin Options, set the Syndication
Enclosure Type to 'image'. The Ventrian News Articles module that I set
up to run the jQuery Featured Content Slider is
located here.
In my case I am using this article module to run a number of different
demos on DNNStuff, so for the featured content slider I have set up a
category especially for that and limited the rss feed to the first 4
items because that is the limit of what the content slider will
display. The url for the actual rss feed is,
http://www.dnnstuff.com/DesktopModules/DnnForge%20-%20NewsArticles/Rss.aspx?TabID=390&ModuleID=1215&MaxCount=4&CategoryId=29.
If you view this rss feed in your browser you should see the elements
that make up the feed with the images as enclosures. There is nothing
stopping you from using a different rss feed source to drive this, just
make sure it creates the proper enclosures.
Try it yourself
If you want to try this yourself with my feed,
please go ahead. You can either use either the registered or trial
version of Aggregator for this. Just add a new Aggregator to the page,
enter the above rss feed url into the rss section in Aggregator
settings, and then change the style of the Aggregator to the
jQueryUI/Featured Content Slider selection and save. By default, the
content slider doesn't rotate but you can easily set that in the skin
settings tab in Aggregator settings.
What would you like to see?
The jQuery Featured Content Slider
is just a sample of what can be done with the template engine
integrated into Aggregator. I created the RSS feed feature for the
City of East Lansing so they could implement a similar content slider on their home page. The entire
'News' and 'Around Town' module is created using the Aggregator module.
So what other demos, tabs or content templates would you like to see?
Have you seen something 'out in the wild' that you'd like to see
demonstrated in Aggregator? Send me an email at support@dnnstuff.com or
post your comments below.