Les bases du Webdesign : créer une galerie photo pour votre site Web

L’apparence est souvent cruciale au succès d’un site Web, et cela vaut aussi bien pour les blogs que les boutiques en ligne. Même si le dicton « le contenu est roi » de l‘anglais « content is king », met l’accent sur l’importance de la qualité du contenu, il ne faut pas délaisser l’aspect visuel pour autant. Une longue étendue de texte sur fond blanc décourage souvent le visiteur avant même qu’il ne lise le contenu. Les graphiques et images sont pour cette raison des éléments importants d’un site Web, et permettent d’illustrer, d‘expliquer le contenu, de créer un rapport personnel et émotionnel, ou d‘illustrer les avantages des produits offerts.

Les galeries sont un moyen très apprécié, car elles permettent l’intégration immédiate de plusieurs illustrations simultanément. Il existe différentes possibilités pour l’intégration de telles séries d’images : les utilisateurs peuvent par exemple simplement intégrer Lightbox à leur site Web via un code source et mettre les galeries en ligne par HTML. Cela est d’autant plus simple lorsque l’on utilise les systèmes de gestion de contenus (Content Management System ou CMS) les plus répandus. Le tout est de se procurer un ensemble d’extensions fondamentales pour les systèmes utilisés, tels que TYPO3 ou WordPress.

Nom de domaine
Votre domaine en un clic
  • Domaine .eu ou .fr + éditeur de site gratuit pendant 6 mois
  • 1 certificat SSL Wildcard par contrat
  • Boîte email de 2 Go

Intégration d’une galerie d’images via Lightbox

Lightbox compte parmi les solutions les plus simples pour présenter des images sur un site Internet. Lightbox est programmé comme document HTML dynamique sous JavaScript. Si l’on clique sur les aperçus des images, ces dernières s’ouvrent en grand format devant le site Web grisé en arrière-plan. Lightbox est facile à mettre en place et peut être complété par des fonctions supplémentaires. Les prérequis sont de posséder une version actuelle de Lightbox ainsi que les images et leurs aperçus (vignettes) que vous souhaitez publier en ligne.

La première version de Lightbox a été développée en 2005 par Lokesh Dhakar et le script a été mis à disposition peu de temps plus tard sous la forme d’une licence Creative Commons. Entre-temps, de nombreuses versions et variantes ont été développées à partir de ce script populaire. Parmi elles, on compte des scripts autonomes, mais aussi des plugins de bibliothèques JavaScript ou encore des extensions pour les systèmes de gestion de contenu.

1. Lightbox : téléchargement

Le script Lightbox le plus connu est disponible gratuitement en téléchargement sur le site Internet de Lokesh Dhakar. Après avoir décompressé le fichier .zip, vous trouverez les éléments suivants : un fichier index html (description en anglais) et trois dossiers CSS, images et js.

2. Relier CSS et fichiers JavaScript

Copiez le fichier lightbox.css du dossier CSS dans le répertoire CSS du site Web et le fichier .js dans le répertoire JavaScript. De plus, il faut intégrer la ligne de balise suivante dans la partie head de la page Web concernée : 

<link href="votre-dossier-css/lightbox.css" rel="stylesheet">

Il faut également insérer la ligne suivante dans la dernière ligne, avant le tag </body>. 

<script src="votre-dossier-js/lightbox.js"></script>

Attention : Lightbox requiert jQuery. Si ce dernier n’est pas déjà à votre disposition, il faut l’intégrer et le charger avant de travailler sur le script Lightbox.

3. Attribut Lightbox pour intégrer votre galerie d’images en HTML

Chaque image que l’on veut afficher sur Lightbox a besoin d’un attribut approprié dans le code source, pour que le script dispose des informations nécessaires. On doit donc munir chaque lien vers une image de l’attribut data-lightbox et d’un nom individuel pour chaque galerie. Les images d’un diaporama commun ont toutes besoin du même attribut data-lightbox. Si l’on souhaite par ailleurs intégrer une légende à une image, on utilisera l’attribut data-title avec le texte correspondant.

