Jerad Bitner

I recently had a friend ask me how to be able to give CCK fields more user-friendly class names so that they could be styled a little easier. I actually needed to do this myself with a project at work, so I had time to really sit down and figure out a good way to do this.

CCK

The Content Creation Kit (CCK) is a great way to add different fields to any particular content type within Drupal. When you first start learning Drupal, you’ll see that it ships with two main content types: Page and Story. The fields that these two content types have by default are the Title and the Body. These are respectively a single line text field, and a multi-line text field of which you can choose an input format. This is great and very useful for basic content, but what if I would like another text field other then just Title and Body? CCK allows you to add this. But instead of trying to explain the power and awe of CCK here, please take a look at the CCK handbook where this is explained in much greater detail.

Stepping Stones

Now adding CCK fields to a content type is all fine and dandy, but what if I want to make them look better by perhaps changing around the order in which they appear when viewed, or perhaps target that specific element with my CSS in order to specify the exact look and feel of the content it holds? This is where you want to start theming. However, sometimes theming in Drupal can be a pretty complex concept to grok at first. Not because it is very hard, but because without any stepping stones to how theming actually works, you can very easily fall into a dangerous quagmire of code, arrays and objects that you have no idea are even available to you.

Contemplate this my friend

This is where Jeff Robbins of the Lullabot crew has come to our rescue with a great module called Content Templates (contemplate). I believe this module is an incredible stepping stone in learning how to bridge the gap that exists between CCK and the way CCK fields are presented (themed). Installing this module will add a new menu item under Content Mangement in your Administration panel called ‘Content templates’, and also a templates tab inside of your ‘Content types’ page of your Admin section. Once you create a template for any given content type, you can effectually customize the look and feel of not just the content type’s node view (labeled Body in contemplate), but also the Teaser and the RSS!

Commercial break

BUT WAIT, THERE’S MORE! Each fieldset (teaser, body, and rss) has not just a text field to edit the template in, but also inserts a default view of what Drupal spits out, ready to edit. And if that isn’t exciting enough for you, there is (IMHO the most useful feature of this module) a rich text-field next to that which lists every object available to you for templating! There’s even some neato javascript that allows you to click on an object and insert the php to print that object into the template field. This is just good stuff man. Fun times. Act now while supplies last. Void where prohibited.

Ok, time for a downer

Finding such a gem is really very great, but the excitement starts to wear off after about an hour of trying to template a complete content type inside of that teeny, tiny, little box. Even the javascript insertion of the box next to it begins to feel like a sticky piece of candy that’s lost it’s flavor. I’d like to take this opportunity to mention that the devel module provides you with a feature quite similar to this little javascript flavored object reference box, but unless you’re already very familiar with how to work with these field objects in PHP, the devel module is next to useless. So, again as a stepping stone, the contemplate module really comes in handy for referencing what objects are available to theme, and will give you a little insight as to how to work with them in PHP.

So what do we do about the teeny, tiny, little text box that we’re supposed to put all of our theming code into? Well, fortunately Drupal’s main theming engine, phptemplate, has already taken care of this. Listen carefully now, ‘cuz this is important and I don’t want to lose you now. We’ve already come so far. Each content type can have it’s very own template file within your theme.

Theming a content type

You can actually accomplish this very easily. The first step is to create a file within your theme directory named node-content_type.tpl.php replacing content_type with the machine readable name you’ve given your content type. So if your content type is named forum, you’ll want the file to be named node-forum.tpl.php. For almost all of my work lately I’ve been using a theme called zen. It’s written by the Lullabot crew once again, and is probably the best theme out there to teach you anything about a theme. This theme has a file that is a custom themed content type already specific to the forum module. The file is node-forum.tpl.php. I’ve used this on multiple occasions as a template on how to start a new custom theme file for a content type. If you use this file, you’ll notice that, among other things, it prints out the $content variable. All of our CCK fields can be found inside of this variable, along with the default theming of them that you find in the contemplate module’s teeny, tiny, little box for the template code. So you can take the code that is generated by default in the contemplate module, and insert all of that where you see the $content variable being printed in the tpl file. From there, you can do all of your editing in the editor of your choice without having to strain your back trying to bend closer to your monitor to see what’s inside of the teeny, tiny, little box.

