Voici un problème relativement simple à formuler, mais dont la solution ne saute pas aux yeux. Après avoir parcouru en vain les arcanes du Web francophone puis anglophone, nous avons développé notre propre technique, que nous présentons ici.

Nota. Dans notre présentation, par commodité, O désignera une image, tandis que X désignera une espace. (C’est notre modeste contribution à l’Ascii Art !) Nous partirons aussi du postulat qu’une galerie correspond à des images de petites tailles alignées les unes avec les autres sur une page, dont leur largeur (et, idéalement, leur hauteur !) est équivalente.

Ainsi, pour cinq images, l’affichage sur une colonne s’effectue ainsi…

OXOXOXOXO

Pour les images restantes, le navigateur renvoie logiquement, sauf instruction contraire, les images restantes les unes à la suite des autres…

S’il reste quatre images…

OXOXOXOXX

S’il reste trois images…

OXOXOXXXX

S’il reste deux images…

OXOXXXXXX

S’il reste une image…

OXXXXXXXX

Or, ce résultat ne nous semble pas satisfaisant sur le plan visuel, car nous avons une fâcheuse tendance à cultiver la symétrie (… qui peut expliquer certains choix esthétiques… étonnants !).

Nous voulons obtenir l’affichage suivant…

S’il reste quatre images…

XOXOXOXOX

S’il reste trois images…

XXOXOXOXX

S’il reste deux images…

XXXOXOXXX

S’il reste une image…

XXXXOXXXX

Ainsi l’affichage nous semblera harmonieux, puisque les espaces seront équilibrés. Il ressemblera à :

OXOXOXOXO
XOXOXOXOX
XXOXOXOXX
XXXOXOXXX
XXXXOXXXX

Autrement posé, il s’agit de styler différemment les lignes complètes et la ligne incomplète, orpheline.

Aussi allons-nous motoriser les images. Nous utilisons Php, mais le raisonnement peut être transposé à d’autres langages de programmation.

Programmons les images

Retournons à l’école pour un raisonnement arithmétique simple… Le nombre d’images à afficher (inconnu à l’avance – sinon, l’effort serait inutile !) est-il divisible par 3, dans l’ensemble des nombres entiers Z ? Dans l’affirmative, des lignes pleines s’afficheront. Dans la négative, quel sera le reste de la division ? 2 ou 1.

Ainsi…

• … pour 58 images, 58/3 = 19 images, reste 1 image ;
• … pour 104 images, 104/3 = 34 images, restent 2 images.

(Pour une ligne de cinq images, le même raisonnement conduirait à avoir cinq cas possibles.)

Voici un exemple de code…

<?php
$images = array('paris.jpg', 'marseille.jpg', 'lyon.jpg', 'lille.jpg', 'strasbourg.jpg');
$result = count($images);
$target = 3;
/* La "cible" (c'est-à-dire une ligne "pleine") est de trois images */
$orphans = fmod($result, $target); // "orphans" comme "orphelines"
/* 'fmod' retourne le reste d'une division */
$total = ($result - $orphans); // "total" pour une ligne pleine
foreach($images as $key => $image)
/* Nous utilisons la deuxième forme d'une boucle 'foreach' qui permet d'utiliser la valeur $key utile dans les calculs. */
{
  if (($key + 1) <= $total) // Pour trois images
/* La valeur + 1 permet d'éviter que le résultat soit égal à zéro à la fin de la boucle. Nous aurions pu assigner la valeur au début des instructions... pour ne pas avoir à la ré-écrire ensuite dans les deux conditions suivantes ! Tant que le total n'est pas dépassé, l'instruction s'applique. */
    {
      echo '<dl class="gallery_c">'; // On créée la liste de définition "gallery_c" (voir ci-dessous)
    }
  else
    {
    if ((($key + 1) > $total) && ($orphans == 2)) // Pour deux images
/* La première condition permet de vérifier que le total est dépassé. S'il ne reste plus de lignes pleines et que le nombre d'images restantes est de deux, l'instruction s'applique. */
      {
        echo '<dl class="gallery_b">'; // On créée la liste de définition "gallery_b", (voir ci-dessous)
      }
    if ((($key + 1) > $total) && ($orphans == 1)) // Pour une image
/* La première condition permet de vérifier que le total est dépassé. S'il ne reste plus de lignes pleines et que le nombre d'image restante est de une, l'instruction s'applique. */
      {
        echo '<dl class="gallery_a">'; // On créée la liste de définition "gallery_a" (voir ci-dessous)
      }
  }
  echo $image;
/* La boucle 'foreach' affiche ensuite chaque image tour à tour. */
  echo '</dl>'; // On ferme la liste de définitions
}
?>

