Thinking about content types

Mon, 28 Apr 2008 13:57:39 -0400

If you've ever built a reasonably complicated site, you've likely experienced the joy of pondering content types. Frequently raised questions are: Should this thing be it's own content type? Or is it really just a field as part of another content type? And don't get me started on the is this really a taxonomy line of questioning.

So in planning the new and improved Harvard Stem Cell Institute (HSCI) site, I opened up OmniGraffle and started mapping out what types of things make up the institute. I made a list of the more concrete things that make up the institute and another list of things that were incidentally created by HSCI's actions. I call the the first group the "HSCI Entities" because they make up the heart of the institute, and the second "Supporting Content Types" because they are important on the site only as they relate to the entities. For example, it doesn't make sense to post a media link from the Boston Globe if it doesn't relate to any of HSCI's people, program, grants, or events.

I then added a fifth entity called "topic." I wanted to create a way of viewing everything that had to do with "diabetes" for example, including both entities and supporting content. Why didn't I use a taxonomy for this? Well I wanted to create an easy way to theme the page template for each term and also add fields (such as a banner image) to topics.

Once I knew how the entities were different from the supporting content types I added a node reference field to each supporting content type could reference an entities. That's why in the diagram the arrows point in that direction. It makes more sense from a content creation workflow perspective to add the relationship in this direction. When I'm adding a new press release, I want to add that it's about these three people. I don't want to go to those three people nodes a add the press release. But I do want the relationship to show up on both ends, which requires some views and theming that I'll get to later.

In addition to supporting content types and entities relating to each other, all of the entities and and relate to each other. And that brings me to the star diagram. Each arrow represents a relationship - the field living in one entity and pointing at the other. For example, when I create an event node, I can add that a specific person related. Or when I create a person node, I can add a topic in which they are interested. So I created a field named for each of these content types and set the node reference settings to only allow that same content type to be referenced. I then added the field to the content type that the arrow begins with. For example I created a field called "program" that could only reference programs and added it to the event content type; and I added this same field to grant.

I should mention that this site is more like a "public face" site, where only a small handful of people will ever log-in to create or edit content. Therefore I could have "person" as a CCK content type rather than getting involved with user stuff.

Finally, I decided that not all supporting content types are created equal, and put them into two groups: "articles" and "media and resources." This was so I could add one more node reference field that would allow me to say for instance, "this video is related to this press release." I set the field up so that it could only reference the media and resources content types and added it to the three article types.

The next challenge was getting all these relationships to show-up in both directions. Half of the relationship can be printed directly into a node template, but the other half needs a view
with the argument set to the node reference field. So I did just that, and added a view for the reverse of each node-reference.
I wanted to embed these views into the appropriate node templates rather than display them as blocks for a slew of neurotic reasons that I'm not going to get into. But it was here that I discovered an interesting theming stumbling block. In Views 1, when you were embedding a view, and wanted to first check to see if it had any rows to print out before printing it out, all could could just check if views_get_view('my_view_name') returned anything. So my if statement would look something like this:

<?php
$view_name = 'MyViewName'; //name of view
$limit = 3; // number of returns
$view_args = array();
$view = views_get_view($view_name);
if ($view) {
print "<p>I wanted this logic so that this paragraph would print only if there were results in MyViewName</p>";
print views_build_view('embed', $view, $view_args, FALSE, $limit);
}
?>

This doesn't work anymore. It seems that views_get_view() returns all the stuff that surround the rows (like the header, footer, extra divs) even if the view has no rows to display. After spending more time in the depths of view that I think a themer really should I came up with the following:

<?php
$view_name = 'MyViewName'; //name of view
$view_args = array();
$foo = views_get_view($view_name);
$foo_view = $foo->execute_display('default', $view_args);
$foo_count = $events_by_person->total_rows; //you can only check the total_rows after executed_display

if ($foo_count) {
print "<p>I wanted this logic so that this paragraph would print only if there were results in MyViewName</p>";
print $foo_view;
}
?>

So I apologize that this lengthy post is about a site that hadn't even gone live yet. But I'm sure that there will be more to report as it evolves.

The DIY jQuery Sideshow

Mon, 28 Apr 2008 13:56:15 -0400

So during the last Boston Group Drupal Meet-up, I did a show and tell about the new and improved Harvard Stem Cell Institute website; still very much in development.

