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.