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…

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=http://lapin-blanc.net --out=example.png

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:

(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/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')

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 !

The last update of Aptana block Django development server

The last update of Aptana Studio come with a new built-in Jetty-based HTTP server running on port 8000… the same as Django development server. There is no good way to disable the preview server feature of the popular editor, but our favorite web framework can be launched on another port. Just type python manage.py runserver 8080 instead of python manage.py and access to your work on http://localhost:8080.

Ravalement de façade

Comme vous pouvez le voir, j’ai légerement remanié l’apparence de mon blog. Il utilise désormais un thème très sobre à trois colonnes permettant de mieux structurer l’information et fait la part belle à Twitter que j’utilise de plus en plus assidument.

Monter une partition Linux sous Mac OS X

Ou plus précisément une partition de type ext2/3, le système de fichier le plus populaire sous GNU/Linux, utilisé par défaut sur Ubuntu.

Mac OS X n’inclut pas de pilote pour monter les partitions ext2, heureusement un projet libre comble ce manque : ext2fsx. Récupérer la version ext2fsx_dev sur le site du projet, la seule supportant l’architecture x86 (tous les Mac depuis le passage aux processeurs Intel). Un simple double clic sur le fichier .dmg et un redémarrage de l’ordinateur suffira à l’activation du pilote.

Vous pouvez désormais monter vos partitions formatés en ext2, 3 ou 4 via la commande mount ou depuis un sympathique petit utilitaire nommé Gestionnaire ExtFS que l’on trouve dans le menu Autre des Préférences Système.

Quel développeur suis-je ?

• Os : Ubuntu et Mac OS X
• Éditeurs : Eclipse et vim
• Langages favoris : Python, C
• VCS : Subversion
• Navigateur : Firefox

Alors, quel développeur je suis ?

Programmer hierarchy

Un formulaire de création de compte avec Symfony et sfGuard

sfGuard fait parti des plugins Symfony les plus utiles. Il ajoute à notre framework un système de gestion avancé des utilisateurs, groupes et permissions. Il inclut en standard un back office complet ainsi qu’un formulaire de connexion mais pas pour de la création de compte en front.

Alors qu’il fût assez fastidieux de le réaliser avec la version 1.0 de Symfony, le nouveau système de création de formulaires introduit dans la version 1.1 nous facilite bien la tache.

Je ne reviendrais pas sur l’installation du plugin qui est très bien détaillée dans sa documentation.

Commençons par générer les formulaires associés à nos tables grâce à Propel : php symfony propel:build-forms. Attaquons-nous maintenant à la classe de notre formulaire d’enregistrement. Créez un fichier nommé sfGuardRegisterForm.php dans le répertoire lib/form/ qui contient ce code :

<?php
class sfGuardRegisterForm extends sfGuardUserForm
{
  public function configure()
  {
    parent::configure();

    /* Ici on ajoute une validation
        pour le mot de passe afin qu'il soit long
        d'au moins 6 caractères et d'au plus 128. */
    $this->validatorSchema['password'] = new sfValidatorString(
      array('min_length' => 6, 'max_length' => 128)
    );
  }
}
?>

Comme vous pouvez le lire, on se contente de créer une classe qui hérite de sfGuardUserForm fournie avec le plugin et d’y ajouter une validation supplémentaire pour le mot de passe (par défaut il peut être vide). C’est également dans cette méthode configure que se déroulera la validation de vos champs personnalisés sur lesquels nous reviendrons plus bas.

Effacez la cache avec la commande php symfony cc. C’est déjà presque fini !

Créons un répertoire sfGuardAuth dans le répertoire modules de votre application puis deux sous répertoires dans sfGuardAuth nommés actions et templates. Ce pseudo-module nous permettre de surcharger le module sfGuardAuth du plugin afin de lui ajouter une action et une vue qui permettront à vos visiteurs de s’enregistrer sur votre site.

Créez un fichier actions.class.php dans le répertoire actions qui contient :

<?php
/* On doit inclure manuellement
l'action du plugin car l'autoloading ne fonctionne pas dans ce cas. */
require_once(sfConfig::get('sf_plugins_dir').
'/sfGuardPlugin/modules/sfGuardAuth/lib/BasesfGuardAuthActions.class.php');

/* Notre action dérive de celle fournie par le module
    afin d'hériter de ses actions propres. */
class sfGuardAuthActions extends BasesfGuardAuthActions
{
  public function executeRegister($request) {
    /* Passe le formulaire à la vue. */
    $this->form = new sfGuardRegisterForm();

    /* Si l'action est appelé via la méthode POST... */
    if ($request->isMethod('post')) {
      $this->form->bind(
        $request->getParameter('sf_guard_user')
      );

      /* ...est que les données sont valides */
      if ($this->form->isValid()) {

        /* On crée l'utilisateur */
        $sf_guard_user = $this->form->save();

        $this->setFlash('message',
          array('Vous êtes enregistrez,
            <a href="/login">connectez-vous</a> !')));
        $this->redirect('@homepage');
      }
      /* Sinon le formulaire ainsi que l'erreur sera ré-affiché */
    }
  }
}

<form action="<?php echo url_for('sfGuardAuth/register') ?>" method="POST">
  <table>
    <?php echo $form ?>
    <tr>
      <td colspan="2">
        <input type="submit" />
      </td>
    </tr>
  </table>
</form>