Vous avez une série de photos que vous aimeriez transformer un album web (composé de vignettes cliquables permettant d’accéder aux images en grand format), pour montrer au monde entier vos dernières vacances à la Grande Motte où les photos de votre chat en train de prendre un bain de soleil ? Rien de plus simple avec gThumb, la visionneuse d’image intégrée par défaut dans Gnome.
Ouvrez Gthumb (Application/Graphisme/Visionneused’image gThumb), naviguez dans le dossier contenant les photos qui vous intéressent, sélectionnez-les, puis faites Outils/Créer un album Web. Un popup s’ouvre, vous offrant un certain nombre d’options à configurer.
* L'onglet "Destination" est assez logique, mettez ici le dossier de destination de votre album web. Il est conseiller de créer un dossier vide pour ce faire (Lolcats dans mon exemple). - Le "fichier d’index" est la première page HTML de votre album, ici "lolcats.html".
- Les deux check-boxes suivantes sont explicites : copier les images originales vers la destination (a cocher) et les options de redimensionnage, utiles si vous ne tenez pas a imposer a vos lecteurs des images trop lourdes.
- L’agencement de l’index concerne la mise en page de votre album : combien de vignettes voulez vous afficher par page, et comment voulez vous les disposer ?
- Vous pouvez choisir l’ordre dans lequel vos images seront rangées dans l’onglet "Tri"
- L’en-tête et le pied de page de votre album (pages d’index et pages d’image) sont directement personnalisables. Les deux champs acceptent du code HTML, où la variable d’environnement %d pour afficher la date courante.
-
Enfin, le plus intéressant : le thème. gThumb propose un certain nombre de thèmes par défaut, en général assez sobres, mais acceptables (j’ai pris "Flickr" pour l’exemple). Vous pouvez personnaliser les légendes des vignettes et des images avec un certain nombre d’option (notemment les informations EXIF de chaque photo). Voila donc votre album web terminé. Jusque là, me direz vous, rien qui sorte particulièrement de l’ordinaire. Oui, mais l’intérêt de cette méthode est précisément la très grande facilité qu’elle offre pour éditer les thèmes et en créer de nouveaux, pour peu que vous soyez un petit peu familiers du XHTML et/où du CSS.
Les thèmes par défaut sont rangés non pas dans le "dossier de thème" de gThumb, rangé sous ~/.gnome2/gthumb/albumthemes, mais dans le dossier système de gThumb, à savoir /usr/share/gthumb/albumthemes. Il contient un dossier par thème. Jetons donc un oeuil à celui du thème que nous venons d’utiliser, à savoir Flicker.
Pas de panique, tout ça est très logique 🙂
Nous avons ici, dans l’ordre :
- image.ghtml, qui est le modèle de fabrication des pages qui contiendront vos images
- index.ghtml, qui est celui de vos pages d’index
- layout.css, qui définit la mise en page de ces deux dernières
- style.css, qui, comme son nom l’indique, définit le style graphique de vos pages (couleurs, tailles de police, etc).
- preview.png, qui ne sert qu’à afficher une jolie prévisualisation de votre thème dans la fenêtre de choix de thème de gThumb
- Et enfin thumbnail.ghtml, qui est un bout de code particulier aux vignettes elles-mêmes
- .
C’est bien beau tout ça, mais je modifie quoi, moi ?
Et bien, ça va dépendre de ce que vous voulez faire.
Si vous voulez modifier le look de la page (mettre les liens en rose, une photo en fond de page, changer la taille des titres de vignette), il faudra aller voir du côté de style.css. En revanche, si vous voulez, par exemple, rajouter quelque chose en bas de chaque page (si les options déjà présentées sont insuffisantes), il va falloir aller bricoler image.ghtml et/où index.ghtml. Logique, non ?
Un petit exemple ? D’accord.
Mettons que le thème Flickr me convienne, mais que je veuille en faire un nouveau en mettant la barre de navigation à gauche et le fond en noir
D’abord, on va prendre le dossier correspondant dans /usr/share/gthumb/albumthemes et le copier dans /home/djo/.gnome2/gthumb/albumthemes (histoire de travailler dans son propre dossier, pour ne pas s’emmerder avec les permissions).
Ensuite, on renomme le dossier du nom de son futur thème. C’est Flicker inversé, appellons-le donc Rekcilf. (Je sais, c’est très élégant).
Puis on réfléchis à ce qu’on veut changer. La barre de navigation à gauche ? C’est donc dans layout.css. Ouvrons-le donc. Oui, c’est un peu le bordel, surtout que c’est très mal commenté. Cela dit, avec un peu de réflexion, on s’en sort. Ici par exemple, ce qu’on veut déplacer, c’est la barre de navigation
Le code de génération des pages est heureusement commenté. On cherche "Navigation Bar" dans le code d’image.ghtml, et que trouves-t-on ?
< div class="nav_bar">
L’élément à modifier est donc div.nav_bar. On va dans cet élément là (dans layout.css, vous suivez toujours ?), et on rajoute les mots magiques :
position: absolute; left: 20px;
top: 20px;
Tant qu’on y est, on change aussi la couleur du fond : on remplace toute simplement « #f3f3f3 » par « black ».
On enregistre, on teste : ça marche !
Etape suivante, les zoulies couleurs. C’est, assez logiquement, dans style.css.
On veut changer la couleur du fond, on va donc changer « white » en « black » dans les propriétés de « body ». Même chose, on teste, ça marche.
Evidemment, je ne vous ai donné que les bases, mais c’est assez pour continuer si vous en avez envie. Bonne chance à vous ! N’hésitez pas à poser des question en commentaire.