Aller au contenu

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 avec un placeholder
  3. Sélectionnez l'image
  4. Dans le panneau Attributs à droite, trouvez le champ src (libellé « Image URL »)
  5. Soit :
  6. Entrez directement une URL (par ex., https://example.com/photo.jpg)
  7. Cliquez sur l'icône du gestionnaire de médias pour téléverser et parcourir les fichiers

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, ou cliquez sur l'icône du gestionnaire de médias dans le champ src
  2. Cliquez sur Upload ou glissez des fichiers dans le gestionnaire
  3. Sélectionnez l'image que vous souhaitez utiliser
  4. Elle apparaît sur votre canevas et le champ src se remplit automatiquement

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 le panneau Attributs, 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

Pour ajouter une vidéo auto-hébergée :

  1. Glissez le bloc Video du panneau Blocs
  2. Silex crée un élément <video>
  3. Sélectionnez la vidéo
  4. Dans le panneau Attributs, définissez l'URL source (ou utilisez le gestionnaire de médias pour téléverser)
  5. Configurez les options :
  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

Pour YouTube, Vimeo ou d'autres services vidéo hébergés :

N'utilisez pas le bloc Video. À la place :

  1. Glissez le bloc Map (malgré son nom, il crée un iframe pour tout contenu intégré)
  2. Collez le code d'intégration du service vidéo
  3. Ou utilisez le bloc Custom code pour un contrôle HTML complet

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

Le bloc Map crée un élément <iframe>. Malgré son nom, vous pouvez intégrer n'importe quel contenu tiers :

  • Google Maps
  • Calendriers
  • Publications de réseaux sociaux
  • Sondages
  • Widgets de chat
  • Vidéos YouTube/Vimeo

Pour ajouter du contenu intégré :

  1. Glissez le bloc Map du panneau Blocs
  2. Sélectionnez-le et cherchez le champ src dans le panneau Attributs
  3. Collez l'URL d'intégration ou le code iframe

Pour un contrôle total, utilisez le bloc Custom code à la place. Il vous permet de coller n'importe quel snippet HTML, y compris du JavaScript.

Lecteurs audio

Glissez le bloc Audio (listé comme élément média) pour intégrer un lecteur audio. Définissez l'URL source dans le panneau Attributs. Usages courants : podcasts, musique, effets sonores.

Canvas et autres éléments remplacés

Le bloc Canvas crée un élément <canvas> pour les dessins créés avec JavaScript. La plupart des designers ne l'utiliseront pas — c'est pour le scripting avancé. Les propriétés Object-Fit et Object-Position ci-dessous s'appliquent aussi aux éléments canvas.

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 Div, 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 les éléments d'image :

  6. Ajoutez trois Divs dans la section, définissez la balise sur article
  7. Définissez Flex-basis sur 200px, Flex-grow sur 0

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

  9. Ajouter les images dans chaque article :

  10. Glissez un bloc Image dans chaque article
  11. Définissez Width sur 100%, Height sur 100%
  12. Définissez Object-Fit sur cover
  13. Définissez Object-Position sur center center

  14. Ajoutez un texte alternatif à chaque image

  15. 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 Div, 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 Div 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. Ajoutez un Div dans le héro
  12. Définissez Position sur absolute, Top sur 50%, Left sur 50%
  13. Ajoutez du texte à l'intérieur avec un Flex-basis élevé pour le centrer
  14. Stylisez avec de la couleur et des ombres 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 éléments sémantiques (Sections, Divs, Flexbox). Les images sont pour le contenu.

En savoir plus

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 ou le bloc Custom code
  • C) Le bloc Image
Réponse

B) Le bloc Map ou le bloc Custom code — le bloc Video est pour les fichiers vidéo auto-hébergés. Le bloc Map crée un iframe pour le contenu intégré.

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.

Éditer cette page sur GitLab