Dynamic thumbnails from websites

Since Alexa stopped offering their free thumbnail service last year a lot of thumbnail services are available now. Some of them offering limited free services and others only a paid premium version. On of the bigger and better services is Girafa, a thumbnail service with a free service and also premium services for users with more then 2000 image requests a month.

Joining the service for free is fast and easy, within an hour my account was up and well.
With a special Thumbnail URL Generator it’s possible to create the URL for a thumbnail from a website in no time, just enter the URL from the website and you get some code like this:

Client ID: j35jh34k5j
URL: http://girafa.com
Signature Key: 34u3gh45k4hk
Concatenated String: gh345gi6dfjhttp://girafa.com
MD5 Hash: d619bc0b9568adfe9f779359e3212f
Signature: 9f7ce2e6e9e3212f
Thumbnail URL: http://scst.srv.girafa.com/srv/i?i=j35j…&r=http%3A%2F%2Fgirafa.com&s=34…

This information is OK if you add only a few thumbs to your homepage, but what if you need a dynamic function? The next function will do the job in PHP without using the thumbnail generator from the Girafa website.

function thumbnail($url) {
	$client_id = 'urrjr7894784'; // your client ID
	$signature = 'kjhh35h4j5'; // the signature you entered @ girafa
	$concatenated = $signature.$url;
	$MD5_Hash = md5($concatenated);
	$signature = substr($MD5_Hash, 16, 16);
	$url = urlencode($url);
	$str = 'http://scst.srv.girafa.com/srv/i?i=';
	$str .= $client_id .'&r='. $url .'&s='. $signature;
	return $str;
}

This function returns a complete URL based on the argument you have passed to the function.

How does it work?
First the signature you entered via the Girafa website is concatenated to the URL, on the next code row there is a MD5 hash created from the string (signature+url). With the PHP function substring the string is shortened into the last 16 characters and this new string is used as a value for the variable $signature. Next you need to urlencode the URL and at the end the function returns a string with all required values. The result is a same type of URL which is created with the thumbnail generator from the Girafa website.

What if 2000 thumbnail requests are not enough?
First of all you can buy as much as thumbnails you need. If you don’t have a budget for this premium service, it’s possible to cache the thumbnails on your own web server with this kind of code:

$dom_parts = parse_url($url);
$thumb = 'doc_root/your_thumb/'.$dom_parts['host'].'.jpg';
if(!@file_exists($thumb)) {
	// next you will use your function
	$request_for = thumbnail($url);
	@copy($request_for, $thumb);
}

Comments

  1. Nice! I’m going to release a ColdFusion version. I’ll credit you of course.

  2. This is the best service available for thumbnails, it helps also with CTR.

  3. Thanks, what a great service, I was looking for this for a while. Check out their website, they give an inner pages thumbnail solution as well.

  4. Nice tutorial. I was wondering how to do this, but didn’t know there’s a service that provides this. I thought to do that with executing some programs on my server, but that would be too much pain. :) Great info.

  5. Their free version only allows screencaps of site frontdoors and not inner pages. I was going to use it for something, but it doesn’t seem like it will work given that restraint.

  6. Their free version only allows screencaps of site frontdoors and not inner pages.

    Thats right, but enough for the most purposes (directories, linking details, etc.). I think a screen capture of inner pages is only useful for bigger screenshots…

  7. I have to say I use Snap.com on my blog for the thumb nailing, it is very easy, and can be integrated into wordpress with a plugin.

  8. Rob you’re right,
    I use snap too and it’s very easy to integrate. But their service is different from girafa since the thumbnail is only visible onMouseOver.

  9. This would be great. But I am a bit confused on how to implement both of the code snipets. Where do you put them??

  10. Hi Raven,

    if you have questions about php and/or html you should join the Webdigity webmaster forum.

    see you there!

  11. Looks like caching part of the script will only be able to save one thumbnail per domain. Also there may be some security issues with host name. I would recommend using md5($url) for file names.

  12. Anyone there to explain how to implement this, please… because I’ve tried a lot of things… I know coding but I’m not a programmer.

    I’ve made a function in the templates… saved it… but cannot display thumbs… i have an account… I’m using a free version of esyndicat.

    If someone could be kind to explain.

  13. @ freelancer,

    yes right thats a limitation of the free service.

    @ Ciprian,

    join the webdigity forum (link is 3 comments above) if you need help, I think it’s not to hard to use them with esyndicat. BTW. do you checked already the esyndicat forum?

  14. Hi Jo,

    it’s not a problem to run this script on one central website and link on other websites to these generated thumbs or better the script that checks/copy the thumb.

    The only thing you need is a “translation” to asp.net maybe you should hire some freelancer for a few bucks.

    Our Sponsor:
    Find thousands of freelance writing and editing jobs…fresh jobs daily. Kickstart your writing career for just $2.95. Click here

  15. Anyone know a solution for .NET?

    I need to grab a variety of thumbnails using different hosts of a single domain name and/or ip adress, then display each result and ask the user a question about what they see.

    I’ve looked at a bunch of sites such as these, but am looking for something for my own server.

    TIA,
    Jo

    p.s. nice blog. clean, concise and helpful.

  16. I stumbled upon widzoo thumbnails.

    Specifically I followed this tutorial to embed it into my phpld installation.

    HTH

  17. @Voltie,

    nice service but how do you know if this service is 24×7 available? How to cache the thumbs on your own server?

    what about page load time?

  18. Thanks, nice script, i am using on my site!
    Great Tutorial, thanks!

  19. Hi, nice job on the script.
    But i realy can’t understand how to implement it in my site…. i tryed nearly everything….. maibe i am missing something but can someone help me in telling me how to use this script!! PLEASE

  20. Hey M0rpH3u2,

    this is not the place for support join this forum to get help.

  21. Really nice example. It’s useful while Girafa’s service is free.

    Thanks!
    Alex

  22. Olaf: thanks for the great article! I had just researched girafa without trying it, but I have now thanks to your tips on how to use it effectively.

    I think what some of the readers with questions might have missed is that the “$str” from your function is a URL that you then have to put the $str URL in the “src” attribute of an “img” tag.

    Hope this is helpful to some folks. Thanks again, Olaf!

  23. It would be nice if you could write how cache Alexa Thumbnails for not quering amazon/alexa more than 24h. :)

  24. Artur,

    you want to cache the thumbs only for 24hours?

  25. Wow. I’m not very good with PHP, but it keeps surprising me. Dynamic Thumbnails… That’s so cool! I don’t know how to attack this whole PHP-language. Does anyone have any advice where to start? Tutorials? Just try to make something and google the problems? I’m really green…

  26. Wow, I just realized that the last comment was made in 2007. I guess I won’t get a reply…

  27. Hi, (even after 3 years)
    PHP is very easy to learn, they have a great manual with a lot of examples and user comments, start there. If you need more practice for a specific feature it’s the best way to search tutorials for that function.

  28. Girafa has closed their doors in 2011, Try http://www.shrinktheweb.com/
    They offer also free plans and provide also some API system.

Because of all the spam attemps I've decided to close the comment form at this time. If you have have any questions or comments please post them by using Google+ or Twitter (the links to my profiles are located at the top of this page).