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

Review of Appcelerator platform for Rich Internet Applications (RIA)

Appcelerator

A friend asked me to review a new platform called Appcelerator (http://www.appcelerator.com) to find out if this platform offers any benefits for my own software development. My first impression of the Appcelerator website is great. The site looks professional and very Web 2.0-oey. However, it doesn't quite look like an application platform, more like a business website selling a commercial product related to software development.

Appcelerator is a fully-integrated platform for building RIAs (Rich Internet Applications) and is powered by a bunch of capabilities, which I will describe in more detail.

Message Oriented Architecture

This part of the framework seems to be the most abstract for me, as I was expecting a description of a framework. Rather, the Message Oriented Architecture talks about Appcelerator applications that communicate via messages. This architecture works with a message broker and service broker that work with Java, Ruby, PHP, .NET, Python and Perl. I'm confused by the example given on the documentation page, as I can't see how this example extends to the usage of this architecture in an application. To be quite honest: This is where Appcelerator kinda lost me. But moving on.

Web Expression Language

The goal of this language is to make the visual and interaction design relatively simple. It works with several custom "set" attributes (control, behavior, layout, theme). Appcelerator provides a number of nice features for different user interactions. As I work with JavaScript and jQuery, I'm hesitant to learn this new language, as I'm not sure what additional features I'll get out of it.

Widget Framework

Widgets are small applications based on JavaScript. There's a number of existing widget created by the Appcelerator team. The platform is extendable and developers can create their own widgets. Speaking in Drupal terms: widgets are modules that extend the core of the Appcelerator platform.

Conclusion:
On the plus side, it's great to see that the Appcelerator platform technically works with all programming languages. Being a Drupal developer, I am comparing Appcelerator to Drupal, so the programming language compatibility isn't that relevant for me, as I'm more interested in the feature set and how easy it is to use the platform to build applications.

In order to build an application, I really appreciate the fact that Drupal offers a platform with all core features I need: nodes/content, categories, users, application-based permissions. Rebuilding these key elements for an application usually takes the largest chunk of time. I don't see how the message oriented architecture adds to building that "core" of any application. I like the Web Expression Language for what it is: A language that gives you nice user interface effects. I'm skeptical, as this language doesn't seem to extend the "feature" set of jQuery. The concept of an extendable platform that works with widgets is great, but the number of existing widgets is small compared to the availability of Drupal modules.

The main reason why I'd chose Drupal over Accelerator is the fact that while I was doing some research on Google, I hardly found any documentation, code snippets or developer discussions about Appcelerator other than on their own sites. As a developer, it's crucial to me to be able to learn from others. The main point of choosing Appcelerator is to develop applications faster. While this might be true for adding features that are currently covered by an existing Appcelerator widget, I am skeptical if Appcelerator would contribute to delivering a rich application faster considering a potentially steep learning curve and little online documentation.

Hope

Barack Obama

Aggregate your online activites on your Drupal site using Activity Stream

Activity Stream

One of the things that I love about Facebook is the fact that all my online activities show up as part of my "Facebook Status Updates". Wouldn't it be great to have all those updates available in Drupal? I recently came across a module called "Activity Stream", which offers a Drupal aggregator pulling in updates from Delicious, Digg, Flickr, Last.FM and Twitter. Besides the big 5, it also offers a custom feed option that I haven't tested yet.

Installation of this module was really simple. This module comes with a core package and 6 sub-modules, one for each service (and custom feed). According to the Activity Stream online documentation, those modules can be easily extended in case you're looking to display items from a different service than the one already provided.

The display of feed items looks decent from the get-go. My visual design preference is more organized, so I applied the following style tweaks to the get the items to show up as displayed in the image below. You can just add these lines to your style.css file of your theme:

#activitystream .item-list ul li{
background:transparent none repeat scroll 0 0;
line-height:1.23em;
margin-top:7px;
padding:0;
}
#activitystream .item-list ul li img{
float:left;
margin-right:5px;
}

Comprehensive SEO Tutorial: Optimize your Drupal 6 site to be indexed well by search engines

After primarily working with Drupal 5, I wanted to update my SEO skills for Drupal 6 and went through a bunch of tutorials to sum up all the steps and modules required to make a Drupal 6 site ready to be found by all major search engines.

  1. The one main requirement is to enable clean URLs. That option can be found at admin/settings/clean-urls
  2. Secondly, install and configure Pathauto and Token. Pathauto automatically creates nice-looking paths when creating nodes. Token isn't necessarily required, but a nice addition to use variables in your paths.
    Once you've configured Pathauto and are satisfied with how your URLs end up looking, configure Pathauto so URLs don't change if you decide to change the title of a node in the future. You can find that settings under /admin/build/path/pathauto under General Settings / Update Action.
  3. Next, download and configure the Meta Tag module. This module allows you to configure global and node-specific description and tags. The Meta Tag module is actually called nodewords.
    Note: I'm using FCKEditor 6.x-1.3-rc3 and nodewords 6.x-1.0-rc1, which don't play well together when creating a new node. My fix / workaround was to disable FCKEditor on the "New Story" page completely and open it in a popup.
  4. Then, install the Global Redirect Module. This module makes sure that trailing slashed at the end of URLs are removed. More importantly, it fixes the problem that your URLs are accessible via your URL alias and the node/xxxnumber structure. In general, having duplicate content can decrease your search engine ranking.
  5. Install the Page Title module. This module allows you to manually set the page titles of nodes. In the eyes of a search engine, page titles represent one of the more relevant characteristics and will increase your search engine ranking.
  6. Modify your .htaccess file to always redirect to www.yourdomain.com, even if visitors come to yourdomain.com. You can find the rewrite-rules in the .htaccess file, you just need to modify them with your domain name and uncomment them.
  7. Optimize Drupal's robots.txt file. This file defines the rules about what folders of your site can be accessed by search engines. Here's a great tutorial with several modification suggestions: http://tips.webdesign10.com/robots-txt-and-drupal. Once you're done, upload your robots.txt file and verify that it's structured correctly with this Robots.txt Validator.
  8. Finally, make sure your theme is XHTML compatible. Make sure your DOCTYPE declaration is suitable for your needs. I decided to make my danielhanold.com compatible with XHTML 1.0 Transitional, as the Strict declaration doesn't allow to set the "_target" attribute. You can test the validity of your document at the W3 Validation Tool.