Ou sans les commentaires…

<?php
$images = array('paris.jpg', 'marseille.jpg', 'lyon.jpg', 'lille.jpg', 'strasbourg.jpg');
$result = count($images);
$target = 3;
$orphans = fmod($result, $target);
$total = ($result - $orphans);
foreach($images as $key => $image)
{
  if (($key + 1) <= $total)
    {
      echo '<dl class="gallery_c">';
    }
  else
    {
    if ((($key + 1) > $total) && ($orphans == 2))
      {
      echo '<dl class="gallery_b">';
    }
      }
    if ((($key + 1) > $total) && ($orphans == 1))
      {
        echo '<dl class="gallery_a">';
      }
  }
  echo $image;
  echo '</dl>';
}
?>

Les images ont été placées dans un tableau à titre didactique. Naturellement, en production, il faudra recourir à une méthode plus simple.

C’est pourquoi, nous présentons le code utilisé avec WordPress, mais qui peut être utilisé dans n’importe quel environnement…

<?php
$gallery_bottom = get_post_meta($post->ID, 'gallery_bottom', false);
/* Avec WordPress, 'get_post_meta' permet de récupérer le(s) enregistrements correspondant dans une table MySql. Ensuite, on retrouve l'interaction habituelle entre Php et MySql. Les enregistrements des images sont enregistrées dans une table sous la forme : source, titre, légende (optionnel), Copyright (optionnel)...
http://www.monsite.com/uploads/france.jpg,france,photo de la France,© Wikimedia Commons
http://www.monsite.com/uploads/suisse.jpg,suisse,photo de la Suisse,© Wikimedia Commons
http://www.monsite.com/uploads/portugal.jpg,portugal,photo du Portugal,© Wikimedia Commons
http://www.monsite.com/uploads/danemark.jpg,danemark,photo du Danemark,© Wikimedia Commons
*/
if ($gallery_bottom)
{
  $resulttgb = count($gallery_bottom); // "tgb" comme "Temporary Gallery Bottom" pour individualiser le processus
  $targettgb = 3;
  $orphanstgb = fmod($resulttgb, $targettgb);
  $totaltgb = ($resulttgb - $orphanstgb);
  foreach($gallery_bottom as $key => $tgb)
  {
    list($fulltgb, $alttgb, $txtatgb, $txtbtgb) = explode(",", $tgb);
    /* On coupe la chaîne en segments pour récupérer chaque élément. */
    $extfull = array(".jpg", ".jpeg", ".png", ".gif");
    $extthumb = array("-100x100.jpg", "-100x100.jpeg", "-100x100.png", "-100x100.gif");
    /* Chaque élément est remplacé dans l'ordre des deux tableaux. On convertit le nom de l'image pour afficher le nom de sa vignette, et éviter une double saisie de l'utilisateur. Naturellement, les images "-100x100.jpg" sont déjà stockées ! Ainsi, 'france.jpg' devient 'france-100x100.jpg'. */
    $srctgb = str_ireplace($extfull, $extthumb, $fulltgb);
    /* 'str_ireplace' n'est pas sensible à la casse, et permet, par exemple, de transformer ".GIF" en ".gif". */
    {
      if (($key + 1) <= $totaltgb)
      {
        echo '<dl class="gallery_c">';
      }
      else
      {
        if ((($key + 1) > $totaltgb) && ($orphanstgb == 2))
        {
          echo '<dl class="gallery_b">';
        }
        if ((($key + 1) > $totaltgb) && ($orphanstgb == 1))
        {
          echo '<dl class="gallery_a">';
        }
      }
      echo '<dt><a href="'.$fulltgb.'" title="'.$alttgb.'"><img src="'.$srctgb.'" alt="'.$alttgb.'" title="'.$alttgb.'" /></a></dt>';
      /* On concatène chaque élément récupéré tout à l'heure avec 'explode' dans une chaîne Html pour provoquer l'affichage de la vignette et du lien vers l'image. Par commodité, on utilise la même valeur pour les champs 'alt' et 'title'.*/
      if ($txtatgb) // Puisque le champ est optionnel
      {
        echo '<dd>'.$txtatgb.'</dd>';
      }
      if ($txtbtgb) // Puisque le champ est optionnel
      {
        echo '<dd>'.$txtbtgb.'</dd>';
      }
      echo '</dl>';
    }
  }
  echo '<div class="spacer"></div>'; // Pour éviter le flottement d'un élément adjacent avec la propriété Css 'clear: both;' chère à Mark Newhouse
}
?>

