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.