Following my recent post on my rolechanger module, I started delving into how to provide functionality with the resulting dropdown box that the module provides. I wanted to provide all functionality through javascript and have included a rolechanger.js file for this purpose. However I found a few quirks while working with jQuery and the select element.

I started out with a .change() on the select element and drilled down through the .children() looking for [@selected]. However, thought this worked fine in IE, Firefox did not pick this up at all. I saw in the jQuery issues that this had been fixed, but evidently not for the release that ships with Drupal. Here’s the resulting code for the IE portion:

    // ie doesn't pick up the option.click, so we'll have to use the select.change
    $('#edit-role-changer').change(function(){

  	// get rid of select box
  	$('#edit-role-changer').hide();

        // show the chosen role as static text
       // NOTE: FF doesn't pick up [@selected]
      $('#role').html($(this).children("[@selected]").text()).show();

      // provide a change link
      $('#role-change-back').show();

    });

Firefox was actually a little easier to code for, since I found that it would pick up a .click() on the option element. So the resulting code for Firefox is this:

    // provide action for an option change
    $('#edit-role-changer option').click(function(){

  	  // get rid of select box
  	  $('#edit-role-changer').hide();

  	  // show the chosen role as static text
      $('#role').html($(this).text()).show();

      // provide a change link
      $('#role-change-back').show();

    });

Since Firefox does pick up the .change() function that is on the select element that is used for IE, I then had to do a browsers detection, which jQuery makes simple as pie with $.browser. Here is the resulting full code:

  // see which browser we're working with
  if ($.browser.msie) {

    // ie doesn't pick up the option.click, so we'll have to use the select.change
    $('#edit-role-changer').change(function(){

  	  // get rid of select box
  	  $('#edit-role-changer').hide();

  	  // show the chosen role as static text
  	  // NOTE: FF doesn't pick up [@selected]
      $('#role').html($(this).children("[@selected]").text()).show();

      // provide a change link
      $('#role-change-back').show();

    });
  }
  else {

    // provide action for an option change
    $('#edit-role-changer option').click(function(){

  	  // get rid of select box
  	  $('#edit-role-changer').hide();

  	  // show the chosen role as static text
      $('#role').html($(this).text()).show();

      // provide a change link
      $('#role-change-back').show();

    });
  }

Happy jQuerying!

So my first commit to the Drupal contributions has been made! WooHoo! I partied hard that night :) No, it’s really not that big of a deal, but I’m excited as it takes me one step further into Drupal development and being more involved in the Drupal community.

Photobooth fun on Marti Gras

So Marti Gras weekend was great! I’m so fraking sore form Wii that it’s not even funny. Well maybe a little bit funny… Snugs and his wife were in town as well as Dave, so we all hung out at Dana’s, drank, and played Wii for 8 hours straight! It was a blast, a good time was had by all. This video is of Dave and Dana boxing, but we bowled a hell of a lot more. We almost all hit pro by the end of the night (3am). Too bad for Amy, who hurt her leg earlier in the day and was not able to bowl very much, but she did pretty well sitting down, even on her Vikoden! We also played with my Mac’s PhotoBooth program, hilarity ensued.

I’ve started a project on drupal.org to contribute a module that will allow loading of new themes into Drupal from a compressed file (zip, gzip) that is either on your local hard drive, or from a web URL (curl support required?). View Project on drupal.org

It’s a basic idea and I’m hoping to get some feedback from the Drupal community on how best to execute this. The idea came about when a friend of mine mentioned that he had introduced his brother (a Joomla user) to Drupal and got some feedback from him on what he thought Drupal was lacking.

The first thing mentioned was the weight system. Joomla uses a system similar to that which is implemented in the Views module where you can hit and up or down arrow to resort content. I heard mention that someone has been working on a module to do sortables with Drupal’s new jQuery library, but it looks to be a 4.7 implementation so far.

I’ve not really seen much discussion on drupal.org about a theme installation interface, so I figure since it would help convert users and there is some good interest at least outside the drupal community, it may take some hold.

Update: Due to more commitments then I have time, I’ve discontinued any work on this module. My regrets.