Drupal Theming

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.

Build An Aggregation Site With Drupal (Part 2)

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

Step 0: Before we start
There is currently one flaw in the SimpleFeed module which we need to correct before continuing. Sometimes taxonomy terms are not assigned automatically to aggregated items, which will stop our site from functioning properly. You can find a more detailed discussion about this issue here.

The good news is that it has been fixed in both the 5.x and 6.x branches and is easy for us to correct :)

Just download the new Drupal 5 version of the updated simplefeed_item.module file from CVS and save it over your current simplefeed_item.module file which you will find in your SimpleFeed module folder (sites/all/modules/simplefeed/simplefeed_item.module).

Step 1: Cron
Adding cron functionality to an aggregation site is pretty crucial because without it our content will not auto-update. We could technically update our feeds manually but that would be a very tedious process, so cron is definitely the way to go!

Build An Aggregation Site With Drupal (Part 1)

This tutorial will be split into three parts - part 1 (this part) will explain how to set up the aggregation and import feeds, part 2 (to be published next post) will explain setting up cron to handle auto updating the feeds and will also cover using views to create some different site sections, and part 3 (to be published the post after that) will explain how to theme everything. In the tutorial I will be building a Drupal based sports news aggregation site, but you can obviously tailor this to whatever type of news items you'd like.

The goals:

  • Create an aggregation site which aggregates RSS feeds and outputs them in river of news style pages with the most recent news items first.
  • Create some different site sections (football and baseball) which only show news items related to that topic.
  • Allow users to filter news items by source (e.g. ESPN, BBC etc.).
  • Create RSS feeds of our aggregated pages which are available for our users.

You can check out the finished aggregation site (part 1 + part 2) here.

The set up:
For this tutorial I'll be using the following:

  • A clean install of Drupal 5.10 (using Garland)
  • SimpleFeed 5.x-2.2
  • Views 5.x-1.6

Drupal + PHP - How To Auto-Truncate Content At The End Of A Word

The problem:
Whilst working on an aggregation site recently I needed to find a way to truncate the length of aggregated posts so that they only showed the first 200 or so characters of the post. However, I also wanted the split point in the post to occur at the end of a whole word, as opposed to part way through a word, and add some visual indication that there was more still to read.

The solution:
I'll first show the entire solution and then walk through how it works afterwards.

In your theme's node.tpl.php file the node content will most usually be output using code similar to:

<div class="content">
  <?php print $content ?>
</div>

Find this code and replace it with the following code (minus the opening and closing php tags which are just used here to improve the formatting):

<?php
<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>
?>

Drupal - How To Create A Double Contact Form Page

Just a quick tip here:
If you want to create a double contact form page, like my own contact page, it's easy enough to do:

  • Step 1
    Use the webform module to create the two contact forms. Webform allows you a great degree of customisation over forms and, crucially, it creates its webforms as nodes. This will be important for step two.
  • Step 2
    Now we have the webform contact forms as nodes we can use the panels module and position both of our nodes on the same overall page. To do so, create a new panel (admin/build/panels/add) and choose the default two column layout. Then just place the first webform node in the left hand side and the second webform node in the right hand side.

--------------------------
UPDATE:
This tip was done using Panels v1.
If you are using Panels v2 please check out comment #3 below as it's a little different.

Drupal Theming Links On Drupal.Org

A couple of days ago I was contacted by a reader asking if I could provide them with links to some other sites like My Drupal Blog. Well, whilst I subscribe to a couple of Drupal related blogs I usually just keep an eye on Planet Drupal for all the latest goings-on.

However, there is also a lot of great theming stuff to be had on drupal.org itself, although sometimes trying to find that stuff can be a little unwieldy.

So, the following is an attempt to bring together a list of links to Drupal theming resources specifically on drupal.org. There are obviously thousands of forum pages relating to specific theming issues, so this list is meant as a general overview of the more major Drupal theming pages on drupal.org. If you have any other suggestions be sure to add them in the comments, and I'll append the list as necessary.

Drupal.org (general)

Drupal.org (groups)

My Drupal Blog Is One Year Old

Well, it seems I was so busy with the redesign launch and sorting out Kupo that I clean forgot My Drupal Blog has just turned one - aaahh.

I want to say a massive thanks to everyone for reading, commenting on, and linking to the blog - it has been great to write about, and get your feedback on, all things Drupal theming over this past year.

To give you a few stats about the blog:

Anyway, thanks again and I look forward to the next year :)
Laurence.

Testing Needed For New Drupal Theme 'Kupo'

I will soon (hopefully within the next 2-4 weeks) be releasing Kupo. This will be my first publicly available Drupal theme via drupal.org.

I know that testing of Drupal themes and modules is generally an iterative process which happens once the theme or module is available for download, but thought that it made sense to catch any blatantly obvious problems before an initial release.

So, please feel free to click around the new theme and let me know what you think and/or find.

Lhmdesign Redesign Write Up

So, as promised, here's the full write up on the Lhmdesign redesign. I'll cover the whole site, but focus mainly on the blog section as it incorporates the more complex setup and theming.

Firstly, then, a few details:

  • I built the site in Firefox, with frequent use of the ever awesome Firebug extension.
  • IE7 corrections were handled using conditional comments placed in the page.tpl.php file.
  • IE6 fixes were handled via a secondary style sheet - a process which I outlined previously here.
  • Safari and Opera corrections are a straight up hack:

    @media screen and (-webkit-min-device-pixel-ratio:0) {
      #divid {
        rules: here;
      }
    }

  • Blog posts are story nodes which, by default, are promoted to the front page and have comments enabled.
  • Blog post tags are a vocabulary (admin/content/taxonomy/add/vocabulary).

The entire site is built on Drupal 5.7. I would have liked to build it on 6.x, but a number of the contributed modules used don't yet have 6.x support, so for now it's 5.7 all the way.

And speaking of modules (smooth eh ;) the ones I've used (excluding core required modules) are:

LHMDESIGN MY DRUPAL BLOG
Core optional: Contributed: Core optional: Contributed:
Color Dynamic Rendering Color Code Filter
Comment Global Redirect Comment Comment RSS
Help Meta tags Help Dynamic Rendering
Menu Panels Menu FeedBurner
Pathauto Path Global Redirect
Token Ping Insert View
Webform Search Meta tags
Taxonomy Pathauto
Service Links
Spam
Switchtheme
Views

THEMING:

Due to the site being built on Drupal 5.7 the theme is also tailored for Drupal 5.x, so just be aware that all following references are as such.

Lhmdesign Redesigned!

After a few weeks of tinkering, I am pleased today to launch the newly redesigned Lhmdesign.

I'll be posting a detailed explanation of the site's construction (particularly the theming :) in a couple of days time, so please stick any questions you have about the new site in the comments.

Thanks!