Build your own website thumbnail generator with Django

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…

Webkit Logo

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:

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.

Django Reinhardt

Edit your urls.py file to add a new pattern to the tuple urlpatterns. It will match screenshots requests and call the thumb view:

Now create a view called thumb in webthumb/view.py with this 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///dunglas.fr" alt="Lapin Blanc" />.

Enjoy !

32 Comments

    1. 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….

      Reply

  1. 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?

    Reply

  2. 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.

    Reply

  3. 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????

    Reply

  4. 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.

    Reply

  5. 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?

    Reply

  6. for more click here…

    […]we like to honor other sites on the web, even if they aren’t related to us, by linking to them. Below are some sites worth checking out[…]…

    Reply

  7. >>> 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

    Reply

    1. This error occured for my X server code . But executable is working fine.
      django code is correct or error ?
      THUMBS_DIR is 777 permission.

      Reply

Leave a Reply