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’im­por­tance 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 gra­phiques et images sont pour cette raison des éléments im­por­tants d’un site Web, et per­met­tent d’illustrer, d‘expliquer le contenu, de créer un rapport personnel et émo­tion­nel, ou d‘illustrer les avantages des produits offerts.

Les galeries sont un moyen très apprécié, car elles per­met­tent l’in­té­gra­tion immédiate de plusieurs il­lus­tra­tions si­mul­ta­né­ment. Il existe dif­fé­rentes pos­si­bi­li­tés pour l’in­té­gra­tion de telles séries d’images : les uti­li­sa­teurs peuvent par exemple sim­ple­ment 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 Ma­na­ge­ment System ou CMS) les plus répandus. Le tout est de se procurer un ensemble d’ex­ten­sions fon­da­men­tales pour les systèmes utilisés, tels que TYPO3 ou WordPress.

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 Ja­vaS­cript. 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 sup­plé­men­taires. 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é­ve­lop­pée en 2005 par Lokesh Dhakar et le script a été mis à dis­po­si­tion peu de temps plus tard sous la forme d’une licence Creative Commons. Entre-temps, de nom­breuses versions et variantes ont été dé­ve­lop­pées à partir de ce script populaire. Parmi elles, on compte des scripts autonomes, mais aussi des plugins de bi­blio­thèques Ja­vaS­cript ou encore des ex­ten­sions pour les systèmes de gestion de contenu.

Le script Lightbox le plus connu est dis­po­nible gra­tui­te­ment en té­lé­char­ge­ment sur le site Internet de Lokesh Dhakar. Après avoir dé­com­pressé le fichier .zip, vous trouverez les éléments suivants : un fichier index html (des­crip­tion en anglais) et trois dossiers CSS, images et js.

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

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

Attention : Lightbox requiert jQuery. Si ce dernier n’est pas déjà à votre dis­po­si­tion, il faut l’intégrer et le charger avant de tra­vail­ler sur le script Lightbox.

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 in­for­ma­tions né­ces­saires. On doit donc munir chaque lien vers une image de l’attribut data-lightbox et d’un nom in­di­vi­duel 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 cor­res­pon­dant.

Lightbox est main­te­nant intégré à votre site Internet. Bien entendu, il existe d’autres pos­si­bi­li­tés pour in­di­vi­dua­li­ser vos dia­po­ra­mas et l’affichage de Lightbox. Il est possible d’adapter certains pa­ra­mètres selon vos envies, en choi­sis­sant « option method » après le char­ge­ment du script.

Il y a encore une multitude d’autres pro­grammes à l’aide desquels on peut créer une galerie d’images in­di­vi­duelle 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).

Lors de la con­cep­tion de leur site Web, de nombreux in­dé­pen­dants et en­tre­prises optent pour un CMS, ou système de gestion de contenu. Les CMS pré­sen­tent en effet l’avantage d’intégrer une structure prête à l’emploi à dis­po­si­tion des uti­li­sa­teurs. Ces derniers n’ont de plus pas né­ces­sai­re­ment besoin de con­nais­sances par­ti­cu­lières en pro­gram­ma­tion et en in­for­ma­tique pour créer un site Web pro­fes­sion­nel.

Hormis l’uti­li­sa­tion intuitive et la con­vi­via­lité de l’interface pour l’uti­li­sa­teur, beaucoup ap­pré­cient la con­cep­tion 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 à har­mo­ni­ser, adapter et compléter selon vos envies et besoins in­di­vi­duels. Cela est sans doute en grande partie dû entre autres à l’im­por­tante com­mu­nauté d’uti­li­sa­teurs et leurs con­tri­bu­tions, à savoir de nombreux plugins et ex­ten­sions du logiciel open source. Tous ces ajouts per­met­tent la création d’un site Internet au rendu pro­fes­sion­nel. Nous vous indiquons quelques solutions pour les systèmes Joomla!, WordPress et Typo3.

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 ex­ten­sions du CMS ont entre-temps permis de di­ver­si­fier les pos­si­bi­li­tés de création. Le programme reste toujours très utilisé pour des projets blogs. La re­pré­sen­ta­tion graphique a une grande im­por­tance, 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 ex­ten­sions.