There are quite some steps involved to get your content indexed well by search engines. However, if you spend all this time creating great content, I think it's worth the time optimizing your site to be "indexed" the best it can.

Great Blogroll module for Drupal 6

It seemed strange to me that there isn't a better solution, so I found the Weblinks module (http://drupal.org/project/weblinks), which does exactly what I'm looking for: it allows an admin or user to create Blogrolls (= several list of links). Those lists can be put into categories, such as "Design Links" or "Programming Resources".

Weblinks views integrationWhat I liked about the module was the fact that it seems seamlessly integrated with the core Drupal modules. It's using the Taxonomy module for categories and has a straightforward installation. The module creates the Vocabulary automatically (after visiting the configuration page once). Any categories can be created through the Taxonomy module. Weblinks comes with three different css files; I chose the weblinks_minimal.css, as my goal was to integrate the module's output into my sidebar.
Another part of the module that's great is the views integration. Using Drupal 6, Views and Weblinks, it's easy to create a page with the most popular links based on user click-throughs (which comes as a predefined block for the sidebar, but the fact that it CAN be easily re-created using views was noteworthy).

One feature that I was missing was an OPLM importer to take all the items from my existing feed reader and import them easily into Drupal, without having to copy & paste every website manually. Apart from that, I think I'll use this module from now on instead of creating custom blogrolls, as it seems to be maintained very well and updated often.

A critical evaulation of my dev skill

Array of Images I came across this great article on NETTUTS, one of my favorite sites related to web development, which talks about the the 10 most sought-after skills in web development: http://nettuts.com/articles/10-most-sought-after-skills-in-web-development/.

It's time for a reality check. I'm going through the list:

  1. Framework Knowledge
    For all the reasons developers love frameworks such as Rails or Symfony, I love Drupal. I have a good understanding of Rails, CakePHP and Symfony. So far no Python, so I can't say I'm a great Django developer.
  2. Widget Development
    Check. My last widget was an RSS widget that pulls dynamic information via XML and puts it into a transportable reader. I love widgets.
  3. Custom CMS themes
    Double-check. Working on a lot of Drupal projects, I consider myself an expert in creating CMS themes.
  4. Plugin Development
    No check. Primarily though for the reason that pretty much every module I can potentially think of already exists. OK, maybe almost any. Custom plugin development for Drupal 6 is very high up on my list.
  5. PST to XHTML services
    Check. I've been doing this for years now, and am both a Photoshop and CSS expert.
  6. Javascripot Plugin Creation
    Half a check. I'm familiar with jQuery and Scriptaculous, but only used it in a few projects.
  7. Facebook Applications
    No check. I've played with my li'l Lohan too often and forgot to create my own app.
  8. iPhone Applications
    No check. And no iPhone yet.
  9. E-Commerce Integration
    Check. Mostly did this using E-Commerce modules for Drupal.
  10. Flash and Actionscript Knowledge.
    Check. If it wasn't so much work to make Flash look & feel good and flawless, I'd do it even more often.

Conclusio: 6 and a half checks so far. Not bad for starters. Now I have to turn my chair and look to the three development books to get a couple of more checks.

The ultimate mobile powerhouse: With 8 pixel errors and a hair behind the screen

Mac Book Pro
Ahhh ... my new Mac Book Pro. 10 days of waiting for it to be shipped from Shangai, and now it's finally here.

It looked great, until I turned it on and stared at the blue screen that welcomed me. Is that a hair behind a screen, or just a crack? And what about these darker blue and ligher blue dots? After testing this Dead Pixel Testing Tool, I found 8 pixels all over the screens that didn't quite work right.

Not very excited about the Apple quality yet!

Source code highlighting using FCKeditor and GeSHi for Drupal

For the setup of this site, I knew that I needed a good way to display source code in stories. I assumed that Drupal would already have a good way to deal with source code in a post, but I found out that this required quite a lot of manual configuration. In addition to just displaying source code nicely, I wanted to be able to use source code in FCKeditor.

During my research, I came across a module called GeSHi Filter, which was exactly what I was looking for to display source code. This module integrates the third party PHP library GeSHi (Generic Syntax Highlighter) into Drupal. Installing this module was straightforward, except for the fact that the readme didn't mention that I needed to activate the filter in Drupal's input filters.

GeSHi takes care of displaying source code within the <blockcode> tag. Unfortunatley, using this tag in FCKeditor is tricky.

In order to use the <blockcode> tag in FCKeditor, one needs to switch to the source view. In that view, you can enter the source code you'd like to display in the post, and GeSHi will format it nicely once the node is submitted.

There's 2 caveats:

  1. In order for FCKeditor to not screw up the code after switching back to rich text editing mode, the following line needs to be added to fckeditor.config.js:
    FCKConfig.ProtectedSource.Add( /<blockcode language[\s\S]*?<\/blockcode>/gi  );
  2. According to the FCKeditor documentation, protected code is not being displayed at all in rich text mode. However, that code will be displayed when viewing the node.

Unfortunately, I wasn't able to find a better way to integrate the two. This integration works for now, but I hope that the a future release of FCKeditor will offer a better method for source code highlighting.