Exemple d’une image isolée : 
<a href="images/image-1.jpg" data-lightbox="bild-1" data-title="signature de l’image">
    <img src="images/bild-1-vignette.jpg" alt="explication alternative">
</a>
Exemple de diaporama avec plusieurs images : 
<a href="images/image-2.jpg" data-lightbox="show-1" data-title="matin"><img src="images/image-2-vignette.jpg" alt="explication alternative"></a>
<a href="images/image-3.jpg" data-lightbox="show-1" data-title="midi"><img src="images/image-3-vignette.jpg" alt="explication alternative"></a>
<a href="images/image-4.jpg" data-lightbox="show-1" data-title="soir "><img src="images/image-4-vignette.jpg" alt="explication alternative "></a>

Lightbox est maintenant intégré à votre site Internet. Bien entendu, il existe d’autres possibilités pour individualiser vos diaporamas et l’affichage de Lightbox. Il est possible d’adapter certains paramètres selon vos envies, en choisissant « option method » après le chargement du script.

Exemple : 
<script src="votre-dossier-js/lightbox.js"></script>
<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    });
</script>
Voici un aperçu des principales options :
Option Standard Description
alwaysShowNavOnTouchDevices false Si l’on met cette option sur true, les flèches de navigation apparaissent de manière permanente sur les supports tactiles au lieu de n’apparaître seulement lorsque l’on passe la souris sur un lien.
disableScrolling false En mettant cette option sur true, il devient alors impossible de scroller (faire défiler) la page lorsque la lightbox est ouverte.
fadeDuration 500 Ici il est possible de déterminer la longueur du temps d’apparition et de disparition des images (l‘unité est en millisecondes).
maxWidth   On détermine ici la largeur maximale de l‘image (en Pixels).
maxHeight   On détermine ici la hauteur maximale de l’image (en pixels).
positionfromTop 50 Sert à fixer la distance par rapport à la bordure supérieure de la fenêtre (en pixels).
resizeDuration 700 Sert à déterminer le temps dont le conteneur a besoin pour la transition entre deux images de tailles différentes (unité en millisecondes).
showImageNumberLabel true Mettez cette option sur false pour ne plus afficher le nombre total d’images dans le diaporama (par exemple Image 3 de 45).
wrapAround false Si cette option est sur true, le diaporama recommence du début une fois terminé.

Il y a encore une multitude d’autres programmes à l’aide desquels on peut créer une galerie d’images individuelle et l’insérer dans son propre site. Ces outils sont en général simples et intuitifs, la plupart disposent d’un éditeur en glisser-déposer (Drag&Drop Editor).

Galeries : Extensions pour systèmes de gestion de contenu

Lors de la conception de leur site Web, de nombreux indépendants et entreprises optent pour un CMS, ou système de gestion de contenu. Les CMS présentent en effet l’avantage d’intégrer une structure prête à l’emploi à disposition des utilisateurs. Ces derniers n’ont de plus pas nécessairement besoin de connaissances particulières en programmation et en informatique pour créer un site Web professionnel.

Hormis l’utilisation intuitive et la convivialité de l’interface pour l’utilisateur, beaucoup apprécient la conception flexible des systèmes tels que Joomla! ou Typo3. Leur structure est souvent modulaire, le squelette de base du site en cours de création est donc facile à harmoniser, adapter et compléter selon vos envies et besoins individuels. Cela est sans doute en grande partie dû entre autres à l’importante communauté d’utilisateurs et leurs contributions, à savoir de nombreux plugins et extensions du logiciel open source. Tous ces ajouts permettent la création d’un site Internet au rendu professionnel. Nous vous indiquons quelques solutions pour les systèmes Joomla!, WordPress et Typo3.

Galeries d’images pour WordPress

WordPress est le CMS open source le plus utilisé au monde. Même si  le concept d’origine de WordPress était plutôt étudié pour les Blogs, les extensions du CMS ont entre-temps permis de diversifier les possibilités de création. Le programme reste toujours très utilisé pour des projets blogs. La représentation graphique a une grande importance, notamment pour les thèmes tels que la mode, le lifestyle ou la beauté. Il n’est donc pas étonnant de trouver quelques plugins de création de galeries photos parmi les plus de 18 000 extensions.

