Images et médias

Les images, vidéos et contenus intégrés rendent les pages attrayantes et informatives.

Silex fournit des blocs pour les images, vidéos et contenus intégrés (cartes, widgets, iframes). Une fois ajouté, un média se comporte comme n'importe quel autre élément — il a une boîte avec des dimensions, du Padding, des Margin et des bordures. Ce qui rend les médias spéciaux, c'est la façon dont leur contenu s'adapte à cette boîte.

Modèle mental clé : Un élément média est une boîte, et le média remplit cette boîte selon les règles que vous définissez. La taille de la boîte vient des propriétés Width/Height. La façon dont le média s'adapte à l'intérieur vient de Object-Fit et Object-Position.

Ajouter des images

Pour ajouter une image :

1. Glissez le bloc Image du panneau Blocs sur le canevas
2. Silex place un élément img et ouvre la fenêtre Select Image (le gestionnaire de médias)
3. Soit :
4. Déposez un fichier dans la zone en pointillés, ou cliquez dessus pour en téléverser un
5. Tapez l'URL d'une image (par ex., https://example.com/photo.jpg) et cliquez sur Add image
6. L'image s'ajoute à la liste de droite : cliquez dessus pour la placer sur le canevas. La fenêtre se ferme et le champ Src se remplit automatiquement

Vous pouvez aussi taper une URL dans le champ Src des réglages de l'élément (icône engrenage en haut du panneau de droite).

Gestionnaire de médias : téléverser des images

Le gestionnaire de médias est une bibliothèque multimédia pour votre projet. Quand vous téléversez une image, Silex la stocke selon la configuration de votre hébergement. Vous pouvez réutiliser les images sur toutes les pages — téléversez une fois, utilisez partout.

Pour téléverser :

1. Double-cliquez sur un élément image : la fenêtre Select Image se rouvre
2. Déposez des fichiers dans la zone en pointillés, ou cliquez dessus pour choisir des fichiers
3. Cliquez sur l'image voulue dans la liste

Formats supportés : - JPEG — idéal pour les photographies, forte compression - PNG — bon pour les graphiques, fonds transparents - WebP — format moderne, excellente compression pour tous les types - SVG — graphiques vectoriels, mise à l'échelle parfaite à toute taille - GIF — animations simples

Utilisez JPEG ou WebP pour les photos, PNG pour les icônes/graphiques avec transparence, SVG pour les logos/illustrations qui doivent s'adapter.

Texte alternatif : essentiel pour l'accessibilité

Chaque image a besoin d'un texte alternatif. Le texte alternatif est lu par les lecteurs d'écran pour les visiteurs aveugles ou malvoyants, affiché quand l'image ne se charge pas, et indexé par les moteurs de recherche.

Pour définir le texte alternatif :

1. Sélectionnez l'image
2. Dans les réglages de l'élément (icône engrenage), trouvez le champ de l'attribut alt
3. Écrivez une courte phrase descriptive décrivant ce que l'image montre

Bon texte alternatif : « Deux personnes collaborant à un bureau avec des ordinateurs portables » Mauvais texte alternatif : « image », « photo », ou vide

Pour les images décoratives (textures de fond, bordures, séparateurs) qui n'ajoutent pas d'information, définissez le texte alternatif sur vide. Cela indique aux lecteurs d'écran de les ignorer.

Bonnes pratiques pour le texte alternatif : - Décrivez le contenu de l'image, pas « photo de » ou « image de » - Gardez-le sous 125 caractères — court mais précis - N'incluez pas « image de » ou « une photo de » - Incluez le texte pertinent visible dans l'image (panneaux, légendes, texte superposé)

Ajouter des vidéos

1. Glissez le bloc Video du panneau Blocs
2. Sélectionnez la vidéo et ouvrez les réglages de l'élément (icône engrenage)
3. Choisissez le Provider : HTML5 Source pour un fichier vidéo, ou Youtube, Youtube (no cookie) ou Vimeo pour une vidéo hébergée sur ces services
4. Pour un fichier vidéo, mettez l'URL du fichier dans Source, et éventuellement dans Poster l'image affichée avant la lecture. Pour YouTube ou Vimeo, tapez le Video ID : le code de la vidéo dans son adresse, par exemple dQw4w9WgXcQ dans youtube.com/watch?v=dQw4w9WgXcQ
5. Cochez les options dont vous avez besoin :
6. Autoplay — démarrer la lecture automatiquement
7. Controls — afficher les boutons lecture/pause
8. Loop — recommencer à la fin
9. Muted — requis pour la lecture automatique dans de nombreux navigateurs

Avec HTML5 Source, Silex crée un élément <video>. Avec YouTube ou Vimeo, il crée un <iframe> avec le lecteur du service.

Contenu intégré (cartes, widgets, publications sociales)

Le bloc Map intègre une carte Google Maps. Dans les réglages de l'élément (icône engrenage), réglez son Address, son Map type (Roadmap ou Satellite) et son Zoom.

Pour les autres contenus intégrés (calendriers, publications de réseaux sociaux, sondages, widgets de chat), utilisez le bloc Custom code : collez dans la fenêtre Insert your code le code d'intégration que le service vous donne, en général un extrait <iframe>. Il accepte n'importe quel extrait HTML, y compris du JavaScript.

Lecteurs audio

Il n'y a pas de bloc Audio. Pour ajouter un lecteur audio (podcast, musique, effets sonores), glissez un bloc Custom code, collez une balise <audio> dans la fenêtre Insert your code, puis cliquez sur Save. Par exemple :

<audio controls src="https://example.com/podcast.mp3"></audio>

Canvas et autres éléments remplacés

Il n'y a pas de bloc Canvas. Un élément <canvas> est une surface de dessin pour JavaScript, dont la plupart des designers n'auront pas besoin.

Contrôler l'adaptation du média à sa boîte

Quand la boîte d'un élément média et son contenu ont des proportions différentes, le CSS contrôle ce qui se passe : étirer le contenu, le rogner ou le mettre en letterbox. C'est là qu'intervient Object-Fit.

Object-Fit

Object-Fit détermine comment le média remplit sa boîte.

Pour définir Object-Fit :

1. Sélectionnez un élément image, vidéo, audio, iframe, embed ou canvas
2. Ouvrez la section Object dans le Style Manager (apparaît uniquement pour ces éléments)
3. Choisissez une valeur Object-Fit

Valeurs disponibles :

Valeur	Effet
fill	Étire/compresse le média pour remplir complètement la boîte. Peut déformer les proportions.
contain	Met le média à l'échelle pour tenir dans la boîte sans rognage. Letterbox si les proportions ne correspondent pas.
cover	Met le média à l'échelle pour couvrir toute la boîte. Peut rogner des parties. Généralement le meilleur pour les fonds.
none	Affiche le média à sa taille naturelle. Peut déborder ou laisser un espace vide.
scale-down	Utilise le plus petit entre none et contain.

Exemples :

• cover sur une image héro : remplit l'espace, rogne le haut/bas si nécessaire
• contain sur une photo produit : montre le produit entier sans déformation
• fill sur une vidéo de fond : s'étire pour remplir, peut déformer
• none sur une icône : affiche à la taille exacte, sans mise à l'échelle

Object-Position

Object-Position contrôle où le média est positionné dans sa boîte quand il ne la remplit pas exactement (avec contain, scale-down ou none).

Positions disponibles (options prédéfinies) :

Position	Effet
left top	Aligner dans le coin supérieur gauche
left center	Aligner sur le bord gauche, centré verticalement
left bottom	Aligner dans le coin inférieur gauche
center top	Centré horizontalement, bord supérieur
center center	Centré dans les deux sens (par défaut)
center bottom	Centré horizontalement, bord inférieur
right top	Aligner dans le coin supérieur droit
right center	Aligner sur le bord droit, centré verticalement
right bottom	Aligner dans le coin inférieur droit

Exemple : une image avec object-fit: cover et object-position: center top rogne le bas et les côtés tout en préservant le haut (idéal pour les photos où le contenu important est en haut).

Exemple pratique : galerie d'images responsive

Vous voulez trois images côte à côte, chacune de 200px de large, qui rétrécissent sur mobile.

1. Créer le conteneur de la galerie :
2. Ajoutez un Container, définissez la balise sur section
3. Définissez Display sur Flex, Flex-wrap sur wrap

4. Définissez Column-gap sur 16px

5. Créer le premier élément d'image :

6. Ajoutez un Container dans la section, définissez la balise sur article
7. Dans la zone du sélecteur, en haut du panneau de droite, cliquez sur + et tapez gallery-item : la classe devient la cible de vos styles
8. Définissez Flex-basis sur 200px, Flex-grow sur 0 (secteur Flexbox)

9. Définissez Width sur 100%, Height sur 200px (images carrées)

10. Ajouter une image dans l'article :

11. Glissez un bloc Image dans l'article et choisissez ou téléversez une photo
12. Donnez à l'image la classe gallery-item__image de la même façon
13. Définissez Width sur 100%, Height sur 100%
14. Définissez Object-Fit sur cover et Object-Position sur center center (secteur Object)

15. Ajoutez son texte alternatif dans le champ Alt des réglages de l'élément (icône engrenage)

16. Créer les deux autres éléments :

17. Sélectionnez l'article, cliquez sur Copy, puis deux fois sur Paste : les copies ont les mêmes classes, elles partagent donc les styles

18. Double-cliquez sur chaque image copiée pour choisir une autre photo, et mettez à jour son texte alternatif

19. Résultat : trois images carrées côte à côte, les photos rognées pour remplir sans déformation. Sur les écrans étroits, elles s'enroulent naturellement en rangées.

Exemple pratique : image héro responsive avec texte superposé

Vous voulez une image pleine largeur avec du texte par-dessus.

1. Créer le conteneur héro :
2. Ajoutez un Container, définissez la hauteur sur 400px (ou votre choix)
3. Définissez Width sur 100%

4. Définissez Position sur relative (pour que le texte puisse se positionner en absolu par-dessus)

5. Ajouter l'image de fond :

6. Glissez un bloc Image dans le Container héro
7. Définissez Width sur 100%, Height sur 100%
8. Définissez Object-Fit sur cover, Object-Position sur center center

9. Cela remplit la boîte héro sans déformation

10. Ajouter le texte par-dessus :

11. Déposez un Container sur l'image (il se place dans le héro), puis un bloc Text dans ce Container. Faites-le avant l'étape suivante : une fois en absolu, un Container vide n'a plus de largeur et on ne peut plus rien y déposer.
12. Sélectionnez le Container. Définissez Position sur absolute, Top sur 50%, Left sur 50%
13. Pour le centrer sur ce point, ajoutez deux calques Transform (secteur Effects) : translateX -50% et translateY -50%
14. Stylisez le texte avec une couleur et un Text shadow pour qu'il ressorte sur l'image

L'image remplit la zone héro, le texte flotte par-dessus, et tout s'adapte de manière responsive.

Erreurs courantes

• Oublier le texte alternatif. Chaque image a besoin d'un texte alternatif. Les utilisateurs de lecteurs d'écran et les moteurs de recherche en dépendent.
• Utiliser fill pour Object-Fit quand vous vouliez cover. fill déforme l'image en l'étirant ; cover rogne tout en conservant les proportions.
• Ne pas définir Width/Height sur les images. Si une image n'a pas de taille définie, elle s'affiche à sa résolution naturelle, qui peut être trop grande ou trop petite.
• Définir Object-Fit sans comprendre le décalage de proportions. Object-Fit n'a d'importance que quand la boîte et l'image ont des proportions différentes.
• Utiliser les images comme outils de mise en page. Pour l'espacement et la structure de la mise en page, utilisez des Containers avec des balises sémantiques et Flexbox. Les images sont pour le contenu.

En savoir plus

• MDN : object-fit — référence détaillée
• MDN : object-position — référence du positionnement
• MDN : élément img — bonnes pratiques pour les images
• MDN : texte alternatif — recommandations d'accessibilité
• Le modèle de boîte — Width et Height pour les éléments médias
• Images et médias accessibles — bonnes pratiques pour le texte alternatif, les légendes et la réduction des animations
• Mise en page Flexbox — disposer les médias en galeries

---

Avancé : éléments remplacés et leur gestion par Silex

Les éléments médias (img, video, iframe, embed, audio, canvas) sont appelés « éléments remplacés » en CSS. Contrairement aux éléments HTML normaux, leur apparence est déterminée par un contenu externe (le fichier image, le flux vidéo, etc.) plutôt que par des boîtes CSS.

Dans Silex, les images ne peuvent pas être converties en liens via le sélecteur Tag Name. Le composant image supprime les attributs href et tag-name. Si vous voulez une image cliquable, englobez-la dans un élément Link à la place.

La section Object (avec les propriétés object-fit et object-position) n'apparaît que lorsqu'un élément remplacé est sélectionné. Cela se fait en enregistrant le secteur Object pour qu'il ne s'affiche que pour les éléments img, video, iframe, embed, audio et canvas.

Quand vous téléversez des images via le gestionnaire de médias, Silex convertit les URL en un format stocké en interne puis les reconvertit en URL affichables sur le canevas — c'est transparent pour vous.

Référence : valeurs de Object-Fit et Object-Position

Valeurs de Object-Fit

Valeur	Effet
fill	Étire/compresse le contenu pour remplir la boîte. Les proportions peuvent ne pas être préservées.
contain	Met le contenu à l'échelle pour tenir dans la boîte. Préserve les proportions. Peut créer du letterbox.
cover	Met le contenu à l'échelle pour couvrir toute la boîte. Préserve les proportions. Peut rogner.
none	Le contenu garde sa taille naturelle. Peut déborder ou laisser de l'espace.
scale-down	Utilise le plus petit entre none et contain.
initial	Réinitialise à la valeur CSS par défaut (fill).
inherit	Utilise la valeur de l'élément parent.

Valeurs de Object-Position

Position	S'ancre à
left top	Coin supérieur gauche (0% 0%)
left center	Bord gauche, centré verticalement (0% 50%)
left bottom	Coin inférieur gauche (0% 100%)
center top	Bord supérieur, centré horizontalement (50% 0%)
center center	Exactement au centre (50% 50%, par défaut)
center bottom	Bord inférieur, centré horizontalement (50% 100%)
right top	Coin supérieur droit (100% 0%)
right center	Bord droit, centré verticalement (100% 50%)
right bottom	Coin inférieur droit (100% 100%)
initial	Réinitialise à la valeur CSS par défaut (50% 50%)
inherit	Utilise la valeur de l'élément parent
unset	Supprime toute valeur définie

Utilisez-les ensemble : cover avec center top rogne le bas, en gardant le haut visible.

---

Quiz

Q1 : Un logo d'entreprise dans une barre latérale haute apparaît écrasé. Que définissez-vous ?

• A) Object-Fit sur fill
• B) Object-Fit sur contain
• C) Width sur 100%

