D’abord, les résolutions des écrans sont multiples, les navigateurs parfois spécifiques, plus ou moins élaborés, voire conformes. Il faut donc trouver un poids moyen, car il serait vain de concevoir une version dédiée pour chaque modèle ! Le succès actuel de l’iPhone peut, toutefois, conduire à envisager un développement spécifique pour des raisons de stratégie commerciale.

Aussi, utilisons-nous deux outils en ligne pour émuler le fonctionnement des périphériques de poche :

• Opera Mini Demo,
• dotMobi.

Dès que le rendu est correct avec Opera Mini Demo et validé par le W3C mobileOK Checker (la page d’accueil Iptima obtient le score de 99/100 et le présent article 98/100… scores perfectibles !), nous validons le développement.

Ensuite, certains navigateurs de périphériques de poche n’identifient pas le medium Handled dans l’en-tête des pages Html, et ne retiennent que le medium Screen !

Afficher un contenu identique est illusoire, n’en déplaise aux tenants des mises en page liquides ou fluides : les bannières ou les images ne sont pas redimensionnables le plus souvent, et toujours trop larges pour un téléphone, et leur largeur est forcément fixe !

Aussi faut-il servir un contenu spécifique pour les périphériques de poche, soit en l’adaptant soit en le créant. Le principe est simple… Lors de la demande de connexion, le navigateur est identifié : s’il est reconnu comme mobile, il est redirigé vers le contenu alternatif. Sur le plan technique, la mise en œuvre n’est guère plus compliquée (il suffit de consulter Iptima avec son radio-téléphone ou d’utiliser Opera Mini Demo pour voir une illustration !), mais dépasserait le cadre de cet article. Nous essaierons d’y revenir prochainement.

Une feuille de style pour périphérique de poche doit être courte, car le délai de son téléchargement a de l’importance. De plus, il est inutile de vouloir perfectionner à outrance l’aspect de la page, car certains navigateurs restent sourds aux raffinements (comme la suppression des puces dans les listes), et il vaut mieux se concentrer sur l’essentiel : marges et couleurs, à assortir au site principal.

À l’instar des feuilles de style dédiées à l’impression, nous avons décidé d’utiliser essentiellement des unités relatives et réduites, en raison de l’étroitesse de l’écran, avec l’unité em ou %. L’affichage des polices de caractères se limite à une seule valeur. Les largeurs des bordures sont relatives. Nous avons aussi renoncé à appliquer un fond de couleur pour recourir à un arrière-plan transparent. Les images sont toujours centrées, en raison de l’étroitesse de l’écran.

body {
  background-color: transparent;
  color: #000000;
  font-family: sans-serif;
  /* Permet de spécifier une police sans empattements plus lisible sur un écran. */
  font-size: 1em;
  margin: 1em
}
#header {
  border-bottom: medium solid #ffa97a;
  border-top: medium solid #ffa97a;
  padding-bottom: 0.25em;
  text-align: center
}
img {
  display: block;
  margin-left: auto;
  margin-right: auto
}
ol.commentlist li, ol.pinglist li {
  border: thin dotted #666666;
  list-style-position: inside;
  list-style-type: decimal;
  margin: 0.9375em 0 0 0.9375em;
  /* margin: 15px 0 0 15px; dans la feuille de style pour l'écran du site principal */
  padding: 0.3125em;
  /* padding: 5px; dans la feuille de style pour l'écran du site principal */
}


Nous pouvons aussi cacher certains conteneurs, même si le contenu alternatif devrait permettre d’obvier à l’affichage de ces éléments…

#adsense, #advertising {
  display: none


Enfin, nous avons prévu d’afficher la signification des acronymes juste après leur affichage avec les pseudo-classes abbr:after, abbr:after, car l’équivalent des souris sur les Pda ne permettent pas toujours le survol. Ainsi, le lecteur connaît instantanément la signification. Tant pis pour les téléphones et les utilisateurs qui ne reconnaîtront pas cette règle…