Ou sans les commentaires…

<?php
$gallery_bottom = get_post_meta($post->ID, 'gallery_bottom', false);
if ($gallery_bottom)
{
  $resulttgb = count($gallery_bottom);
  $targettgb = 3;
  $orphanstgb = fmod($resulttgb, $targettgb);
  $totaltgb = ($resulttgb - $orphanstgb);
  foreach($gallery_bottom as $key => $tgb)
  {
     list($fulltgb, $alttgb, $txtatgb, $txtbtgb) = explode(",", $tgb);
    $extfull = array(".jpg", ".jpeg", ".png", ".gif");
    $extthumb = array("-100x100.jpg", "-100x100.jpeg",     "-100x100.png", "-100x100.gif");
    $srctgb = str_ireplace($extfull, $extthumb, $fulltgb);
    {
      if (($key + 1) <= $totaltgb)
      {
        echo '<dl class="gallery_c">';
      }
      else
      {
        if ((($key + 1) > $totaltgb) && ($orphanstgb == 2))
        {
          echo '<dl class="gallery_b">';
        }
        if ((($key + 1) > $totaltgb) && ($orphanstgb == 1))
        {
          echo '<dl class="gallery_a">';
        }
      }
      echo '<dt><a href="'.$fulltgb.'" title="'.$alttgb.'"><img src="'.$srctgb.'" alt="'.$alttgb.'" title="'.$alttgb.'" /></a></dt>';
      if ($txtatgb)
      {
        echo '<dd>'.$txtatgb.'</dd>';
      }
      if ($txtbtgb)
      {
        echo '<dd>'.$txtbtgb.'</dd>';
      }
        echo '</dl>';
      }
 }
 echo '<div class="spacer"></div>';
}
?>

Nota. Depuis que WordPress intègre la gestion des vignettes, nous n’utilisons plus les champs personnalisés !

Stylons les images

Nous avons utilisé les listes de définition pour afficher les images. La structure de ces listes est commode, grâce à l’attribut <dd>, optionnel, qui permet ou non d’ajouter une légende, en restant compatible Xhtml Strict. Un exemple d’utilisation est donné dans l’excellent article Les listes de définitions : mal utilisées ou mal comprises ?

Si une ligne est complète, c’est-à-dire comporte trois images, l’attribut gallery_c est utilisé pour les images. Si une ligne est incomplète et comporte deux images, l’attribut gallery_b est utilisé pour les images. Si une ligne est incomplète et comporte une image, l’attribut gallery_c est utilisé pour l’image.

dl.gallery_a, dl.gallery_b {
  float: left /* Inutile de provoquer le flottement de la dernière galerie, puisqu'il n'y a qu'une image ! */
}
dl.gallery_a dt, dl.gallery_b dt, dl.gallery_c dt, dl.gallery_a dd, dl.gallery_b dd, dl.gallery_c dd {
  text-align: center
}
dl.gallery_a dd, dl.gallery_b dd, dl.gallery_c dd {
  font-weight: bold
}
dl.gallery_a {
  width: 33.33% /* Nous fûmes longtemps persuadé que la version 5.5 d'Internet Explorer interprétait mal les décimales, à tort ! */
}
dl.gallery_b {
  width: 50%
}
dl.gallery_c {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%
}


Avec les largeurs fixes, il devient plus délicat d’aligner correctement les images, et le code est nettement moins élégant.

Ainsi, soit une feuille de style qui comporte les propriétés suivantes, sachant que la largeur du conteneur est de 625 pixels et celle d’une image est de 129 pixels avec ses bordures et ses marges…

dl.gallery_a, dl.gallery_b, dl.gallery_c {
  float: left
}
dl.gallery_a {
  margin: 15px 248px /* 248 pixels + 129 pixels + 248 pixels = 625 pixels */
}
dl.gallery_b {
  margin: 15px 91px /* 91 pixels + 129 pixels + 91 pixels + 91 pixels + 129 pixels + 91 pixels = 622 pixels - on doit se contenter de cette approximation - 91 pixels + 91 pixels, puisque les marges se juxtaposent */
}
dl.gallery_c {
  margin: 15px 39px; /* 39 pixels + 129 pixels + 39 pixels + 39 pixels + 129 pixels + 39 pixels + 39 pixels + 129 pixels + 39 pixels = 621 pixels - on doit se contenter de cette approximation - 39 pixels + 39 pixels, puisque les marges se juxtaposent */
}