NextGen Gallery est un plugin très populaire pour WordPress. Avec NextGen Gallery, les galeries de vignettes sont possibles, mais aussi les dia­po­ra­mas. L’option Lightbox est également intégrée, et adaptée au res­pon­sive Web design. Le plugin propose aussi de nom­breuses options pour les très grandes galeries d’images afin de faciliter le char­ge­ment et l’uti­li­sa­tion de grandes quantités de photos. Les pa­ra­mètres les plus im­por­tants tels que la taille, le nombre ou l’in­ter­valle sont mo­di­fiables. Il est aussi possible d’insérer des fi­li­granes en un tour de main. NextGen marque des points par sa con­vi­via­lité et une interface uti­li­sa­teur clai­re­ment struc­tu­rée. Le plugin de WordPress est dis­po­nible gra­tui­te­ment en té­lé­char­ge­ment. On peut de plus trouver des versions payantes (Plus et Pro) sur la page du dé­ve­lop­peur  qui proposent des fonc­tion­na­li­tés sup­plé­men­taires pour une uti­li­sa­tion pro­fes­sion­nelle. Ces dernières offrent surtout quelques fonctions in­té­res­santes dans le domaine du e-commerce.

Le plugin Envira Gallery (Lite) permet aussi de créer des galeries d’images pour votre site Internet. L’uti­li­sa­teur peut créer soit une galerie in­di­vi­duelle pour une seule pu­bli­ca­tion, soit créer une galerie globale. Le reponsive design est avec Envira est « Out-of-the-Box », soit en in­for­ma­tique  inclus sans besoin d’adap­ta­tion ou de con­fi­gu­ra­tion dans l’ensemble du matériel de base, aussi bien pour les galeries que les lightbox. La par­ti­cu­la­rité avec Envira est que le programme charge de manière asyn­chrone les contenus d’images. Aucune con­ces­sion n’est donc faite con­cer­nant le temps de char­ge­ment et la per­for­mance, 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 Op­ti­mi­za­tion ou op­ti­mi­sa­tion pour les moteurs de recherche), car la vitesse de char­ge­ment est déjà un facteur de ré­fé­ren­ce­ment très important. La version gratuite Envira Gallery Lite est dis­po­nible en té­lé­char­ge­ment dans le ré­per­toire des plugins WordPress. Les versions plus so­phis­ti­quées sont payantes, mais proposent des options de partage et de réseaux sociaux sup­plé­men­taires telles que des fonc­tion­na­li­tés SEO et e-commerce. Vous pouvez en apprendre plus sur le site Web d’Envira Gallery.

Le dernier plugin WordPress que nous vous pré­sen­tons pour l’im­plé­men­ta­tion de galeries d’images est Polaroid Gallery. Comme son nom l’indique, les il­lus­tra­tions sont pré­sen­tées avec les traits ca­rac­té­ris­tiques 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 sou­hai­tent pas fournir d’in­ves­tis­se­ment con­sé­quent dans un design classique. Polaroid Gallery fonc­tionne sur la base de CSS3 et jQuery, propose un système de templates, afin que l’uti­li­sa­teur puisse créer une mise en page sans dif­fi­culté. Le plugin accède di­rec­te­ment à la bi­blio­thèque média WordPress, il est donc facile d’intégrer les images déjà té­lé­char­gées. Polaroid est une solution simple et rapide de galerie qui propose toutes les fonctions de base im­por­tantes et un design classique. L’in­di­vi­dua­li­sa­tion est possible à tout moment. Vous pourrez trouver ce plugin gratuit dans le dossier des plugins WordPress.

Joomla! a gagné en po­pu­la­rité jusqu’à devenir un des trois CMS les plus utilisés. Cet outil présente également une très forte com­mu­nauté ainsi qu’une large étendue de plugins.

sigplus

Simple Image Gallery Plus, Sigplus en abrégé, permet comme son nom l’indique aux uti­li­sa­teurs de créer fa­ci­le­ment 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 cal­cu­lable d’images. Les uti­li­sa­teurs inex­pé­ri­men­tés profitent de son uti­li­sa­tion simple et intuitive. Le mode « avancé » propose aux uti­li­sa­teurs les plus confirmés d’autres pa­ra­mètres tels que les vignettes, les caches, … (Thumb­nails, Caching, …). Le plugin à té­lé­char­ger est gratuit et se trouve dans le dossier des ex­ten­sions de Joomla!.

Phoca Gallery