NextGen Gallery

NextGen Gallery est un plugin très populaire pour WordPress. Avec NextGen Gallery, les galeries de vignettes sont possibles, mais aussi les diaporamas. L’option Lightbox est également intégrée, et adaptée au responsive Web design. Le plugin propose aussi de nombreuses options pour les très grandes galeries d’images afin de faciliter le chargement et l’utilisation de grandes quantités de photos. Les paramètres les plus importants tels que la taille, le nombre ou l’intervalle sont modifiables. Il est aussi possible d’insérer des filigranes en un tour de main. NextGen marque des points par sa convivialité et une interface utilisateur clairement structurée. Le plugin de WordPress est disponible gratuitement en téléchargement. On peut de plus trouver des versions payantes (Plus et Pro) sur la page du développeur  qui proposent des fonctionnalités supplémentaires pour une utilisation professionnelle. Ces dernières offrent surtout quelques fonctions intéressantes dans le domaine du e-commerce.

Envira Gallery

Le plugin Envira Gallery (Lite) permet aussi de créer des galeries d’images pour votre site Internet. L’utilisateur peut créer soit une galerie individuelle pour une seule publication, soit créer une galerie globale. Le reponsive design est avec Envira est « Out-of-the-Box », soit en informatique  inclus sans besoin d’adaptation ou de configuration dans l’ensemble du matériel de base, aussi bien pour les galeries que les lightbox. La particularité avec Envira est que le programme charge de manière asynchrone les contenus d’images. Aucune concession n’est donc faite concernant le temps de chargement et la performance, même pour les plus grosses galeries photo. En tant que plugin de galerie photo, Envira propose aussi des avantages du point de vue SEO (de l’anglais Search Engine Optimization ou optimisation pour les moteurs de recherche), car la vitesse de chargement est déjà un facteur de référencement très important. La version gratuite Envira Gallery Lite est disponible en téléchargement dans le répertoire des plugins WordPress. Les versions plus sophistiquées sont payantes, mais proposent des options de partage et de réseaux sociaux supplémentaires telles que des fonctionnalités SEO et e-commerce. Vous pouvez en apprendre plus sur le site Web d’Envira Gallery.

Polaroid Gallery

Le dernier plugin WordPress que nous vous présentons pour l’implémentation de galeries d’images est Polaroid Gallery. Comme son nom l’indique, les illustrations sont présentées avec les traits caractéristiques du polaroïd, à savoir une marge blanche notamment. Cela s’avère idéal pour les amoureux de design et de rétro qui ne souhaitent pas fournir d’investissement conséquent dans un design classique. Polaroid Gallery fonctionne sur la base de CSS3 et jQuery, propose un système de templates, afin que l’utilisateur puisse créer une mise en page sans difficulté. Le plugin accède directement à la bibliothèque média WordPress, il est donc facile d’intégrer les images déjà téléchargées. Polaroid est une solution simple et rapide de galerie qui propose toutes les fonctions de base importantes et un design classique. L’individualisation est possible à tout moment. Vous pourrez trouver ce plugin gratuit dans le dossier des plugins WordPress.

Galeries d’images pour Joomla!

Joomla! a gagné en popularité jusqu’à devenir un des trois CMS les plus utilisés. Cet outil présente également une très forte communauté ainsi qu’une large étendue de plugins.

sigplus

Simple Image Gallery Plus, Sigplus en abrégé, permet comme son nom l’indique aux utilisateurs de créer facilement des galeries de photos. Ce léger plugin pour galeries d’images remplit très bien son rôle et s’avère idéal avant tout pour les petits sites Internet et les petites galeries photo au nombre calculable d’images. Les utilisateurs inexpérimentés profitent de son utilisation simple et intuitive. Le mode « avancé » propose aux utilisateurs les plus confirmés d’autres paramètres tels que les vignettes, les caches, … (Thumbnails, Caching, …). Le plugin à télécharger est gratuit et se trouve dans le dossier des extensions de Joomla!.

Phoca Gallery

