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 } ?>
Hi Dave
Thanks for the great tutorial.
Could you tell me which version of Drigg & Drupal you are using?
I maybe using an older version, and so the code you indicate above is not in my version. I am using the drigg-dist.tgz version, so it maybe that this version is somewhat behind.
I might be able to add your code to my install, but it could also be better for me to upgrade to the most recent version.
Regards,
John
I just upgraded to the latest version of Drigg and this code works fine. I downloaded the current drigg-dist.tgz version and the template code has changed a bit. The changes in the newest template are “$node->teaser” is now just “$teaser” and the structure of the if/then statements is more clear but accomplishes almost the same thing.
I updated the post to clarify how this would work with the new version of the default Drigg template.
Hi Dave,
Thank you so much for sharing this.
The images are now displaying on my site
http://www.nudgeville.com
Kind regards,
Arnold
Thanks for the great tutorial. I have it up and running. One question, can this be tweaked in anyway to show one of the unloaded attachments (images) for a node rather than a webpage thumbnail?
I’m not sure exactly what you mean by “unloaded attachments” but you can insert any image you want using this method. Just replace the image source with wherever your image is stored an you should be set.
Hey Dave,
i am having some trouble finding the php
file that needs to be changed.
I am not using the default theme, but
I still cant find it anywhere.
I also wanted to ask you a
few more quetions. If you can,
please email me.
thanks
Jordan
btw, i am from LA, but live in Buenos AIres
Works great for me too!
Added feed_api support!
in node-drigg.tpl.php on line for, I altered the code to look like this:
teaser){ ?>
feedapi_node->url){ ?>
feedapi_node->url; ?>
<a href="feedapi_node->url; ?>">
url) { ?>
url; ?>
<a href=”url; ?>”>
<a href=”">
And below, I setup this:
teaser) { ?>
<a rel='lightbox' href="">
<img src="http://www.mythumbshot.com/get?url=&size=s" width=80 height=60>
Works great!
Hi Dave,
Thanks for the tutorial and code, really appreciate, however, it stopped working on my site: http://www.prophecigg.com…….Any clues or help will be greatly appreciated…..Thanks and God Bless….
http://www.endtimestube.com
Hi Dave,
Thanks for the tutorial, however, for some unknown reason, it stopped doing the thumbnails and right now I’m getting blanks….
Please go here: http://www.prophecigg.com…Would appreciate any help….Thanks and God Bless You…..
Hello,
Thanks for your tips. It’s really helpful. I am not going to use MyThumbShot. They are a bit slow compare with other providers.
Your site looks really great. It’s one of the best that I ever seen. I want to ask Andy if he’s willing to design a drigg site for me. But I just afraid the price might be expensive :-).
thnx for the help for displaying images on stories and when story is submitted from a site the image from the site is appearing slowly only after few minutes and some of them are not appearing as thumbnails .I got this when i tested drigg-drupal on my localserver.Is there any way to get the thumbnail immediately….plz reply me…
when I added this code to my template thumbnails started displaying on stories.But the thumbnails from the submitted site appears slowly only after 15 -20 min or some of them are not displaying so how to make it fast …
The thumbnails get added to a queue and get processed as soon as the web service (in this case MyThumbShot) gets to them. This is a free service so you do have to deal with a small delay.
If you want faster and possibly more reliable results there are pay services out there that could accomplish the same thing. I personally don’t have any experience with them, but they’re pretty easy to find and probably easy enough to integrate into the code I have here.
Great! Thank you!
I always wanted to write in my site something like that. Can I take part of your post to my site?
Of course, I will add backlink?
Sincerely, Your Reader
Thank U very much dave…It was really helpful tutorial for me…
Thank you so much for sharing this! It worked beautifully!
-AC
Hey thanks so much, that’s amazing.
Works like a charm!
Mike
it works like it should, thanks
How long does it take before the thumbnail wil begin to show up. I am receiving an X where the thumbnail should be?
Did I so something wrong??
My drigg site home page is http://new.foxlocks.com/home/drigg_home
HI
It doesnt seem to work, my thumbnails are not loading!
thanks for sharing!
I am having trouble with a site that I manage http://www.fox-locks.com
You will notice some of the thumbnails dont show up, is there anyway to fix this?