Nota. Pour déterminer facilement, la largeur des espaces entre les images, il suffit d’appliquer le calcul :

(((largeur du conteneur ou de la page - (nombre d'images x largeur de chaque image))/((nombre d'images + 1) x 2)))

Par exemple, la largeur d’un conteneur est de 618 pixels (cette valeur simple est arbitraire !). Nous voulons y placer trois images de 150 pixels.

• Largeur du conteneur ou de la page : 618 pixels.
• Nombre d’images : 3.
• Largeur de chaque image : 150 pixels.
• 150 pixels x 3 images = 450 pixels.
• Nombre d’espaces nécessaires : 3 images + 1.
• Soient (((618 – (3 x 150))/((3 + 1) x 2))) = 21.
• Soient (((618 pixels – (3 images x 150 pixels))/((3 espaces + 1) x 2))) = 21 pixels.

Nous avons utilisé des listes de définitions pour centrer nos images, mais notre solution peut s’adapter à d’autres types de balises et de contenu.

15/09/2009.

Nous laissons cet article en l’état cet article, pour mémoire : à l’usage, les services de 000webhost constituent une anarque, et fonctionnent plutôt mal, mais ils sont idéals pour héberger des sites expérimentaux ou poubelles. En cas de problème, les services payants de Hosting24 sont proposés, mais il ne valent guère mieux. Autant être prévenu !

</addendum>

Avec 000webhost, nous pensons avoir trouvé l’hébergeur idéal :

• 350 Mega-octets d’espace disque,
• 100 Giga-octets de bande passante,
• Php et MySql en version 5,
• activation immédiate du compte, y compris de l’accès Ftp et de la base MySql,
• hébergement en nom de domaine, ou en sous domaine avec une adresse comme http://chezmoi.site40.net,
• installation en un clic des plates-formes de weblogue (WordPress, Nucleus, b2evolution…), de Sgc (Drupal, Joomla, Typo3…) et cetera pour les moins chevronnés,
• haute disponibilité,
• sans publicité,
• serveur de mel,
• gratuit.

Autrement dit, ce service propose l’ensemble des fonctionnalités d’un hébergeur classique, mais il est gratuit. Le modèle économique repose sur les dons et, essentiellement, sur les souscriptions payantes à des services supplémentaires.

Les serveurs sont situés aux États-Unis d’Amérique, mais les temps de réponse sont comparables à ceux d’un hébergeur situé (au hasard…) en Allemagne !

L’assistance technique est limitée à un forum de discussion, mais semble aussi réactive que les hotliners des hébergements classiques à l’entendement parfois limité.

Cette offre est idéale pour débutants, par exemple sous WordPress : plutôt qu’installer une version du weblogue en local au risque de ne pas savoir exporter la base de données avec la mise en production, il est plus utile d’utiliser un serveur dès ses premiers pas.

Sont parfois à déplorer certaines sautes du serveur, qui durent le plus souvent quelques secondes. Cet écueil n’est guère gênant pour les sites amateurs.

Désormais, nous ne connaissons plus d’erreur 500 sur nos sites ni de problème d’allocation de mémoire Php. Notre vie de concepteur de sites a changé grâce à 000webhost !

Pour contourner l’interruption de service en cas de changement d’hébergeur, quelques scripts sont disponibles, mais nous n’avions nullement envie d’investir du temps en bidouillage. Une solution pérenne et fiable nous semblait préférable.

Aussi avons-nous tenu le raisonnement suivant… Si nous copions nos données vers un hébergeur B en les laissant intact sur l’hébergeur A, nos sites ne devraient pas connaître d’interruption de service. Les serveurs de noms locaux qui auront pris en compte la modification vers B dirigeront les visiteurs vers B ; les serveurs de noms locaux qui n’auront pas pris en compte la modification vers B dirigeront les visiteurs vers A.

Se pose, certes, la question du transfert par Ftp du contenu vers le nouvel hébergeur, tant que l’adresse n’est pas résolue : au lieu d’utiliser l’adresse ftp.monsite.com, il suffit d’indiquer à titre temporaire l’adresse Ip indiquée par l’hébergeur.