Le programme Phoca Gallery est également gratuit, et offre une étendue de fonctions sensiblement élevée en comparaison avec sigplus, évoqué précédemment. Il offre la possibilité d’intégrer des galeries d’images et diaporamas dans votre propre site Joomla!. L’utilisation de Phoca Gallery n’est toutefois pas si intuitive, en particulier pour les débutants qui auront besoin d’un peu d’entraînement pour pouvoir utiliser l’ensemble de la palette de fonctions du programme. Une fois les premiers pas réussis, vous pourrez vous concentrer sur d’autres fonctionnalités pratiques comme l’intégration de filigrane ou d’une option de téléchargement pour les visiteurs. L’extension gratuite est disponible en téléchargement sur le site Web de Joomla!. Sur la page du développeur se trouvent une documentation détaillée et  des modules et plugins supplémentaires pour Phoca Gallery.

SIGE - Simple Image Gallery Extended

Le plugin SIGE (Simple Image Gallery Extended) propose une autre possibilité d’intégrer des galeries d’images via Joomla!. Ce plugin de galerie est constamment développé et amélioré par sa grande communauté. Il dispose d’un mode appelé „turbomodus“ permettant le téléchargement d’images lourdes et de galeries d’images sans de longs temps de chargement ou d’influence négative sur la performance. Les fonctionnalités supplémentaires telles que par exemple le chargement des paramètres, la fonction de filigrane,  l‘affichage par liste et un tri intelligent sur le serveur ne sont qu’un petit extrait d’une liste d’extensions et de possibilités sans fin. Le téléchargement gratuit est disponible sur le site de Joomla!.

Galeries d’images sur TYPO3

Le dernier des trois CMS les plus connus est le programme TYPO3. Ce CMS est un logiciel largement extensible qui correspond aussi bien aux petites et moyennes entreprises qu’aux grandes entreprises. La communauté de TYPO3 est encore plus gigantesque que celle de ses concurrents : elle marque des points sur les domaines d‘actualité et grâce à un développement continu. Toutefois TYPO3 n’est pas la solution la plus simple si l‘on veut réaliser un site Web sans connaissances préalables. Malgré tout, de nombreuses entreprises investissent beaucoup de temps et d’argent dans la formation ou dans des services de spécialistes pour pouvoir utiliser les avantages du CMS complètement. Il existe aussi des solutions professionnelles pour la création de galeries d’images pour TYPO3.

Yet Another Gallery

L‘extension Yet Another Gallery, YAG en abrégé, fait partie des extensions les plus populaires pour la mise en place de galeries d’images pour TYPO3. Le grand avantage de cette extension est qu’elle est continuellement développée et qu’elle propose ainsi des standards actuels. YAG convient non seulement pour les entreprises individuelles, les petites entreprises, mais aussi les grandes et tout projet professionnel car l’extension permet une grande flexibilité grâce à ses possibilités de configuration. Les galeries d’images sont extensibles individuellement et adaptables avec précision à chaque projet. Les utilisateurs déterminent ainsi leur propre design ou choisissent parmi un choix important de thèmes préconçus se trouvant dans le répertoire des extensions. Vous trouverez pléthore d’instructions détaillées pour l’installation et la configuration de vos premières galeries, incluant des tutoriels vidéo. Le téléchargement gratuit s’effectue à partir du site Web de TYPO3.

Perfect Lightbox

Perfect Lightbox n‘est pas une extension pour créer des galeries d’images au sens classique. L’extension permet cependant d’afficher des éléments de contenu dans une lightbox plutôt que de les ouvrir dans une fenêtre pop-up séparée comme d’habitude. La particularité de Perfect Lightbox est de pouvoir afficher des éléments individuellement, ou encore de choisir tous les éléments d’une page pour les afficher dans une galerie commune. Le programme permet de plus certaines autres fonctionnalités telles que le diaporama, un mode de présentation variable et une option de téléchargement pour les visiteurs. Les utilisateurs peuvent aussi eux-mêmes concevoir l’apparence de la lightbox de manière flexible. Vous pouvez télécharger Perfect Lightbox ici.

Cet article vous a-t-il été utile ?