One of the cooler (at least I think it's cool) is a jQuery powered slideshow that I built for the home page. I know there are lots of slideshow modules and stuff out there, but just like I enjoy cooking my own cupcakes and sewing my own cloths, I like to build little widget-y things myself. The second disclaimer is that I don't consider myself a developer, so if you look at my javaScript or Drupal tpl file suggestions and find yourself cringing, you have my deepest sympathy. Finally, I put this together using Drupal 6 and the CCK and Views versions from CVS and a patched version of the imagefield module that quicksketch put out last week... which worked wonderfully for me, though sounds a bit risky, because I suppose it is.

OK, on to how to add a sideshow like the one here.

Step one: Create a content type called spotlight using CCK and give it three fields. Two should be text fields called slideshow_title and slideshow_caption, and the third should be an image field called slideshow_image. I set the maximum dimensions of the image to 250x250, but all you really want to do is ensure that it's a square crop and has nice resolution when scaled to 250x250;

Step two: Create two list style views called slideshow_big and slideshow_small that are set to display 6 images. Set the filter show only the slideshow nodes and those that have been promoted to the front page. Add a field like the nid or title to these two guys. But you aren't going to use it because we are going to theme the hell out of them.

Step three: Theme the views so that they give you the markup you need to work with the jQuery. For Drupal 6, this would mean creating the following four tpl files in your theme directory.

views-view-list--slideshow_big.tpl.php

<?php $count = 1; ?>
<?php foreach ($rows as $row): ?>
<div class="<?php if ($count == 1){ print 'show'; } else{ print 'hide'; } ?> image<?php print $count; ?> big">
<?php print $row?>
</div>
<?php $count++; ?>
<?php endforeach; ?>

views-view-fields--slideshow_big.tpl.php

<?php $node = node_load($row->nid) ?>
<img height="250px" width="250px" src="/<?php print check_plain($node->field_slideshow_image[0]['filepath']) ?>">
<h2><?php print check_plain($node->field_slideshow_title[0]['value']) ?></h2>
<p><?php print check_plain($node->field_slideshow_caption[0]['value']) ?><p>
<p>To read more, <a href="/node/<?php print check_plain($node->nid) ?>">click here</a></p>

views-view-list--slideshow_small.tpl.php

<?php $count = 1; ?>

<?php foreach ($rows as $row): ?>
<img class="<?php if ($count == 1) {print 'highlight ';} ?>image<?php print $count; ?> small"
height="69px"
width="<?php if ($count == 6) {print '70px';} else {print '69px';} ?>"
src="/<?php print $row?>">
<?php $count++; ?>
<?php endforeach; ?>

views-view-fields--slideshow_small.tpl.php

<?php $node = node_load($row->nid) ?>
<?php print check_plain($node->field_slideshow_image[0]['filepath']) ?>

Step 4: Embed these bad boys by adding the following to a page template specific to your home page: front-page.tpl.php. I also wrapped each one with a class.

<div class="slideshowBigImage">
<?php
$slideshow_big = views_get_view('slideshow_big');
print $slideshow_big->execute_display('default');
?>
</div>
<div class="slideshowImageBar">
<?php
$slideshow_small = views_get_view('slideshow_small');
print $slideshow_small->execute_display('default');
?>
</div>

Step 5: Include some style and the script.

And I think that's it.

How do you do this in D5? Steps 1, 2, and 5 are the same. In step 4, you need to theme each view using D5 techniques (I always used the views theme wizard). And in step 5 you again need to embed the the views into the home page using D5 techniques: http://drupal.org/node/47417.

So it's cool to add someone else's little sideshow thingy to your site, but it's even more fun to build your own. The anatomy of something like this is straightforward markup with specific classes, some styles, and a little jQuery. Then you use your theming skills to have CCK and Views deliver the dynamic content. So take apart what I've done, revamp the scripts and styles, and make it your own -- and that’s what DIY is all about.

The Lava Lamp

Mon, 28 Apr 2008 13:48:30 -0400

Though the new Stem Cell and Regenerative Medicine site had not gone live yet, I wanted to post the jQuery for my silly little lava lamp animation.

You can view it here, get the styles here, and the script here.

It's pretty similar to the the DIY Slideshow in that you just need to theme a view so that it gives you the mark-up you need. Details on how to do this were in my slides from Drupalcon, which you can get here.

Rip it apart and make it your own. And let me know what happens.

Cheers.

Maureen Lyons: “Converting Mockups to Drupal Themes” at DrupalCon Boston 2008

Tue, 26 Feb 2008 20:22:09 -0500

I’m thrilled to report that I was selected to give a presentation on “Converting Mockups to Drupal Themes” at DrupalCon Boston. I’ve been pounding away at the slides, and will post them here once they’ve been finalized. But to be honest, that might not be until the day of my talk... which looks like it’s going to be Monday, March 3rd at 1:30pm.

Update: You can download my presentation. drupalconboston.pdf

The goal of this session is describe a practical workflow for how to approach turning a mock-up into a theme using design and user requirements as sign posts. Theming is often an inefficient process and full of gut instinct decisions, and I’m hoping that this session will help folks more quickly and confidently achieve their theming goals.

Hope to see you there!

P.S. There just might be some cupcakes...

Boston Drupal Meet-up and Drupal and Vegan Cupcakes Take Over the World

Mon, 25 Feb 2008 20:49:22 -0500

It was a great to see some Boston Drupal folks last week and here all about the interesting things they’re working on. The meet-ups happen about once a month, so if your in the Boston area make sure you checkout the “wicked pissah drupal usah group” at http://groups.drupal.org/boston.

I also had a good time making chocolate-vegan cupcakes in honor of Drupal 6. In case you’re interested the recipe is from “Vegan Cupcakes Take Over the World,” but you can find the recipe for the ones I made here.

Perhaps I will bribe people to come to my session with cupcakes... any takers?