We have been working on making several updates to our homepage to make it more “social media” aware. We have integrated Facebook, added links to all our social media sites, and made a few other tweaks. Our final step was to add stories from the RC News Blog to the the “Campus News” section of our homepage. The RC News Blog is a WordPress blog that is hosted separately by Dreamhost.

The major challenge with this project was that we wanted to have a thumbnail image included with the story, the default WordPress RSS feed does not include images. I will talk about what we did in two phases, one if you want to incorporate the native RSS feed without images. And the second where we used some Coldfusion parsing to create a new feed that had the image.

Here are the steps:

Phase 1:

1. Find your blogs RSS feed, you should be able to click the orange RSS feed icon on your browser. Our link was http://www.rcnewsblog.com/?feed=rss2
2. Add an “Insert Component” to your page. You will need to edit the schema and create a new page. This is how ours looked:
   
   Make sure you select Well Formed = Yes and Extract HTML Boyd = NO
3. You will have access to the XML, like this:
   

4. Just match on all the “Items” starting with HTMLInsert/rss/channel/

Phase 2:

Since we wanted to use the thumbnail we had to use Coldfusion to parse the RSS and create a new file with resized jpgs. This is what the new XML looked like. Notice the thumbnail element.

You can see the raw XML at: http://webapps.roanoke.edu/xmlfeeds/rcnewsfeed.cfm

To get the image file to show in the RSS feed we used a plugin called “Get the Image,” It adds some media tags to your RSS:

<media:thumbnail url="http://roanoke.edu/images/iphone/iphone2.jpg" />

<media:content url="http://roanoke.edu/images/iphone/iphone2.jpg" medium="image">

<media:title type="html">Post image for RC Mobile site featured on “Best of” list</media:title>

</media:content>

Once we have the XML with the thumbnail image that we wanted and had it sized properly, we just have to make the template match (I am glossing over alot of the Coldfusion parsing here, if there is interest I can blog about that, too). Note that we are showing regular news stories first, then blog stories second on our Campus News section of the homepage. We also append “[Blog Article]” to the title since we wanted users to understand that they would be going to a different site.

Here is the XSL.

Template call:

<div id="campus-news">
    <h2>Campus News <a href="x27021.xml" class="view-all">More News</a></h2>
    <ul class="news-list">
        <xsl:apply-templates select="Page" />
        <xsl:apply-templates select="BlogFeed/stories" />
    </ul>       
</div>

And the match: 

      <xsl:template match="HomePage/NewsEvents/BlogFeed/stories">
            <xsl:apply-templates select="item" />
        </xsl:template>

        <xsl:template match="HomePage/NewsEvents/BlogFeed/stories/item">
             <li class="has-thumbnail">
                <a href="{link}"><img src="{thumbnail}" alt="{title}" style="width: 53px;" class="thumbnail" /></a>
                <h3><a href="{link}"><xsl:value-of select="title" /> [Blog Article]</a></h3>
                <p><xsl:value-of select="description" disable-output-escaping="yes" /></p>
            </li>
        </xsl:template>

This is what the final output looks like, with the news stories, then the two blog articles. Of course you can see it live at http://roanoke.edu

Let me know your thoughts, and how you are using WordPress with your CMS in the comments.

{ 0 comments }