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:
|
1 2 3 4 5 6 |
<code class="language-sh">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=http://lapin-blanc.net --out=example.png</code> |
Try 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:
|
1 |
<code class="language-python">(r'^thumb/(?P.*)', 'mysite.webthumb.views.thumb'),</code> |
Now create a view called thumb in
webthumb/view.py
with this code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<code class="language-python">import os import subprocess import md5 from django.http import HttpResponse CUTYCAPT = '/home/keyes/cutycapt/CutyCapt/CutyCapt' THUMBS_DIR = '/home/keyes/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')</code> |
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/http://lapin-blanc.net" alt="Lapin Blanc" />.
Enjoy !