acronym:after, abbr:after {
  content: " ["attr(title)"]";
  text-decoration: none


Attention ! il est tentant de redimensionner les images trop larges avec une feuille de style : l’image originale sera téléchargée, et obligera le navigateur à effectuer le redimensionnement, ralentissant l’affichage de la page.

Les feuilles de style dédiées à l’impression sont toujours reconnues avec les navigateurs, contrairement à handled pour les périphériques de poche : pourquoi utiliser une solution complexe et coûteuse en ressources comme JavaScript ou Php ?

Si une impression normée s’avère souhaitable, il vaut mieux alors générer un document Pdf à la volée.

Cependant, il n’est pas judicieux de concevoir une feuille de style sophistiquée dans les moindres détails : comme le recours à l’impression reste marginal, les règles peuvent être rudimentaires.

Aussi avons-nous décidé de lâcher prise pour l’impression : nous allons utiliser des unités relatives avec em, nous ne spécifierons pas une police de caractères, et afficherons du noir et blanc. Ainsi, le navigateur gèrera par défaut l’impression… avec des résultats moins hasardeux !

En revanche, nous avons développé une solution spécifique pour la gestion des liens, des acronymes et des images, qui permet de tirer parti astucieusement des spécificités du medium Print.

Quelques propriétés…

D’abord, appelons le medium Print dans l’en-tête de nos pages Html…

<link rel="stylesheet" href="http://www.monsite.com/styles/print.css" type="text/css" media="print" />


Réglons ensuite l’apparence de notre site…

body {
  color: #000000;
  /* Nous imprimons en noir et blanc */
  font-family: serif;
  /* Permet de spécifier une police à empattements plus lisible sur le papier. */
  font-size: 1em;
  margin: 1.5em
}


Ensuite, cachons les éléments purement décoratifs ou non significatifs, images ou non…

#adsense, #advertising {
  display: none
}


Imprimons nos liens en noir et blanc…

h1, h2, h3, h4, h5, h6 {
  color: #000000;
  padding: 0.5em;
  text-align: center;
  text-decoration: none
}
h1.a, h1 a:link, h1 a:visited, h2.a, h2 a:link, h2 a:visited, h3.a, h3 a:link, h3 a:visited, h4.a, h4 a:link, h4 a:visited, h5.a, h5 a:link, h5 a:visited, h6.a, h6 a:link, h6 a:visited {
  color: #000000;
  text-decoration: none
}


Préférons les unités relatives pour les bordures…

.postmetadata {
  border: thin solid #999999;
  /* Il existe trois unités relatives pour désigner la largeur de la bordure : 'thin', 'medium', ou 'thick'. */
  margin: 1em;
  padding: 1em
}


Continuons à jouer avec les unités relatives…

ol.commentlist li, ol.pinglist li {
  border: thin dotted #666666;
  list-style-position: inside;
  list-style-type: decimal;
  margin: 1.5em 0 0 1.5em;
  /* margin: 15px 0 0 15px; dans la feuille de style pour l'écran */
  padding: 0.5em;
  /* padding: 5px dans la feuille de style pour l'écran */
}


Gestion des liens et des acronymes

Par défaut, les liens et les acronymes sont imprimés en l’état, c’est-à-dire soulignés ou non. Néanmoins, un lien souligné n’est guère informatif pour le lecteur de la version imprimée, et il devra retourner sur le site pour retrouver l’adresse ! Aussi pourquoi ne pas afficher l’adresse du lien ou la signification de l’acronyme juste après l’affichage ? Css permet aisément de spécifier la propriété avec :a:after…

h1 a:after, h2 a:after, h3 a:after, h4 a:after, h5 a:after {
  border-bottom: thin solid #000000;
  content: " ["attr(href)"]";
  /* Noter l'espace juste après le premier guillemet pour éviter que le contenu ne colle au lien. */
}
acronym:after, abbr:after {
  border-bottom: thin dotted #000000;
  content: " ["attr(title)"]"
}