Le programme Phoca Gallery est également gratuit, et offre une étendue de fonctions sen­si­ble­ment élevée en com­pa­rai­son avec sigplus, évoqué pré­cé­dem­ment. Il offre la pos­si­bi­lité d’intégrer des galeries d’images et dia­po­ra­mas dans votre propre site Joomla!. L’uti­li­sa­tion de Phoca Gallery n’est toutefois pas si intuitive, en par­ti­cu­lier pour les débutants qui auront besoin d’un peu d’en­traî­ne­ment pour pouvoir utiliser l’ensemble de la palette de fonctions du programme. Une fois les premiers pas réussis, vous pourrez vous con­cen­trer sur d’autres fonc­tion­na­li­tés pratiques comme l’in­té­gra­tion de filigrane ou d’une option de té­lé­char­ge­ment pour les visiteurs. L’extension gratuite est dis­po­nible en té­lé­char­ge­ment sur le site Web de Joomla!. Sur la page du dé­ve­lop­peur se trouvent une do­cu­men­ta­tion détaillée et  des modules et plugins sup­plé­men­taires pour Phoca Gallery.

SIGE - Simple Image Gallery Extended

Le plugin SIGE (Simple Image Gallery Extended) propose une autre pos­si­bi­lité d’intégrer des galeries d’images via Joomla!. Ce plugin de galerie est cons­tam­ment développé et amélioré par sa grande com­mu­nauté. Il dispose d’un mode appelé „tur­bo­mo­dus“ per­met­tant le té­lé­char­ge­ment d’images lourdes et de galeries d’images sans de longs temps de char­ge­ment ou d’influence négative sur la per­for­mance. Les fonc­tion­na­li­tés sup­plé­men­taires telles que par exemple le char­ge­ment des pa­ra­mètres, la fonction de filigrane,  l‘affichage par liste et un tri in­tel­li­gent sur le serveur ne sont qu’un petit extrait d’une liste d’ex­ten­sions et de pos­si­bi­li­tés sans fin. Le té­lé­char­ge­ment gratuit est dis­po­nible sur le site de Joomla!.

Le dernier des trois CMS les plus connus est le programme TYPO3. Ce CMS est un logiciel largement ex­ten­sible qui cor­res­pond aussi bien aux petites et moyennes en­tre­prises qu’aux grandes en­tre­prises. La com­mu­nauté de TYPO3 est encore plus gi­gan­tesque que celle de ses con­cur­rents : elle marque des points sur les domaines d‘actualité et grâce à un dé­ve­lop­pe­ment continu. Toutefois TYPO3 n’est pas la solution la plus simple si l‘on veut réaliser un site Web sans con­nais­sances préa­lables. Malgré tout, de nom­breuses en­tre­prises in­ves­tis­sent beaucoup de temps et d’argent dans la formation ou dans des services de spé­cia­listes pour pouvoir utiliser les avantages du CMS com­plè­te­ment. Il existe aussi des solutions pro­fes­sion­nelles 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 ex­ten­sions les plus po­pu­laires pour la mise en place de galeries d’images pour TYPO3. Le grand avantage de cette extension est qu’elle est con­ti­nuel­le­ment dé­ve­lop­pée et qu’elle propose ainsi des standards actuels. YAG convient non seulement pour les en­tre­prises in­di­vi­duelles, les petites en­tre­prises, mais aussi les grandes et tout projet pro­fes­sion­nel car l’extension permet une grande flexi­bi­lité grâce à ses pos­si­bi­li­tés de con­fi­gu­ra­tion. Les galeries d’images sont ex­ten­sibles in­di­vi­duel­le­ment et adap­tables avec précision à chaque projet. Les uti­li­sa­teurs dé­ter­mi­nent ainsi leur propre design ou choi­sis­sent parmi un choix important de thèmes préconçus se trouvant dans le ré­per­toire des ex­ten­sions. Vous trouverez pléthore d’ins­truc­tions dé­tail­lées pour l’ins­tal­la­tion et la con­fi­gu­ra­tion de vos premières galeries, incluant des tutoriels vidéo. Le té­lé­char­ge­ment 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 par­ti­cu­la­rité de Perfect Lightbox est de pouvoir afficher des éléments in­di­vi­duel­le­ment, 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 fonc­tion­na­li­tés telles que le diaporama, un mode de pré­sen­ta­tion variable et une option de té­lé­char­ge­ment pour les visiteurs. Les uti­li­sa­teurs peuvent aussi eux-mêmes concevoir l’apparence de la lightbox de manière flexible. Vous pouvez té­lé­char­ger Perfect Lightbox ici.