Lors de nos débuts avec WordPress, nous avions essayé divers plugicels, comme Image Manager ou Nextgen Gallery, mais ces solutions semblaient lourdes à mettre en œuvre au quotidien. Aussi avions-nous décidé de nous passer d’images dans nos articles, d’autant que la production de photographies est coûteuse… à moins de les voler !

Or, voilà quelques jours, nous avons décidé de réaliser pour un photographe amateur un Photoblog sous WordPress. Comme nous détestons la facilité (!), nous avons décidé de ne pas recourir à une solution prête à l’emploi… Nous ne mesurions pas l’ampleur de la tâche !

Nous ne nous appesantirons pas ici sur la mise au point, somme toute complexe, du thème. En revanche, nous détaillerons comment gérer spécifiquement les images dans un thème. Le processus passe par :

• la modification de la feuille de style,
• l’ajout de fichiers spécifiques au thème,
• l’ajout d’une extension pour gérer correctement, sur le plan de l’affichage comme de la sémantique, les galeries,
• la syntaxe permettant de gérer les images.

Modification de la feuille de style

Le code permettant de gérer l’affichage des images dans un thème est largement diffusé. Pour mémoire, la syntaxe standard (mais dont la syntaxe Css est invalide !) à incorporer dans la feuille de style est :

/*-------------Images-----------------*/
p img {
  padding: 0;
  max-width: 100%
}
img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto
}
img.alignright {
  padding: 4px;
  margin: 0 0 2px 7px;
  display: inline
}
img.alignleft {
  padding: 4px;
  margin: 0 7px 2px 0;
  display: inline
}
.alignright {
  float: right
}
.alignleft {
  float: left
}
/* Begin Images */
p img {
  padding: 0;
  max-width: 100%
}
img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto
}
img.alignright {
  padding: 4px;
  margin: 0 0 2px 7px;
  display: inline
}
img.alignleft {
  padding: 4px;
  margin: 0 7px 2px 0;
  display: inline
}
.alignright {
  float: right
}
.alignleft {
  float: left
}
/* End Images */
/* Captions */
.aligncenter, div.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto
}
.wp-caption {
  border: 1px solid #ddd;
  text-align: center;
  background-color: #f3f3f3;
  color: #000;/**/
  padding-top: 4px;
  margin: 10px;
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px
}
.wp-caption img {
  margin: 0;
  padding: 0;
  border: 0 none
}
.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  padding: 0 4px 5px;
  margin: 0
/* End captions */


En dépit de ce formatage, nous nous retrouvions avec un bogue : lorsque l’image d’un article était située après le texte, avec un alignement à gauche ou à droite, elle chevauchait les méta données gérées par la classe postemetada ainsi que l’article suivant. Eurêka ! Il suffisait d’appliquer un spacer, doté de la propriété clear, pour empêcher l’image d’être adjacente. En d’autres termes, il fallait écrire :

