Montrer en images : cartes, vignettes, galeries, carrousel, avant/après, vidéo

Les composants de la catégorie Médias : Cartes, Vignettes, Galerie photos, Carrousel, Avant / après et Vidéo, avec les proportions d'image, le recadrage, les filtres, l'agrandissement au clic, le défilement, la comparaison au curseur et les vidéos YouTube ou Vimeo.

Six composants pour mettre vos images et vos vidéos en avant, dans la catégorie Médias de la palette. Ceux qui montrent des images les prennent dans la médiathèque et les recadrent selon leur proportion, au centre ou autour de leur point fort pour la Galerie photos : voir Images et icônes dans l'éditeur.

Cartes#

Une grille de cartes image + titre + texte, avec un lien facultatif par carte : services, réalisations, équipe. La proportion des images se choisit pour tout le bloc (standard 4:3, carré, photo 3:2, paysage 16:9 ou hauteur naturelle). Trois colonnes au plus ; une ou deux cartes prennent toute la largeur.

Vignettes#

Une grille d'images, chacune avec un texte alternatif, une catégorie affichée en légende et un lien facultatif : réalisations, projets, produits. L'image est obligatoire, au format 4:3, sur trois colonnes par défaut (deux sur tablette). Les images peuvent aussi venir d'une galerie du site, choisie sous Images montrées : voir Les galeries.

L'option Pleine largeur d'une image en fait une bannière sur toute la ligne, à sa hauteur naturelle et sans légende.

Les boutons de filtre au-dessus des vignettes viennent d'une galerie du site : créez-y un champ Étiquettes, cochez celles de chaque œuvre, puis choisissez ce champ sous Boutons de filtre. Une œuvre apparaît sous chacune de ses étiquettes. Voir Les galeries.

Galerie photos#

Une grille de photos qui s'agrandissent au clic : le visiteur les fait défiler en plein écran, avec leur titre et leur description. Trois présentations dans la palette : Galerie photos (carrés réguliers), Galerie mosaïque (chaque photo garde sa forme) et Galerie bord à bord (sans espace). Le reste se règle dans le bloc : nombre de colonnes, format des vignettes, espacement, effet au survol, légende sous chaque photo. Une photo qui porte un lien mène à ce lien au lieu de s'agrandir. Les photos peuvent aussi venir d'une galerie du site, choisie sous Images montrées : voir Les galeries.

Le plus rapide : glissez vos photos depuis votre ordinateur directement sur la galerie, elles s'ajoutent à la suite. Sinon, Ajouter des photos ouvre la médiathèque : cochez les images (Maj+clic pour une plage, Tout sélectionner après une recherche), elles s'ajoutent dans l'ordre choisi. Une galerie compte 40 photos au plus (toutes s'affichent dans la page : au-delà, faites plusieurs albums), et chaque ajout 10 au plus. Le sélecteur indique toujours combien de place il reste. À l'envoi, la position GPS enregistrée dans vos photos est retirée pour protéger votre vie privée ; le reste de leurs informations (auteur, copyright, appareil, réglages) est conservé.

Pour organiser, double-cliquez sur la galerie : toutes les photos s'affichent en vignettes. Cliquez-en une pour écrire son titre, sa description, son texte alternatif ou son lien, ou la remplacer. ⌘ ou Ctrl+clic et Maj+clic en choisissent plusieurs, à déplacer ou retirer d'un coup ; glissez une vignette pour changer l'ordre. Les réglages (colonnes, format…) sont sous Présentation de la galerie.

Quand les vignettes sont recadrées (carré, paysage, portrait), le détail d'une photo montre l'image entière : cliquez sur son point fort, la partie qui doit toujours rester visible, un visage par exemple, ou faites glisser le point. La vignette au format choisi suit. Le point fort appartient à l'image : il vaut partout où elle est recadrée, fond de section compris, et vous le retrouvez si vous changez de format. Recentrer le retire. Il s’enregistre avec Enregistrer, et ⌘Z l’annule. En format d'origine (mosaïque), rien n'est recadré : il n'y a pas de point fort à régler.

Chaque photo a sa propre adresse. Dans la visionneuse, le bouton Copier le lien copie l'adresse de la page qui s'ouvre directement sur cette photo, agrandie : à partager dans un message ou sur un réseau. Elle ne change pas si vous renommez ou déplacez la photo. En format d'origine (mosaïque), chaque photo se range dans la colonne la plus courte, sans trou, dans l'ordre de la galerie.

Carrousel#

Des photos au format fixe qui défilent une à une : au doigt sur un téléphone, avec les flèches ou les points, ou toutes seules. Chaque diapositive peut porter un titre, un texte et un lien (toute la diapositive devient cliquable). Posé depuis la palette (Carrousel photos), il défile quand le visiteur le décide ; le reste se règle dans le bloc : format, cadrage, largeur, transition, défilement automatique, navigation. Pour un diaporama d'ambiance, choisissez un Défilement automatique et la transition Fondu (ou Fondu et zoom lent) ; Pleine largeur (bord à bord) en fait une bannière.

Les photos s'ajoutent comme dans la galerie : glissez-les sur le carrousel ou cliquez sur Ajouter des photos, puis double-cliquez sur le carrousel pour les ranger et écrire leurs textes (réglages sous Présentation du carrousel). Un carrousel compte 8 photos au plus : au-delà, une galerie montre tout d'un coup. Quand il défile tout seul, il s'arrête au survol, et un bouton pause permet au visiteur de l'arrêter.

Avant / après#

Deux photos du même endroit, l'une avant votre travail, l'autre après : le visiteur tire le curseur pour passer de l'une à l'autre, à la souris, au doigt ou au clavier. Idéal pour une rénovation, une coupe de cheveux, un jardin ou une retouche photo. Posé depuis la palette (Avant / après), il se remplit dans le bloc : Photo avant, Photo après, une description de chacune pour les visiteurs qui ne voient pas l'image, et une légende si vous le souhaitez. Tant qu'une des deux photos manque, il n'apparaît pas sur votre site.

Les étiquettes affichent « Avant » et « Après » dans la langue de la page ; écrivez les vôtres pour dater les photos (« Mars », « Juin »). Le Format règle la proportion du cadre : Portrait (3:4) convient à une coiffure ou à un visage. Le Sens du curseur le fait glisser de gauche à droite ou de haut en bas, la Position de départ du curseur montre d'emblée plus d'avant ou plus d'après, et les Étiquettes se placent en haut, en bas ou disparaissent. Un clic sur une étiquette montre sa photo en entier. Si votre thème a un Mouvement, la comparaison se joue une fois quand le visiteur arrive sur le bloc : un trait de lumière découvre l'après, puis le curseur revient à sa place. Dans l'éditeur, passez en Aperçu pour la voir.

Vidéo#

Une vidéo YouTube ou Vimeo dans votre page. Déposez d'abord la vidéo sur l'un de ces services, copiez son lien (bouton Partager) et collez-le dans Lien de la vidéo. L'image d'aperçu est facultative : sans elle, un fond sombre aux couleurs du site. Le format Vertical convient aux Shorts.

Rien ne se charge chez vos visiteurs tant qu'ils ne lancent pas la vidéo. Ils voient d'abord l'image d'aperçu et une phrase qui leur dit que la vidéo est hébergée par YouTube ou Vimeo, qui déposent leurs propres cookies : leur clic vaut accord. C'est ce qui permet à votre site de rester sans bannière de cookies.