On many website you can see a awesome link preview effect using a thumbnail of the page. There is some web services such as Websnapr or Thumbalizr providing an API to make your own webpages screenshots but it can be annoying to rely on third party projects: free accounts can only display a small among of screenshots and, cannot customize the size of the image, you cannot render Flash animations or Javascript…
We will build a website thumbnail generator using CutyCapt, a Webkit based free software designed to make screenshots of web pages, and Django, the powerful Python web framework.
The first step is to download and install CutyCapt. On a Debian-based system (such as Ubuntu) just type the following commands:
sudo apt-get install subversion libqt4-webkit libqt4-dev g++
svn co https://cutycapt.svn.sourceforge.net/svnroot/cutycapt
cd cutycapt/CutyCapt
qmake
make
./CutyCapt --url=//dunglas.fr --out=example.pngTry to open the example.png (i.e: eog example.png), if the install is OK you must see a screenshot of this blog.
I assume your Django installation is working fine. Start a new project if needed (django-admin.py startproject mysite) and create an application called webthumb
with python manage.py startapp in your project.
Edit your urls.py file to add a new pattern to the tuple urlpatterns. It will match screenshots requests and call the thumb view:
(r'^thumb/(?P.*)', 'mysite.webthumb.views.thumb'),Now create a view called thumb in webthumb/view.py with this code:
import os
import subprocess
import md5
from django.http import HttpResponse
CUTYCAPT = '/home/dunglas/cutycapt/CutyCapt/CutyCapt'
THUMBS_DIR = '/home/dunglas/Documents/Projets/kakofony/thumbs/'
def thumb(request, url):
hash = md5.new(url).hexdigest()
path = THUMBS_DIR + hash + '.png'
print path
if not os.path.isfile(path):
try:
subprocess.check_call([CUTYCAPT,\
'--url=' + url,\
'--min-width=200',\
'--out=' + path])
except subprocess.CalledProcessError:
return django.http.HttpResponseServerError
img = open(path, 'rb').read()
return django.http.HttpResponse(img, mimetype='image/png')Adapt the variables CUTYCAPT and THUMBS_DIR with your settings. Of course the directory pointed by THUMBS_DIR must be writeable (chmod 777).
You can now embed website thumbnails in your websites just with this HTML markup <img src="http://localhost/thumb///dunglas.fr" alt="Lapin Blanc" />.
Enjoy !
Can i use it with PHP?
what a stupid question
Yes you can use CutyCapt with PHP, just transpose the Python code to PHP. The system() function can help.
hi I've got a problem using it with php it just doesn't work when I do for example
system("./CutyCapt –url =http://dunglas.fr –out=example.png");
I've checked all the rights and everything is allright I've even tried with exec isntead of system…
Have you got an idea?
I think it éight be because of the time it takes to execute….
Thanks for this – very helpful, and CutyCapt produces some great results. I'm just getting started with django. Is there an easy way to display some sort of "processing" message/graphic whilst CutyCapt does its thing, before redirecting to the captured image?
I use imagemagick to convert and mark my thumbnails: http://www.imagemagick.org/
I'll wrote an updated version of this tutorial when i'll be less busy !
Hey! Great tutorial – please add that hardy-backports repository needs to be enabled for ubuntu for the packages to install properly. To do that add "deb http://archive.ubuntu.com/ubuntuhardy-backports main universe multiverse restricted" to /etc/apt/sources.list.
Thanks for the notice christian, the how-to was realised on Intrepid 🙂
It generates real PNG image, it must work with Flash too 🙂
hmmm, I mean it can't render the flash in the webpage, I'm not sure if you can just install flash and it will work or whether you need some kind of addon for webkit or cutyapt.
Some people have Flash rendered using the Netscape plugin. Details on http://labs.trolltech.com/blogs/2008/11/03/thumbn…
Ah – I couldn't get it working on Intrepid so went back to Hardy. I've written mine in PHP, works an absolute treat. Only problem is flash – any ideas if/whether it works with flash?
Hi. This blog post inspired me to try and make a web-snapshot thumbnailing service using Django and CutyCapt. It's my first Django project – so I'm sure there are lots of issues with it – and it's probably poorly coded!
Anyway – thought you might be interested. I set up a project on Launchpad for it: https://launchpad.net/thummer
What I have cobbled together as a test is available at: http://thummer.mattaustin.me.uk/and thumbnails can be generated using the format:
http://thummer.mattaustin.me.uk/%5Bwidth%5D/%5Bheight%5D/…
e.g.
http://thummer.mattaustin.me.uk/400/400/1/http://…
It's quite slow though, and can't handle generating more than one capture at a time. Think I'll need to build some sort of queue for background capturing, and return a placeholder image.
Is it rendering web-page that has adobe FLASH?????
How can I render FLASH via CUTYCAPT.
I've try many times…but I cannot do that…
Is there any additional tasks for Flash????
Is that a full list of dependencies?
libqt4-webkit libqt4-dev g++
I'm trying to set up under Redhat EL, and not having much joy.
I tried to install cutycapt on OSX, i downloaded the source from the website, but it contain only 3 files: CutyCapt.cpp, CutyCapt.hpp, CutyCapt.pro. I run gmake but i had "No targets specified and no makefile found". Do you know how to intall CutyCapt on the mac?
Sorry, i found the problem, was qmake, not gmake…
Hello, I'm getting "'module' object has no attribute 'CalledProcessError'" error, why?
You can try http://www.sitethumbshot.com/. it is free and good.
How would you get and install CutyCapt on a centos system.
sudo apt-get install subversion libqt4-webkit libqt4-dev g++
svn co https://cutycapt.svn.sourceforge.net/svnroot/cuty…
cd cutycapt/CutyCapt
qmake
make
./CutyCapt –url=http://dunglas.fr –out=example.png
This doesn't work on a centos system
This how-to is designed for Debian/Ubuntu, for CentOS (a RedHat based distro), you must found RPM packages or build every dependencies by hand.
I need X server for this?
You need a X server but you can install a headless one like Xvfb.
I don't know a way to bypass X… Sorry.
Python is not a common language for Webmaster, it's better to use PHP for your example please.
>>> subprocess.check_call([‘xvfb-run –server-args=”-screen 0, 1024x768x24″‘, CUTYCAPT, ‘–url=’ + url, ‘–min-width=300’, ‘–out=’ + path])
Traceback (most recent call last):
File “”, line 1, in
File “/usr/lib/python2.7/subprocess.py”, line 506, in check_call
retcode = call(*popenargs, **kwargs)
File “/usr/lib/python2.7/subprocess.py”, line 493, in call
return Popen(*popenargs, **kwargs).wait()
File “/usr/lib/python2.7/subprocess.py”, line 679, in __init__
errread, errwrite)
File “/usr/lib/python2.7/subprocess.py”, line 1249, in _execute_child
raise child_exception
OSError: [Errno 2] No such file or directory
This error occured for my X server code . But executable is working fine.
django code is correct or error ?
THUMBS_DIR is 777 permission.