Dave in LA

I started up the site BananaCut a couple months ago and had a lot of help from Andy designing the look and feel of the site.  One of the big changes that really made the site feel complete (other than the plaid) was the addition of thumbnails for each stories teaser.  The teaser is the short version of the story used on the front page of the site and the site was kind of boring with out some visual flair.

I got the idea for adding thumbnails since Drigg already creates thumbnails for any videos submitted from YouTube and they looked really nice so I set out to create the same type of thumbnails for all stories that were submitted.  An example of what I mean:

The thumbnail in my theme sits just to the right of the text and creates a nice visual to go along with each story on the site.  You can see an example of what the whole page looks like at http://www.bananacut.com.  The steps required to accomplish this on your own Drigg site are pretty simple.  All of the editing is done on the Drigg theme layer, so there’s no need to get into the core of Drigg (which means you’ll be able to upgrade without trouble) and the edit is easy to remove if you wish to.

To get a thumbnail of a webpage I use the site MyThumbShot.  Basically all we need to do is embed an image from a properly formatted MyThumbShot URL and we will be given a nice little thumbnail of the story submitted to Drigg.  Here is an example of a properly formatted MyThumbShot URL.  You can see that there is a ’size’ attribute on the end of the URL as well.  We’re going to use the ‘XS’ size for this purpose since the thumbnail will only be 80×60 on the Drigg site.  So, our URL’s will look like this:

http://www.mythumbshot.com/get?url=drigg_story_url&size=xs

Now, where to add this in the Drigg theme.  My theme is based off of the default theme that comes with Drigg.  There is a section around line 21 of the file ‘node-drigg.tpl.php’ (which is located in ‘/sites/all/themes/drigg_theme’ if your editing the default theme) that reads

<?php if ($node->teaser) { ?>
<div class="embedded-teaser">
<?php if ($embedded_stuff) { ?>
<?php print $embedded_stuff ?>

 Basically what this is saying is: “If this is a node teaser and it has embedded stuff defined, print that stuff here.”  This is the code that will print the nice Youtube thumbnail if a user submits a Youtube video to your Drigg site.  What we want to do is this: If there is no ‘embedded_stuff’ defined, then print out our MyThumbShot thumbnail instead.  This is the code I’m using to accomplish that:

<?php if ($node->teaser) { ?>
<div class="embedded-teaser">
<?php if ($embedded_stuff) { ?>
<?php print $embedded_stuff ?>

<?php }  else {?>
<div style="embedded-youtube teaser thumbnail">
<a href="<?php print $node->url; ?>">
<img src="http://www.mythumbshot.com/get?url=<?php print $node->url;?>&size=xs" width=80 height=60>
</a>
</div>
<? }?>
</div>
<?php } ?>

The object ‘$node’ has a string with the story URL contained in ‘$node->url.’  Make sure you don’t accidentally use ‘$node_url’ since that is the internal link to your Drigg site.

You can see that there is a fair amount of styling information included before the image as well as the image being resized to 80×60 to fit right.  I got all of this from what Drigg spits out if you submit a Youtube video, that way everything is styled the same for all your thumbnails.

Hopefully this helps some Drigg users in adding thumbnails to their sites.  Please leave a comment if you add this to your Drigg site, I would love to see it.  Also, leave any questions you may have in the comments and I’ll try to help you out when I have a chance.

Update (9/28/08):

John has brought up in the comments that the latest version of Drigg has some slightly tweaked template code.  Instead of what I have above you will see:

<?php if ($teaser && $embedded_stuff) { ?>
<div class="embedded-teaser">
<?php print $embedded_stuff ?>
</div>
<?php } ?>

To accomplish what I explained above you would need to add the same else statement I added above so that it would read:

<?php if ($teaser) { ?>
<div class="embedded-teaser">
<?php if ($embedded_stuff) { ?>
<?php print $embedded_stuff ?>
<?php } else { ?>
<div style="embedded-youtube teaser thumbnail">
<a href="<?php print $node->url; ?>">
<img src="http://www.mythumbshot.com/get?url=<?php print $node->url;?>&size=xs" width=80 height=60>
</a>
</div>
<?php } ?>
</div>
<?php } ?>