Ajouter une galerie d'images

Le bloc [Coteo Gallery] permet d'ajouter une galerie d'images cliquables : on clique sur une image et elle s'agrandit.

1) Connectez-vous à l'interface d'administration de votre site.

2) Rendez-vous sur la page désirée, puis cliquez sur le bouton [Ajouter du contenu sur la page] représenté par le symbole "+" dans l'interface. Le volet [Blocs] s'affiche.

Ajouter du contenu.png

3) Le bloc Coteo Gallery est disponible dans la section "Coteo". Il est identifiable grâce à l'icône représentant 4 images :

Bloc Coteo Gallery.png

4) Un simple glisser-déposer vous permet de déposer le bloc [Coteo Gallery] là où vous le voulez sur votre page. Si vous vous trompez d'emplacement ce n'est pas grave, vous pourrez le déplacer par la suite.

5) Une fois le bloc placé sur la page, son interface s'affiche. Vous devriez avoir quelque chose ressemblant à ceci :

6) Depuis l'interface, cliquez sur le bouton [Ajouter une image] pour ajouter une image dans la galerie. Ce faisant, l'interface du gestionnaire de fichiers s'affiche.

Transférez vos images directement dans le gestionnaire. Si vous aviez déjà transféré vos images précédemment, un simple clic gauche permet de l'ajouter dans la galerie du bloc.

Les images sélectionnées depuis le gestionnaire de fichiers s'affichent sous forme de miniatures dans l'interface du bloc. Vous devriez obtenir ceci :

Ajouter Coteo Gallery éléments (trad).png

Ajouter d'autres images

La marche à suivre est la même pour ajouter autant d'images que désiré : vous cliquez sur le bouton [Ajouter une image], vous sélectionnez votre image dans le gestionnaire de fichiers et le tour est joué.

Vous n'avez pas à vous soucier des formats d'images : que vos images soient en portrait ou en paysage, elles apparaîtront systématiquement sous forme de miniatures carrées sur la page de votre site web, exemple :

Une fois vos images ajoutées dans la galerie, cliquez sur le bouton [Enregistrer] en bas à droite de l'interface du bloc, puis publiez vos changements.

Cliquez sur une des images ci-dessous pour visualiser l'effet :

 

Cliquez sur les flèches pour passer d'une image à l'autre, et cliquez en dehors de l'image ou sur l'icône de croix pour fermer l'agrandissement. C'est aussi simple que ça !

Modifier le bloc Coteo Gallery

Pour modifier le bloc, cliquez sur [Editer le bloc] :

img-bloc-coteo-gallery-04.jpg
 

Différentes possibilités s'offrent à vous. Vous pouvez ajouter de nouvelles images en utilisant le bouton [Ajouter une image] ou depuis les collections (on y vient juste après).

Vous aurez probablement remarqué la présence d'icônes accompagnant chacune des images sélectionnées dans la galerie. Voici leurs fonctions :

icone-move.gif Bouton Déplacer : vous pouvez modifier l'ordre des images dans la galerie grâce à ce bouton. Son fonctionnement est basé sur le glisser-déposer.
icone-modif.gif Bouton Editer : cette fonction vous permet de renseigner des titres et des descriptions pour chacune de vos images.
Note : le titre n'est visible que sur la galerie, la description n'est visible qu'une fois l'image agrandie. Cette fonction, en plus d'apporter une information utile à vos internautes, permet aux moteurs de recherche de mieux comprendre votre site web.

icone-trash.gif Bouton Supprimer : supprimez une image grâce à ce bouton.

Modifier les options

Vous avez surement remarqué la présence d'un onglet [Options] visible depuis l'interface du bloc :

img-bloc-coteo-gallery-05.jpg

Vous y trouverez quelques options qui vous permettrons de changer l'apparence de la galerie d'images :

Nombre de colonnes :
Choisissez ici combien d'images s'afficheront par ligne, de 3 à 5. L'option est à 3 colonnes par défaut.

Marges :
Changez l'espacement entre deux lignes et rangées de photos grâce à cette option. Exemple avec la marge de type "Large" :

Affichage du titre :
Activez ou non le titre renseigné pour toutes les images. Cet affichage est activé par défaut.

Ombre portée :
Vous pouvez choisir d'afficher vos images dans un style rappelant des polaroïds. Exemple :

Animation de la lightbox :
Changer l'animation d'agrandissement des images grâce à cette option.

La gestion des collections de fichiers

Les collections de fichiers permettent d'ajouter plusieurs images en une seule fois. Pour comprendre comment fonctionne le gestionnaire de fichiers et les collections de fichiers, je vous renvoie à notre tutoriel dédié ici >

Vos différentes collections apparaissent dans l'interface du bloc [Coteo Gallery] :
 

Ajouter Coteo Gallery collection de fichiers (trad).png

Comment ajouter ou supprimer des images contenues dans une collection ?

Cliquez sur l'icône "+" à côté du nom de la collection souhaitée pour ajouter toutes les images dans la galerie. Le principe est le même pour la suppression à la différence qu'il vous faudra cliquer sur l'icône "-" ; ce faisant, toutes les photos de la collection sont supprimées en une fois.

Le bouton [Gérer les collections] permet de visualiser toutes les collections ainsi que les images qui s'y trouvent.


Pour terminer

Quelques conseils à l'utilisation du bloc [Coteo Gallery] :

  • n'ajoutez jamais trop de photos. Dites-vous que la qualité prime toujours sur la quantité. Faites un choix parmi vos photos, mettez en valeur le sujet concerné, inutile d'être exaustif. Evitez les doublons, les photos floues, ou trop sombres, etc.
  • avant de transférer des photos dans le gestionnaire de fichiers, il est indispensable de les optimiser pour le web. Vous trouverez toutes les explications ici :
    https://www.coteoweb.com/actualites-agence-web-coteo/transferer-des-photos-prises-avec-un-smartphone-sur-un-site-web
  • ce bloc est optimisé pour les supports mobiles. Essayez le swipe pour passer d'une photo à l'autre !