Build An Aggregation Site With Drupal (Part 3)

Previously...
In Build An Aggregation Site With Drupal (Part 1) and Build An Aggregation Site With Drupal (Part 2) I covered setting up the foundation of your aggregation site using Drupal and SimpleFeed and then using cron to auto-update content and views to create the site sections and RSS feeds for our content.

In this third part of the series I'll look at theming the news items, and finally in part 4 some extra touches including filtering options for our users. You can check out the finished aggregation site (parts 1, 2, and 3) here.

Step 1: Set up the new theme
So far during this tutorial series I've been using a clean install of Drupal with the default Garland theme enabled.

Now that we'll be making various changes to the site's theme it's best to set up a new version of Garland in your site's sites/all/themes folder which you can then enable and edit instead of the default Garland theme (which is located at themes/garland) thus keeping the original Garland theme intact.

To do this:

Create a new folder called 'themes' inside of your site's 'sites/all' folder, so that you end up with a folder structure like so 'sites/all/themes'
Copy the entire original Garland theme folder (called 'garland') which is located in your site's 'themes' folder and paste it into the newly created 'sites/all/themes' folder
Rename the copied folder to 'aggregation'
Log in to your site and navigate to the main 'Themes' section (admin/build/themes)
Enable the 'aggregation' theme, set it as the default and save

Drupal - aggregation site folder structure
Drupal - aggregation theme enabled and default

Step 2: Gather the news source icons
As part of the styling in Step 4 (below) we'll use the favicons from the news sources whose feeds we aggregate within the feed item nodes to add some more visual interest.
So, we need to gather these from the various feed sources. In this case, we have three main sources and, therefore, three favicons:

BBC

file name - bbcicon.png
ESPN

file name - espnicon.png
MLB.com

file name - mlbcomicon.png

Once you have collected the favicons (which should be 16px x 16px in size) place them in your theme's images folder - 'sites/all/themes/aggregation/images' - ready for Step 4.

Step 3: Override the news item layout with node-feed_item.tpl.php
In order to make our aggregated news items more appealing we're going to override their layout using a template override. In this case, this is basically just a file which we will place in our theme folder that targets certain types of nodes. When it finds the type of node it's looking for Drupal overrides the node's output (which by default is controlled by the code found in node.tpl.php) with the new output (in this case, the code found in our node-feed_item.tpl.php file).

So to do this:
First create a new PHP file in your 'aggregation' theme folder and name it 'node-feed_item.tpl.php', so that you have a folder structure like so: 'sites/all/themes/aggregation/node-feed_item.tpl.php'.

Now copy the following code and paste it into the 'node-feed_item.tpl.php' file:

<div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?> <?php print $node->type; ?>" id="node-<?php print $node->nid; ?>">
  <?php if ($page == 0): ?>
    <h2 class="title">
      <a href="<?php print $node_url ?>"><?php print $title ?></a>
    </h2>
  <?php endif; ?>
  <div id="news_info">
  	<span class="taxonomy"><?php print $terms ?></span>
    <p class="date"><?php print format_date($node->created, 'custom', "l jS F, Y @ g:ia"); ?></p>
  </div>
  
  <div class="content">
  <?php
  $mywords = explode(" ", $content);
  $finalstring = "";
  foreach($mywords as $word) {
    if(strlen($finalstring) <= 197) {
        $finalstring = $finalstring . " " . $word;    
    } else {
        $finalstring = $finalstring . " <strong>[...]</strong>";    
        break;
    }
  } 
  echo $finalstring;
  ?>
  </div>
 
  <?php if ($links) { ?>
    <div class="links">
      <?php print $links ?>
    </div>
  <?php } ?>
  
</div>

You should now see a few changes to the aggregated feed items' layout. Basically, we did four main things within this override file:

Moved the taxonomy term from the bottom right corner to just below the title. We will theme this further in step 4 (below).
Changed the date format from something like "Tue, 08/19/2008 - 18:57 - admin" to "Tuesday 19th August, 2008 @ 6:57pm". This makes it more readable and also removes the information about who published the node (admin) which is not really necessary for an aggregation site.
Made sure that our node's content will auto-truncate (stop) after roughly 200 characters. This keeps our nodes compact and helps to ensure that we do not get in to hot water with regards copyright infringing those people whose feeds we aggregate. This is particularly the case where people publish full posts in their RSS feeds ;) For those that are interested you can check out a discussion on other truncation methods in a previous post - auto-truncating content at the end of a word.
Added a class of 'feed_item' to all feed item nodes. This will be useful for targeting our CSS in step 4 (below).

Step 4: Add styling in style.css
OK, now that we've got everything in place let's add some styling. To do so, open your theme's 'style.css' file (sites/all/themes/aggregation/style.css) and scroll down until you find the section marked:

/*******************************************************************
 * Color Module: Don't touch                                       *
 *******************************************************************/

Directly above that commenting add the following:

/************************************************
 * Build An Aggregation Site With Drupal (Part 3)
 ************************************************/

.feed_item .taxonomy ul.links li {
	margin: 0;
	padding: 0 0 5px 25px;
}
.feed_item .taxonomy ul.links li a {
	font-weight: bold;
}
.taxonomy li.taxonomy_term_1, .taxonomy li.taxonomy_term_2 {
	background: url(images/bbcicon.png) no-repeat 0 0;
}
.taxonomy li.taxonomy_term_3, .taxonomy li.taxonomy_term_4 {
	background: url(images/espnicon.png) no-repeat 0 0;
}
.taxonomy li.taxonomy_term_5 {
	background: url(images/mlbcomicon.png) no-repeat 0 0;
}
.feed_item h2 {
	margin: 0 0 5px 0;
}
.feed_item .taxonomy {
	float: left;
	padding: 0 10px 0 0;
}
.feed_item .content {
	margin: 0;
	padding: 10px 0 0 0;
}
#news_info {
	color: #6d6d6d;
}
#news_info p {
	margin: 0;
}
.feed_item div.links ul.links li {
	padding: 0;
}
.feed_item li a.simplefeed_item_parent {
	display: none;
}
.feed_item li a.simplefeed_item_url {
	border-bottom: 1px dotted #333;
}
.feed_item li a.simplefeed_item_url:hover {
	border-bottom: 1px dotted #fff;
}
.feed_item li a.node_read_more {
	display: none;
}

Everything should now be nicely styled in your feed items.

Finished (Part 3)
We now have a fully functioning, neatly styled aggregation site running on Drupal. In the final part of the series (part 4) I'll look at a couple of extra bits you can do with the site including adding some filtering functionality for your users.

Also in this series

Build An Aggregation Site With Drupal (Part 1), where we set up the foundation of our aggregation site
Build An Aggregation Site With Drupal (Part 2), where we setup cron to auto-update content, and views to add site sections and RSS feeds

Bookmark/Search this post with: