10/08/2007.

Depuis la rédaction de cet article, nous avons découvert NextGen Gallery d’Alex Rabe… auteur de Wp-Table ! En fait, nous sommes retourné sur son site, car nous nous étions aperçu que la présence de deux tableaux sur la même page avec un identifiant unique invalidait notre code Xhtml par le W3c ! Notre visite de ce matin nous a permis de résoudre ce souci… définitivement !

Nous reviendrons prochainement sur le Plugin NextGen Gallery. En attendant, et plutôt que supprimer cet article, nous modifions légèrement le texte suivant et en supprimons les images, car il peut donner des idées d’application de Wp-Table à des utilisateurs de WordPress.

</addendum>

Dans notre quête du weblogue idéal, nous nous sommes penché sur la création d’une galerie d’image avec WordPress Nous avons testé (presque) tous les modules d’extension proposé sur WordPress, sans y trouver notre bonheur : soit leur présentation ne nous convenait pas, soit leur fonctionnement était erratique.

Nous nous sommes souvenu alors de nos premiers pas avec Html… En effet, avant de maîtriser les feuilles de style, nos mises en page étaient basées sur des tableaux sans bordures. Ainsi étions-nous sûr de voir les éléments de notre page affichés à l’endroit prévu. Cette technique de présentation est aussi valable avec les logiciels de traitement de texte.

Certes, le recours à des tableaux est discutable, comme le démontre avec talent Mathieu Pillard d’Openweb, mais… faute de grives, on mange des merles.

Nous avons donc cherché dans cette direction… Initialement, nous nous sommes fourvoyé avec Miwa Editor Mu, qui ajoute des boutons à l’interface TinyMce permettant de créer des tableaux. Hélas, ce plugiciel, de plusieurs Mega-octets (!), n’a jamais voulu fonctionner !

Nous avons découvert Wp-table. C’est une « solution » !…

Le téléchargement par défaut comprend une traduction approximative en français.

Lorsque le module d’extension est installé et activé, Wp-Table s’administre depuis le menu Gérer avec l’onglet Tables. L’interface permet d’ajouter un nouveau tableau : il suffit de le nommer et de choisir le nombre de colonnes et de lignes (la traduction en français de ces champs est incorrecte, il ne s’agit pas de numéro mais de nombre !). Curieusement, le menu déroulant ne permet pas de créer un tableau avec une seule ligne ou colonne, mais ces caractéristiques pourront être modifiées ultérieurement. Lorsque le tableau est prêt, son nom apparaît dans la liste Gestion de la table. Un clic sur Editez permet à présent de modifier la présentation et le contenu des lignes et des colonnes.

Ici, imaginons que l’on veuille aligner deux images de Paris : la première sera une photo du musée du Louvre et la seconde représentera le quartier de la Défense. Deux colonnes sur une seule ligne seront donc nécessaires. Un clic sur Supprimer à la deuxième ligne permet de ne travailler qu’avec une seule ligne, après un message de confirmation.

À présent, il ne reste plus que deux cases, où l’on va insérer le code appelant chaque image.

Pour la première photo…

<img border="0" width="67" height="100" src="http://www.iptima.com/wp-content/uploads/paris/paris_a.jpg" alt="le musée du Louvre" title="le musée du Louvre" />

Pour la seconde photo…

<img border="0" width="75" height="100" src="http://www.iptima.com/wp-content/uploads/paris/paris_b.jpg" alt="le quartier de la Défense" title="le quartier de la Défense" />

Comme le champ de saisie est réduit, il sera judicieux de recourir à un éditeur de texte, comme l’excellent Pspad afin de « copier-coller ».

Dans le cadre de ce premier travail, on ignorera la proposition Editer la largeur ; en fait, cette option permet non seulement de modifier la largeur, mais aussi de spécifier l’alignement dans chaque cellule (à gauche, au centre, à droite).

Maintenant, un clic sur la case Mise à jour permet d’enregistrer les codes Html des deux images, avant de modifier les caractéristiques du tableau.

Dans option de la table, il convient de décocher chaque case.

Dans option générale, largeur de bordure, on peut indiquer 0. Ainsi, il sera inutile de modifier les couleurs de bordure et de ligne de titre. En revanche, pour obtenir un résultalt plus agréable à l’œil, on doit inscrire les valeurs 10 dans Largeur de cellules et Marge de cellules.

Un clic sur Mise à jour permet de finir le travail.

Dans l’éditeur visuel TinyMce, une icône $lang_wpTable_desc est désormais installée. Un clic sur ce bouton permet d’ajouter la tableau. Une fenêtre s’ouvre et propose Selectionner table via un menu déroulant. Lorsque le tableau est choisi, il faut cliquer sur Gestion de la table. Le code s’insère alors dans l’article ou dans le billet avec une syntaxe de forme :

[TABLE=1]

Comme nous n’avons pas trouvé le moyen de centrer le tableau avec Wp-Table, nous avons tenté de contourner la difficulté en écrivant :

<center>[TABLE=1]</center>

Le centrage fonctionne, mais sa syntaxe n’est pas valide !

Certes, la présentation du tableau demande à être améliorée (modification de couleurs, ajout de légendes…) mais, pour débuter, nous pensons que cette approche est intéressante.

Sans doute peut-il sembler contraignant d’entrer le code Html des images à la main (ou de copier-coller le code généré dans un brouillon), mais le jeu en vaut la chandelle.