Theming

Using CCK, Views and custom theming to show self-defined nodes

For one of my latest projects, I needed to create node relationships. The client wanted to create nodes ("Photos") that have a common parent node ("Series").

I was contemplating to use OG, as it's are real powerful module, but decided against it, as the requirements were much smaller. Instead, I decided to use the node_reference field that's part of CCK to create relationships, which works like a charm. I didn't run into the problem that these relationships are just pointing in one direction. On the frontend, both items were linked with each other.

The bigger challenge was displaying the Photos in a Series. I previously used Panels for grouping several views and was attempting to do the same thing in this case. After a lot of trial&error, I decided that Panels for Drupal 6 isn't quite ready. The main reason I decided against Panels was the missing feature to use node overrides for different node types.

I was able to create a view that displays all photos in a series, using the Views preview to manually try out different Series node id's (nid). The missing piece was to display both the Series itself and the view to display related items, something that I would have liked to use Panels for. The solution to my problem was a little bit of custom theming. I created a separate template for series using a duplicate of node.tpl.php. Then, I added a function to display a view in a template file (take from here: http://api.freestylesystems.co.uk/api/function/views_embed_view/6):

<?php print views_embed_view('series_photos', $display_id = 'default', arg(1)); ?>

Let's dissect the parameters of that function:

  1. The hard-coded view name (defined by myself)
  2. The display type (I selected default, but this could also be 'page' or 'block'
  3. Arguments passed into the view ( arg(1) makes sure the view knows the nid)

Here's a screenshot of the view "series_photos":

View

Conclusion: I usually try to get around custom theming. Not because I'm too lazy to do it, but because I'd like to keep as much as possible defined in the database. This solution however worked out quite nicely with only minimal theming.

Beginners Tutorial for Views 2 Theming: Creating an alternative block for recent comments

After I got my first actual comment last night (yeah!), I wanted to add the "most recent comments" as a block in the sidebar. Drupal comes with a block for that purpose, but I wasn't happy with the way the block displayed the comments. I remembered that I very much liked the way Typepad displays comments (e.g. like this on a friends blog).

I wanted to display the name (linking to the person's homepage), the word "comment" (linking to the actual comment), the title of the story (linking to the story itself), and the date. So in toto, something like this: "Daniel Hanold added a comment to Story Name X (5 days ago)".

Obviosuly, I created a view that displays comments that were recently created. I attached that view to this story for reference. However, I couldn't get the ouput of that view to display what I wanted. First of all, all the labels were added before the data and were followed by a colon. Views theming, here I come. Usually, there's tons of great documentation and examples for pretty much any module. For views theming however, I didn't find anything that explained the concept well and gave some easy to understand examples, so here's a tutorial to the easiest possible theming of a view output.

Like I said, the output I wanted was "Daniel Hanold added a comment to Story Name X (5 days ago)". The output views gave me by default was "added a: Daniel Hanold to comment Story X 5 days ago". Using views theming, I wanted to do a couple of things:

  • Remove the colon
  • Have the label show up behind the data
  • Add parenthesis around the date

To do that, go to your view and click on "Theme: Information". This gives you a lot of theming information about all the things you can theme. Since this is going to be a basic tutorial, I'll only talk about the row style output of the data fields.

On this page, you can find one link that's called "Row style output". With a file such as views-view-fields--stories-recent-comments.tpl.php (this goes into your theme directory), you can style the general output of all fields of this view. Using that template, I was able to remove the colon and have the labels show up behind the data fields. I attached this file for reference as well. The one remaining thing was adding parenthesis around the data. With a file called views-view-field--stories-recent-comments--block--timestamp.tpl.php, you can style the output of just that one data field, in this case the date (see attached file).

Upload those two files to your server, go back to your view, click on "Theme: Information" and then click on "Rescan template files" for the new templates to be activated. After you've added all those steps, you have a nice "recent comments" block that looks like this:

Recent Comments Example

Syndicate content