Gestion des images

Pour les images, il ne semble pas toujours utile de les imprimer. En effet, la plupart des images ne présente aucune valeur informative, et l’impression d’une image d’une résolution de 72 pixels par pouce se révèle souvent catastrophique. C’est pourquoi, nous avons pris le parti de ne pas les afficher à l’impression (au passage, les droits d’auteur sont ainsi préservés), mais de signaler leur existence par deux moyens : avec le contenu de la balise alt, d’une part, et, d’autre part, avec la mention [img] (nous avons repris sobrement le nom de la balise Html pour assurer l’internationalisation de la feuille de style). Ces deux affichages peuvent sembler redondants, mais la pseudo-classe img:after n’est pas gérée par tous les navigateurs. Ainsi, le lecteur ne perd aucune information essentielle !

dl.gallery {
  text-align: left /* Nos images sont placées dans des listes de définition */
}
.gallery_dt, .gallery_dd {
  margin-left: 0 /* Évite le décalage à droite imposé par le navigateur */
}
.gallery dt a img {
  display: none
}
.gallery dt a img:after {
  content: " ["attr(alt)"] [alt]"
}
.gallery dt:after {
  color: #333333;
  content: "[img] ";
  font-style: italic
}
.gallery dd:after {
  color: #333333;
  font-style: normal
}
.gallery dt, .gallery_dd {
  font-style: italic
}


Nota. Le marquage sémantique d’une liste de définition permet une gestion plus fine de l’affichage.

Si l’on ne souhaite pas se passer de l’impression des images, peut-être vaut-il mieux proposer, à titre alternatif, le téléchargement d’une image à la résolution spécifique.

En revanche, nous ne savons pas gérer correctement les veuves (Widows) et les orphelines (Orphans) pour éviter l’affichage disgracieux de lignes isolées en haut ou en bas de page : gageons que Css 3, voire l’évolution des navigateurs, permettra de combler nos attentes de typographe !

Lien intéressant : Faites bonne impression avec les CSS.

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.

Aussi avons-nous cherché une solution nous permettant de rendre accessible notre weblogue.

Après avoir décrit les principes de l’accessibilité, nous essaierons de dégager des solutions pour WordPress

Considérations générales sur l’accessibilité

Rendre un site accessible, c’est permettre sa consultation non seulement par des déficients visuels ou moteurs (sans compter les handicapés auditifs, cognitifs ou neurologiques), mais aussi par des internautes disposant d’une connexion en bas débit assurée par Rtc ou par Gsm. Enfin, c’est respecter la navigation et prendre en compte les différences linguistiques. La connaissance de ces contraintes et des solutions correspondantes permet de mieux concevoir ses pages au bénéfice de l’ensemble de ses visiteurs.

Accessibilité pour les déficients visuels

Les déficients visuels correspondent aux mal-voyants, daltoniens et aux aveugles. Pour les mal-voyants, il faut autoriser un redimensionnement du texte en utilisant des tailles de police proportionnelles. Idéalement, il faudrait que l’ensemble des valeurs des feuilles de style soient exprimé en valeurs relatives, par exemple avec l’unité em. Le contraste doit être suffisant entre les entre couleur de texte et couleur de fond pour les daltoniens.

Quant aux non-voyants, ils utilisent des lecteurs Braille. JavaScript ne peut servir à naviguer ou à informer, sans équivalents textuels. Autrement exprimé, le langage JavaScript ne doit ajouter qu’une fonctionnalité supplémentaire mais ne jamais la remplacer. Pour la même raison, les textes ne peuvent être affichés sous la forme d’images. Les images doivent être légendées avec les balises alt et title ; lorsque les images ne sont pas significatives, c’est-à-dire décoratives, les balises peuvent être laissées vides.