Pour l’anecdote, nous avons changé d’hébergeur trois sites, durant la journée du 21 août 2008, entre 15 h 00 et 20 h 00. (Pour les amateurs de géographie, l’ancien serveur était situé à Karlsruhe, en Allemagne, le nouveau à Las Vegas, aux États-Unis d’Amérique.) Deux possédaient la Tld .info, l’autre la Tld .com. (La précision est donnée, car il semble que la vitesse de propagation des Dns soit différente selon l’extension.) Nous avons utilisé l’outil réseau Traceroute pour mesurer le temps pris par le changement d’hébergeur après déclaration des nouvelles directions Dns auprès de notre Registar :

• notre premier site en .info a demandé trois heures pour être correctement redirigé,
• notre deuxième site en .com a demandé deux heures pour être correctement redirigé,
• notre troisième site en .info a demandé deux heures pour être correctement redirigé.

(Nota. Ces mesures n’ont assurément aucune valeur, hormis informative !)

Nous sommes loin des 24 à 48 heures prévues ; cette hypothèse nous conforte dans l’idée que nous avions mal appréhendé la question.

Sur le plan chronologique, nous avons effectué la migration dans l’ordre suivant :

• copie de nos répertoires et de nos pages par Ftp;
• copie de nos bases de données Sql via phpMyAdmin ;
• déclaration des nouvelles directions Dns auprès de notre Registar.

(Sous WordPress, aucune réinstallation n’a été nécessaire.)

Nous avons choisi de ne pas modifier le contenu de nos sites pendant quelques heures pour simplifier la gestion de la procédure (le problème serait fort différent pour un vendeur en ligne !). Aucune donnée n’a été perdue, hormis quelques logs de connexion des visiteurs récupérés manuellement chez l’ancien hébergeur.

L’unique contrainte de l’opération consiste à disposer des services de son ancien hébergeur, pendant quelques jours.

En vérifiant le positionnement de l’article dans les moteurs de recherche, nous venons de nous apercevoir que Francis avait commis un article similaire, concernant WordPress !

Or, en nous intéressant à nouveau au Plugin Wp-Print, nous avons découvert que son auteur, Lester ‘GaMerZ’ Chan, avait développé Wp-DbManager.

Wp-DbManager, qui s’administre via un bouton Base de données à côté du Tableau de bord, non seulement gère les sauvegardes (et, grâce à l’onglet options, de les planifier), mais aussi répare et optimise la base de données, vide et supprime des tables et lance des requêtes Sql.

Autrement dit, Wp-DbManager permet de s’affranchir de l’utilisation de phpMyAdmin, et c’est un confort appréciable.

Comme un bonheur n’arrive jamais seul et comme le monde WordPress n’est pas si grand (!), Lise propose sur son site une traduction en français de Wp-DbManager. Toutefois, la ligne no 371 du fichier dbmanager.php comportait une erreur, et empêchait la traduction de ce champ : nous avons renvoyé le fichier avec sa correction à Lester.

<addendum>

21/03/2008.

Lorsque plusieurs weblogues fonctionnant sous WordPress partagent la même base de données, il est inutile de dupliquer Wp-DbManager ! Un seul weblogue permettra d’administrer l’ensemble des sauvegardes.

</addendum>

Ni l’installation, ni l’emploi de ce plugiciel (qui s’administre depuis le menu Gérer, onglet Backup) ne seront décrits, car les explications sont superflues.

Il ne faut pas hésiter à demander à WordPress Database Backup une sauvegarde journalière. Même si nous détestons utiliser les ressources (forcément) rares d’Internet — voilà pourquoi, nous n’avons jamais apprécié les pièces jointes inutiles sur notre mel —, la sécurité est fondamentale : nous ne sommes pas à l’abri de la défaillance d’un serveur ! Enfin, une base de données MySql compressée ne va pas saturer notre boîte de réception.

À ce propos, il peut être judicieux de défragmenter et d’optimiser parfois ses tables MySql pour un fonctionnement optimal de WordPress.

Utilisateurs, réjouissons-nous de cet utilitaire si simple à configurer. Ce Plugin est, nous le pensons, une excellente démonstration de la simplicité d’emploi de WordPress !

Lorsque nous avions songé me convertir aux Sgc, nous avions d’abord choisi Dotclear. Or, d’un naturel prudent, notre premier objectif a été de savoir comment automatiser les sauvegardes. Lassé de notre long combat avec la configuration d’une tâche Cron, nous en avons déduit que cette plateforme n’était guère professionnelle, et nous avons rejoint sans regret le monde WordPress !