Réponse

B) Object-Fit sur contain — cela met le logo à l'échelle pour qu'il tienne sans déformation. Vous verrez peut-être un espace vide, mais les proportions sont préservées.

Q2 : Une image héro a Object-Fit: cover, mais le sujet (en bas) est rogné. Comment corriger ?

• A) Définir Object-Fit sur contain
• B) Définir Object-Position sur center bottom
• C) Augmenter la hauteur du conteneur

Réponse

B) Définir Object-Position sur center bottom — le rognage s'ancre au bas, gardant le sujet visible.

Q3 : Un utilisateur de lecteur d'écran visite votre page. Une image n'a pas de texte alternatif. Que se passe-t-il ?

• A) Le lecteur d'écran lit le nom du fichier (IMG_4392.jpg)
• B) Le lecteur d'écran l'ignore silencieusement
• C) L'un ou l'autre selon le lecteur d'écran

Réponse

C) L'un ou l'autre selon le lecteur d'écran — certains lisent le nom du fichier, d'autres l'ignorent. Dans tous les cas, ajoutez un texte alternatif descriptif pour que tous les visiteurs comprennent l'image.

Q4 : Vous voulez intégrer une vidéo YouTube. Quel bloc utiliser ?

• A) Le bloc Video
• B) Le bloc Map
• C) Le bloc Image

Réponse

A) Le bloc Video — mettez son Provider sur Youtube (ou Youtube (no cookie)) et tapez le Video ID. Le bloc Map n'affiche que des cartes Google Maps.

Q5 : Votre image de 600px de large met longtemps à charger. Le fichier original fait 5000px. Que devez-vous faire ?

• A) Utiliser du CSS pour la réduire
• B) Définir Object-Fit sur scale-down
• C) Redimensionner l'image à 1200px avant de la téléverser

Réponse

C) Redimensionner l'image à 1200px avant de la téléverser — cela réduit considérablement la taille du fichier. La mise à l'échelle CSS ne réduit pas la taille du fichier, elle l'affiche juste plus petit.