Il faut utiliser Css et la sémantique Xhtml en renonçant à l’usage de tableaux pour la mise en page, hormis pour la présentation de données. Pour ne pas pas entretenir la confusion, un lien hypertexte doit s’ouvrir dans la même fenêtre. Il convient de préciser dans le lien hypertexte la langue utilisée, lorsque la ressource est dans une langue différente de celle du texte ; à cet effet, on utilise dans l’appel du lien une balise de forme pour un document en anglais. Enfin, la signification des acronymes doit être précisée, car elle est lue par les lecteurs Braille.

Afin de valider l’accessibilité de son site pour les déficients visuels, la solution la plus probante consiste à utiliser un navigateur en mode texte : si chaque information est affichée, la conception du site est correcte.

Accessibilité pour les handicapés moteurs

Comme les handicapés moteurs ne peuvent recourir à une souris, il faut envisager une navigation spécifique. À cet effet, le concepteur d’un site peut prévoir que la navigation s’opérera à l’aide la touche tabulation du clavier : chaque lien hypertexte (ou entrée de formulaire) est affecté d’une valeur tabindex. Prenons la valeur tabindex= »3″ : depuis le haut de la page, trois appuis sur la touche tabulation donneront le focus à ce lien, qui s’ouvrira en pressant la touche Entrée. Pour informer le visiteur de la valeur, il suffit de l’indiquer dans la balise title du lien. Lorsqu’aucun tabindex n’est défini dans la page, l’appui sur la touche tabulation permet en principe de naviguer de lien en lien, du haut en bas de la page.

Une autre solution passe par la mise en œuvre de raccourcis claviers (ou Accesskeys) : l’utilisateur appuie sur une combinaison de touches pour parvenir à l’information souhaitée. Cette solution, séduisante en théorie, n’est pourtant pas la panacée. En effet, les raccourcis clavier demandent des contorsions digitales à un utilisateur handicapé ! Ensuite, même lorsqu’ils sont reconnus par les agents utilisateurs, les raccourcis clavier peuvent entrer en conflit avec les raccourcis implémentés dans ces navigateurs. Pour cette raison, le nombre d’Accesskeys est fort limité. Le gouvernement britannique fournit des directives d’accessibilité en proposant les raccourcis claviers suivants :

• S – passer la navigation
• 1 – accueil
• 2 – actualités
• 3 – plan du site
• 4 – recherche
• 5 – foire aux questions
• 6 – aide
• 7 – procédure de plainte ou contact
• 8 – conditions d’utilisation
• 9 – retour d’information
• 0 – liste des raccourcis clavier

Ainsi, pour utiliser le raccourci clavier 0, il suffira d’ajouter au lien la valeur Accesskey= »0″.

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 !

04/03/2009.

Le fonctionnement d’Iptima a changé en un an et demi… ImageManager a été largement oublié… En outre, nous n’utilisons plus l’extension Slimbox ! Nous avons préféré ajouter à notre thème le code de la Slimbox en dur, comme le propose Christophe Beyls, concepteur originel de la Slimbox, avec JQuery.

Nota. L’effet Slimbox n’est pas réservé aux sites fonctionnant sous WordPress !

Pour ne pas pénaliser les lecteurs et dans un but didactique, l’article est laissé en l’état, mais sans les images. Pour autant, nous garantissons que les codes fonctionnaient lors de la rédaction de l’article… même si l’informatique est parfois capricieuse !

</addendum>

Aujourd’hui, nous nous sommes mis en quête d’un outil afin de pouvoir agrandir les photos présentes sur le weblogue.

