- Créer un site
- Tutoriels
- Modules
- Album photos
- Comment utiliser le module Album Photos
Comment utiliser le module Album Photos
Disposer d'un album photos dans votre site permet de présenter vos meilleurs clichés aux internautes et de la meilleure façon possible.
Voyons comment vous allez pouvoir créer un album photos facilement.
Principe de fonctionnement
Le module Album photos permet de classer vos photos en les hiérarchisant à l'aide de l'explorateur, accessible depuis Modules > Album photos > Photos
Scindé en deux parties, l'explorateur affiche :
- Sur la gauche la hiérarchisation sous forme de catégories et sous-catégories sur plusieurs niveaux si besoin. (A)
- Sur la droite figurent les photos classées dans la catégorie ciblée. (B)
Un clic sur le libellé de la catégorie affiche les images y étant classées. (C)
Pour ajouter des images, nous vous suggérons de créer en premier lieu les catégories et sous-catégories éventuelles, puis enfin les images.
Ajouter une catégorie
Dans la colonne de gauche, cliquez sur le bouton de couleur orange Nouvelle catégorie
.
Une fenêtre s'ouvre vous demandant d'indiquer le nom de cette catégorie, un descriptif éventuel mais facultatif ainsi que le style d'affichage des photos, nous verrons plus bas la signification ; enregistrez pour la créer.
Si vous désirez créer une sous-catégorie, il faut vous placer dans cette nouvelle catégorie et cliquez de nouveau sur le bouton Nouvelle catégorie
.
Procédez ainsi de suite pour créer une arborescence.
Ajouter des photos
Depuis l'explorateur d'images, cliquez sur le bouton Ajouter des photos
présent en haut à droite
Deux modes de téléchargement sont disponibles :
- Un multi-téléchargement, permettant de sélectionner jusqu'à cinquante photos avant de les envoyer dans une catégorie d'album.(A)
- Un téléchargement classique, permettant de n'envoyer qu'une seule photo à la fois.(B)
Nous conseillons de toujours envoyer dans l'espace de stockage des images de grandes dimensions, une dimension maximale autorisée à ne pas dépasser est de 4000 pixels de côté et un poids informatique de 8Mo par image, seuls les formats d'images jpg, jpeg, gif, png et ico sont autorisés.
Lors du transfert, un redimensionnement de ces images sera obligatoirement appliqué à 1280 pixels de côté par photo pour les images dépassant cette dimension. Aucun autre traitement ne sera opéré.
Choisir la façon dont sont présentées les photos
Pour chaque catégorie, vous pouvez choisir parmi quatre styles d'affichage proposés.
Le choix s'effectue depuis la page de modification de la catégorie concernée, survolez le libellé de la catégorie, puis cliquez sur le lien Modifier
.
Au bas de la page permettant de modifier la catégorie, figure un premier sélecteur, le sytle d'affichage ; parmi les choix possibles, sont proposés :
- Liste (miniature + détail de chaque photo) : Utilise le format d'images Miniatures ainsi que le titre et descritif de l'image.
- Mode vignette : Affiche les images au format Moyennes à raison de trois images par ligne, placées côte à côte.
- Diaporama JS : Affiche un diaporama utilisant la technologie JavaScript, les images sont affichée au format Moyennes, une liste horizontale de miniatures est placée au dessous.
- Liste (images en grand format + détails) : Affiche les images au format Grandes avec au dessous, le titre et le descriptif.
Afficher les photos
Un mode d'affichage est également présent. Il permet de déterminer le comportement le l'image lors du clic sur la photo.
- Soit un affichage en lighbox, cela signifie que l'image apparait dans un encadré en sur-impression dans le site.
- Soit un affichage dans une nouvelle page, lors du clic sur la photo, elle s'affichera dans une page du site, à part.
Format des images
Selons les thèmes activés sur votre site, E-monsite vous propose un outil permettant d'afficher vos photos selon quatre tailles personnalisables : Avatar, Miniatures, Moyennes, Grandes ; par défaut des dimensions sont fixées pour chacune, mais vous êtes libre de les modifier.
Ces dimensions s'appliquent dynamiquement sur les photos originales par un procédé logiciel appliqué dans l'url de chacune. Des fichiers images ne sont pas créés, cela permet d'économiser votre espace de stockage.
Idéalement et afin de bénéficier de ces tailles, il est préférable de charger des images de grandes dimensions (4000 pixels de côté maximum) afin que le procédé automatique puisse les décliner en des dimensions plus petites.
L'inverse n'est pas possible, à partir d'une petite image il ne sera pas possible de générer une grande image, le résultat serait médiocre.
Ces formats se définissent depuis Configuration > Apparence > Personnaliser
, tout en bas de la page.
Pour chacun des formats, il est possible de choisir un redimensionnement ou un recadrage, puis une dimension de largeur et de hauteur.
- Redimensionnement : il réduit les dimensions de l'image selon les dimensions indiquées tout en conservant ses proportions, l'image ne sera jamais déformée.
- Recadrage : Il réduit la dimension de l'image selon la plus grande des dimensions renseignée et effectue une découpe selon les dimensions indiquées partant depuis le centre de l'image.
Exemple de recadrage
Pour cet exemple, utilisons une image de composition graphique, empruntée à ©Jean-Pierre Dalbera sous licence Creative Commons CC BY 2.0, représentant la Place d'Espagne à Madrid.
Cliquez sur cette image redimensionnée ci-dessous et observez le recadrage proposé.
Pour aller plus loin
Afficher le commentaire des photos et le partage social
Il faut vérifier en premier lieu que les plugins commentaires et partage social soient activés pour le module. Rendez-vous dans Modules > Album Photos > Options
afin de le vérifier dans la partie "Plugins".
Une fois activé, le commentaire des photos et le partage sur les réseaux sociaux ne seront possibles que lorsque les photos s'affichent sous forme de liste ou de colonnes et dans une page individuelle et non pas en lightbox.
En effet, il est nécessaire qu'une image s'affiche dans une page individualisée, permettant l'affichage du formulaire de commentaire au dessous, comme le montre l'illustration ci-dessous.