.postmetadata {
  clear: both


Ajout de fichiers spécifiques

Trois fichiers permettent de gérer les images dans un thème :

• image.php.
• attachment.php,
• index.php.

Dans la hiérarchie des modèles, WordPress va d’abord utiliser image.php, puis attachment.php et enfin index.php.

Faute d’avoir trouvé la documentation nécessaire, y compris en anglais, nous sommes parti de la dernière version de Kubrick pour ajouter et personnaliser les deux fichiers en fonction des caractéristiques de notre thème. : cette opération est plus fastidieuse que complexe et nous ne la détaillerons pas.

Emmanuel Gorgeon a écrit un article théorique fort intéressant sur la gestion des pièces jointes par WordPress.

Dans le fichier functions.php du thème, on peut limiter la taille des images à téléverser avec cette syntaxe :

<?php
// Uploads
$GLOBALS['content_width'] = 640;
?>

Ajouts d’une extension pour gérer une galerie

Nous nous sommes ensuite intéressé à l’ajout d’une galerie d’images dans un article… Nous avons été surpris : WordPress se présente comme un Sgc nativement respectueux des standards, mais l’affichage d’une galerie rend la page non valide Xhtml Strict !

Cependant, nous avons déniché une extension écrite par le célèbre Justin Tadlock, Cleaner WordPress Gallery Plugin. Ce plugiciel, d’une taille colossale de 3 Kilo-octets (!), permet d’afficher une galerie Xhtml Strict et d’ajouter un effet Lightbox (ou Slimbox) à ces images.

Il est surprenant que cette fonctionnalité ne soit pas incluse dans WordPress par défaut.

Syntaxe pour gérer les images

Il existe une syntaxe spécifique pour gérer les images, sous forme de code abrégée (shortcode pour les anglicistes !), comme l’enseigne le Codex. Les exemples présentés sont nombreux et devraient convenir aux novices comme aux chevronnés.

À cet effet, nous avons découvert un Plugin, Cforms II, qui nous a paru ergonomique et complet.

En effet, grâce à une application Ajax, ce module d’extension permet de personnaliser les champs du formulaire. La possibilité de télécharger des pièces jointes est présente et l’on peut sélectionner le répertoire de destination ainsi que les formats supportés. Les messages sont paramétrables, y compris l’envoi d’un accusé de réception au format Txt ou Html ! Enfin, plusieurs feuilles de style sont disponibles, mais il est possible de créer la sienne comme nous l’avons fait.

L’application s’ouvre sur l’onglet cforms II ou formulaires, si la version française est activée.

Avant d’aller plus loin, il est prudent de cliquer sur le bouton Duplicate this form. Ainsi, en travaillant sur une copie, on pourra retrouver le formulaire d’origine. En cas d’erreur fatale, il est toujours possible de retourner à la configuration originale dans l’onglet Plugin Settings avec l’utilitaire Uninstalling / Removing cforms.

En revanche, lorsque le formulaire est terminé, il est judicieux de le sauvegarder en utilisant l’outil Database Input Tracking disponible dans l’onglet global settings et de songer à mettre à jour son utilitaire de sauvegarde afin qu’il prenne en compte les nouvelles tables. En cas de réinstallation de WordPress, on pourra retrouver la configuration en utilisant le bouton Restore settings de l’onglet cforms II.

Pour inclure le formulaire dans une page, il suffit de taper la commande :

<!--cformsX-->

où X représente le numéro du formulaire qui commence à 2, et ainsi de suite…

Comme le quatrième onglet, Help, apporte des explications claires sur l’utilisation de Cforms II, nous ne les développerons pas ici. Un forum d’aide est disponible.

Néanmoins, nous souhaiterions évoquer la protection Captcha, c’est-à-dire le test public de Turing complètement automatique ayant pour but de différencier les humains des ordinateurs, proposée par l’application : ce genre de test n’est pas accessible aux déficients visuels.

Cette précaution est d’autant plus facile à mettre en œuvre qu’Oliver Seidel, brillant concepteur de Cforms II, propose aussi l’outil Q&A, Questions and Answers. À l’instar du test de Turing, cette technique vise à se prémunir des soumissions automatisées : seul un humain peut répondre à une question posée en langage naturel, comme de quelle couleur est la neige ?

C’est une question récurrente dans les Q&A, et nous doutons de sa simplicité pour les… déficients visuels ! De plus, la couleur de la neige peut amener deux réponses en français, blanche ou… blanc (!), et il ne faut pas être contraignant à l’excès avec les utilisateurs d’un formulaire.

Pour notre part, nous préférons utiliser un test Q&A fondé sur quatre questions posées aléatoirement. Quelle est la capitale de la France ? Quelle est la capitale de la Belgique ? Quelle est la capitale de l’Italie ? Quelle est la capitale de l’Espagne ?. (Il vaut mieux éviter l’Allemagne ou la Suisse.) Une seule réponse est possible (pour un francophone !), sachant que la casse n’est pas prise en compte.

Certains auteurs indiquent que la protection par Q&A est facile à contourner. Il suffit de recharger la page à plusieurs reprises pour noter chaque réponse ! Néanmoins, nous imaginons mal un hacker moyen perdre du temps : il préfèrera s’attaquer à un autre site.

<addendum>

23/08/2008.

Au moins depuis la version 8.6.2, Cforms II n’affiche pas les champs de sécurité, lorsqu’on affiche la page du formulaire en étant connecté comme administrateur !

</addendum>

Cforms II peut gérer les commentaires des articles, mais cette option ne nous semble guère intéressante, hormis peut-être pour mettre en place une protection contre le spam. Sur ce point, nos préférons Askimet qui permet d’éliminer le pourriel a posteriori sans coup férir, et il nous semble inutile de contraindre inutilement nos contributeurs.

Last but not least, Cforms II dispose d’une excellente traduction française établie par Serge Rauber de Kalyx Studio, qui a poussé le zèle jusqu’à fournir des images de remplacement dans la langue de Molière pour l’interface d’administration.

À l’usage, nous avons souvent rencontré un conflit entre Cforms II et NextGen Gallery. Parfois, le dysfonctionnement se résout spontanément, avant de réapparaître au fur et à mesure des mises à jour ! Nous pensons que l’ordre d’activation de ces plugiciels peut avoir une influence : peut-être convient-il de désactiver le second avant d’installer le premier… Nous n’apprécions guère ces contorsions logicielles !

Comme la complexité de Cforms II peut rebuter certains blogueurs, une alternative existe sous la forme de Contact Form. Hélas, cet outil rudimentaire ne gère pas les réponses automatiques, et ne permet pas de proposer l’envoi de pièces jointes avec un formulaire.

NextGen Gallery dispose d’une traduction excellente en français, téléchargeable sur le site de Lise. Comme avec l’ensemble des modules d’extension francisés, la méthode la plus simple consiste à télécharger, décompresser et ajouter les fichiers en français dans le répertoire lang du Plugin, lui-même téléchargé et décompressé. Ensuite, on envoie l’unique répertoire converti sur le serveur. En principe, dès l’activation du plugiciel, le français est alors disponible.

NextGen Gallery ne dispose pas encore de documentation, mais les forums d’Alex Rabe sont actifs.

NextGen Gallery installe automatiquement un deuxième Plugin NextGen Gallery Widget que nous n’avons pas encore utilisé.

Nous n’allons pas détailler ici l’installation, car elle est simple. Par contre, comme avec l’ensemble de ces outils, l’installation du module d’extension crée épertoire nommé Gallery dans wp-content dont il faut changer, grâce à son logiciel Ftp comme l’excellent FileZilla, les attributs en lecture, écriture, exécution du propriétaire, du groupe et permissions publiques, c’est-à-dire en d’autres termes appliquer un change mod (chmod) de 777.

L’installation provoque l’ajout d’un bouton Galerie à côté du Tableau de bord dans l’interface d’administration, qui permet de gérer les images et les options. Trop nombreuses, nous ne les décrirons pas ici in extenso.

À la première utilisation, nous avons été perplexe… Quelle était la différence entre une galerie et un album ? Nous ne parvenions pas non plus à afficher une page comprenant une simple galerie d’images : à chaque fois, il était demandé de cliquer sur un lien pour les afficher.

En fait, comme l’explique Alex Rabe, une galerie est une collection d’images ; un album est une collection de galeries.

À ce propos, la gestion des albums est étonnante : elle s’effectue par glisser-déplacer comme les widgets des thèmes de WordPress

Attention à la dénomination trompeuse de l’onglet Ajouter une nouvelle galerie ! Il permet aussi d’ajouter des images (sous forme d’un fichier compressé, d’un répertoire, ou d’une image) à une galerie existante… À la fin du téléchargement, est choisie la galerie de destination.

Pour afficher une page contenant les images, il faut noter l’identifiant de la galerie dans la page principale Gérer les galeries de l’interface de NextGen Gallery.

Ensuite, est écrite la page, qu’on nommera Photographies par exemple, contenant l’identifiant de la galerie à afficher, qui est de la forme suivante :

[gallery=id]

Enfin, on retourne dans la page de la galerie spécifiée via Gérer les galeries de l’interface de NextGen Gallery. Si l’identifiant a été saisi correctement, on doit voir notre page Photographies dans le menu déroulant Lier la page à. Sélectionner Photographies. Dans Créer une nouvelle page, laisser page principale (pas de parent), puis cliquer sur le bouton Sauvegarder les modifications.

La galerie s’affiche désormais (!) dans notre page Photographies sous forme de vignettes cliquables.

Dans la page de la galerie spécifiée, on peut empêcher l’affichage d’une image, y ajouter une description et modifier le contenu des champs alt et title. Attention, l’apostrophe, même échappée, ne fonctionne pas dans ces balises : il faut recourir à son équivalent numérique. Les modifications des images sont automatiquement répercutées dans la page Photographies.

Dans Galerie > Options > Images, on peut vouloir intégrer un diaporama (et d’en modifier l’invite), mais cette option n’a pas fonctionné durant mes tests. On peut aussi créer un diaporama en Flash avec Jw Image Rotator version 3.9. Après décompression de l’archive, il suffit d’ajouter le fichier swf à la racine du Plugin.

Dans Galerie > Options > Effets, il est possible de configurer l’effet JavaScript. Si Thickbox est présent par défaut, on peut choisir Lightbox et NextGen Gallery génèrera le code adéquat.

Pour ma part, nous avons choisi de conserver la Slimbox, car nous n’avons pas su comment franciser l’affichage des images avec Thickbox !

Watermark permet de signer ses images, en choisissant le contenu du texte, sa couleur et même la… police ! si elle est disponible dans le répertoire fonts du Plugin.

Nous ne sommes plus certain que la trace de séchage chère aux québécois soit fonctionnelle ! Pour autant, nous déconseillons formellement l’emploi de Mareki’s Watermark, lourd à mettre en œuvre, qui peut déstabiliser le fonctionnement de WordPress. Il vaut mieux ajouter une watermak à la main, via un calque sur son image.

Dans l’éditeur visuel de TinyMce, une icône $lang_NextGEN_desc est ajoutée, qui permet de gérer une galerie, un album ou une image pendant la rédaction d’un article ou d’une page. De même, un onglet Gallery, disposant des mêmes fonctionnalités, est disponible sous la fenêtre d’édition.

Cforms II et NextGen Gallery peuvent entrer en conflit. Pour résoudre le problème, il faut essayer de désactiver les deux extensions, d’activer Cforms II puis NextGen Gallery.

<addendum>

12/08/2007.

À juste titre, Lise nous dit que l’icône ou l’onglet dans TinyMce permet de se passer de l’instruction :

[gallery=id]

Que Lise soit remerciée de sa remarque !

</addendum>

Au total, NextGen Gallery est un excellent outil qui manque d’ergonomie, mais Alex Rabe s’engage à y remédier, même si cette situation se prolonge !