Sans doute aurions-nous pu nous contenter de l’outil pour agrandir proposé par ImageManager que nous utilisions alors, mais il ne nous satisfaisait pas : nous trouvions la présentation des images austère et nous voulions un effet plus dynamique. Ici, nous avons longtemps hésité entre Lightbox et son fils, Slimbox. Nous avons fini par adopter le dernier pour plusieurs raisons… Nous apprécions son installation, car il ne nécessite pas de modifier certains fichiers. Il permet d’ajouter une légende aux photos agrandies. Il autorise la navigation d’images en images en ajoutant un code simplissime. Enfin, il affiche correctement les caractères accentués et les apostrophes.

Passons à la pratique…

Avec une image

Il est demandé à ImageManager de créer une miniature avec lien sur l’image. ImageManager a généré le code suivant :

<a rel="lightbox" href="/wp-content/uploads/bordeaux/bordeaux_a.jpg"><img src="/wp-content/uploads/bordeaux/.thumbs/.bordeaux_a.jpg" title="le Miroir d'eau à Bordeaux" style="photos" class="photos" width="96" height="72" hspace="5" vspace="5" border="0" /></a>

Pour que la photo agrandie comporte un titre en bas à gauche, il a fallu donner un titre à la lightbox. Le code a été modifié ainsi :

rel="lightbox" title="le Miroir d'eau à Bordeaux"

La photo agrandie comporte alors une image et, sur le côté inférieur, une légende et un bouton fermer.

Avec une galerie d’images

À présent, nous allons voir que Slimbox permet de naviguer entre les images agrandies avec l’instruction rel=lightbox[roundtrip].

Le code généré par ImageManager ne change évidemment pas.

En revanche, l’appel à la lightbox sur chaque image est rédigé comme suit :

rel="lightbox[roadtrip]"

Là encore, il convient de ne pas oublier l’attribut title à la lightbox si l’on veut une légende en bas à gauche de l’image agrandie.

Lorsque l’image est agrandie, la légende de l’image et le bouton fermer sont toujours présents. De plus, il suffit de diriger la souris vers l’un des côtés de l’image pour que les boutons précédent ou suivant apparaissent.

Certes, ces boutons de navigation ne sont guère accessibles… Voilà pourquoi, aucun texte n’invite l’utilisateur à agrandir l’image ! Si l’internaute est novice ou handicapé, il n’utilisera pas le JavaScript, et sa navigation n’en sera pas affectée. Quand au visiteur confirmé, il cliquera sur l’image, mais son expérience lui permettra de naviguer sans difficultés.

Dans la version originale de Slimbox, les boutons étaient en anglais. Nous avons donc voulu les changer. Faute d’avoir réussi à produire un texte net avec nos outils de dessin, nous nous sommes contenté des symboles. Nous avons aussi francisé un terme dans le code JavaScript à la ligne no 144 du fichier slimbox.js afin que le mot of soit remplacé par de. Ainsi peut-on lire Image 1 sur 3 au lieu de Image 1 of 3. Enfin, nous avons modifié la feuille de style afin d’assortir le couleur de fond au reste de notre weblogue.

Par contre, nous avons rencontré deux problèmes durant l’installation : le premier concerne une erreur d’appel à un fichier, le second l’activation en français.

En effet, lorsque nous avons voulu aller une première fois sur la page d’administration d’ImageManager, nous nous sommes retrouvé dans une page vide ! Une recherche sur Google nous a permis de constater qu’il fallait modifier le fichier imagemanager-Plugin.php.

Ainsi fallait-il remplacer…

options-general.php?page=imagemanager-plugin

par…

options-general.php?page=wp.php

Moins gênante mais plus agaçante fut l’utilisation d’ImageManager en français (qui n’est pas indispensable – mais lorsque nous voulons voir une application opérationelle, nous avons tendance à nous obstiner !). En fait, nous avons réussi en désactivant le Plugin puis en le supprimant. Nous avons alors ajouté les fichiers en français aux fichiers defaut dans le répertoire lang, puis téléchargé l’ensemble par Ftp. La deuxième activation du Plugin a été correcte !

Bravo à Per Søderlind pour ce Plugin génial !