Jekyll et les images

Après quelques semaines avec Jekyll, le bilan est positif: c’est un générateur statique awesome! De plus, couplé avec git, les billets de ce blog sont postés en faisant un bête git push et boum, le billet est sauvé, le site est régénéré et instantanément disponible. Je me répète mais c’est awesome!

Mais Jekyll aime pas les images

Oui, il n’y a pas que des avantages à utiliser Jekyll. Exemple d’aujourd hui, les images ne sont pas gérées. Enfin plutôt, si vous voulez des images, il faut coder soit même les balises <a> et <img>.

Beurk! Que cela ne tienne, Jekyll peut être étendu par des tags custom. C’est ce que j’ai fait avec mes petits doigts de fée. Avec ce tag, on pourra écrire dans un billet ce genre de commande:

{% image foobar.png %}

Ce qui générera tout seul ce bout d’html:

<a class='image' href='/images/foobar.png'>
    <img src='/images/foobar_t.png' />
</a>

Plutôt cool, non? Cerise sur le gâteau, le tag s’appuie sur RMagick pour générer un thumbnail de l’image. En résumé, il suffit d’utiliser le tag pour les images, générer le site et admirer le résultat :)

Installation

C’est plutôt simple. Il suffit de récupérer le code du tag: image.rb et de le mettre dans un dossier _plugins dans son installation de Jekyll. C’est tout.

Avant de son utilisation, ne pas oublier d’installer RMagick:

# sudo gem update
# sudo gem install rmagick

Puis vient un peu de config. Le tag définit deux variables de configuration dont voici les valeurs par défaut:

images_directory: images
images_css_class: image

La première variable décrit le dossier où sont stockées les images. On peut très bien décrire un chemin plus complexe, par exemple images/post/my/awesome/directory. Et pour les attentifs: oui,le tag exige que toutes les images utilisées soit dans le même répertoire.

La deuxième variable est simplement la classe CSS appliquée aux liens <a>. La classe CSS permet de pouvoir récupérer plus facilement les liens sur les images. utilisables par les effets Javascript lightbox et compagnie.

A noter que le nom de l’image thumbnail est fixe: il s’agit du nom de l’image originale avec _t comme suffixe.

Démo

Et voila ce que ça donne. En insérant ce code dans ce billet:

{% image pocket_ocr_lorem.png %}

j’obtiens ceci (couplé avec fancybox pour l’effet de zoom):