Galerie et/ou Tableau d'images

proposé par Gérard, alias lefildargent

 

La galerie d'images proposée par Jimdo est très facile à mettre en place et répond la plupart du temps à notre besoin.
Une alternative consiste à créer un tableau d'images : une technique qui permet une maîtrise plus fine des caractéristiques des images présentées et de l'usage que l'on souhaite en faire.

Ce tuto va s'articuler autour des 3 axes suivants : 

  • Rappels sur la galerie d'images : Sans revoir en détail la façon de créer une galerie d'images, nous allons ici en rappeler l'essentiel et mettre en évidence les cas où la technique du tableau d'images permettra de mieux répondre à certaines exigences. 
  • Comment créer un tableau d'images : Après une brève introduction sur quelques notions de base HTML appliquées aux tableaux, nous allons construire à partir d'un exemple concret un tableau d'images. Accès direct ici.
  • Une galerie d'images réservoir pour un tableau d'images : Lors de la construction du tableau d'images, il est toujours nécessaire de faire référence aux URL des images elles-mêmes. Les images proprement dites peuvent bien sûr être stockées chez un hébergeur externe comme Archive-Host, mais une galerie d'images Jimdo rangée dans une page cachée peut servir à "héberger" chez Jimdo ces images. Accès direct ici.

Notre exemple pour illustrer

Dans la suite de ce tuto, nous utiliserons volontairement des images de tailles très différentes. Ces images, leurs caractéristiques d'origine et l'usage que l'on souhaite en faire sont résumés dans le tableau ci-dessous :

Nom de l'image

Largeur

Hauteur

Usage de cette image pour le visiteur
Fleurs blanches
799
534
Voir l'image en vraie grandeur
Fleurs bleues
399
600
Lien externe (vers le forum Jimdo)
Flèche 69 26 Lien interne (vers l'accueil du site)
Transhumance 3304  2652 Voir l'image en vraie grandeur

NB : Dans tous les cas on souhaite guider le visiteur sur l'usage qu'il peut faire de l'image.

Usage d'une galerie d'images

La création d'une galerie d'images Jimdo passe par les principales étapes suivantes :

Téléchargement des images : Grâce aux boutons Parcourir puis Chargement, on peut ici facilement télécharger en une seule opération l'ensemble des images de notre galerie.

Choix du format de galerie : On peut utiliser l'un ou l'autre des formats suivants:

Galerie non flash pour une galerie normale
Galerie flash pour une galerie flash

Proportions et taille des images : On notera que ces réglages avec (originale ou carrée) et ne sont possibles que pour une galerie normale. En effet, une galerie flash présente en bas des "vignettes" (images réduites en 25 sur 25 px) et au-dessus les images agrandies à la taille du contenu du site.

Liens et sous-titres : L'utilisation du bouton dépend aussi du format de la galerie. Dans les 2 cas la fenêtre qui s'ouvre est la même et permet "apparemment" d'associer à chaque image un lien et un sous-titre. En cliquant dans cette fenêtre sur le chainon, une autre fenêtre s'ouvre permettant de renseigner le lien (interne ou externe). En pratique on constate, vu par le visiteur :

  • Dans une galerie normale :
    • Le sous-titre s'affiche dans une "bulle" au passage de la souris.
    • Si aucun lien n'est mentionné, l'image apparait agrandie sur un simple clic avec le sous-titre (en gris clair) en bas aligné à gauche.
    • Si un lien est mentionné, le simple clic dirige vers la page cible avec la particularité suivante :
      • S'il s'agit d'un lien interne (une autre page du site) ou d'un lien Blog (un billet du blog) on reste sur la même fenêtre, même onglet.   
      • S'il s'agit d'un lien externe, c'est une nouvelle fenêtre ou un nouvel onglet qui est ouvert.
  • Dans une galerie flash :
    • Le sous-titre apparait centré, en blanc au-dessus de l'image agrandie.
    • Un lien peut-être mentionné, mais reste sans effet.

Illustrations : Pour voir le rendu de notre exemple