Si une image est plus large que la colonne de contenu principale (comme cela arrive souvent sur les écrans de petite taille), DevSite la limite automatiquement à la largeur de la colonne. Toutefois, si les attributs width et height sont définis pour l'image, seule la largeur est redimensionnée, ce qui entraîne une distorsion de l'image. Par conséquent, ne définissez pas la height de l'image. Cela signifie que la page peut être redessinée si l'image met du temps à se charger (ce qui provoque un saut), mais c'est mieux qu'une image qui ne tient pas sur l'écran.
Vous pouvez appliquer class="screenshot" à une image pour lui donner une bordure qui la décale par rapport au texte à proximité. Cette option est généralement utilisée pour les captures d'écran dont l'arrière-plan est blanc et qui seraient autrement perdues sur la page. N'utilisez pas cette fonctionnalité pour les images qui n'en ont pas besoin.
Flottant à côté du texte
L'image de droite comporte également class="attempt-right", qui la fait flotter à droite sur les écrans plus grands, mais qui force la mise en page verticale sur les écrans plus petits, les tablettes et les écrans plus petits, où la flottaison à droite poserait problème. class="attempt-left" est également disponible. Pour utiliser attempt-left et attempt-right ensemble, assurez-vous que l'élément attempt-left vient en premier.
Lorsque les images sont flottantes, elles ne doivent pas dépasser 50% de la largeur de la colonne. Si c'est le cas, ils sont redimensionnés.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Vous pouvez utiliser les mêmes classes pour faire flotter d'autres éléments, tels qu'un <figure> contenant à la fois une image et une légende:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Effacer le texte flottant
Pour éviter que le texte ne s'affiche en retour à la ligne autour d'un élément flottant et à sa largeur native, vous pouvez ajouter une classe clear aux éléments concernés qui suivent l'élément flottant.
<p class="clear">Hello world.</p>
Exemple avec la classe clear
Dans cet exemple, le deuxième paragraphe inclut une classe clear.
Ce paragraphe s'affiche autour de l'image flottante. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ce paragraphe possède une classe claire et ne s'affiche pas autour de l'image flottante. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Exemple sans la classe clear
Dans cet exemple, les deux paragraphes s'affichent autour de l'image flottante.
Ce paragraphe s'affiche autour de l'image flottante. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ce paragraphe s'affiche autour de l'image flottante. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Images du thème sombre
DevSite fournit un petit ensemble de noms de classe qui peuvent être appliqués aux images pour modifier leur apparence lorsque le thème sombre est activé.
Noircissement de l'image
Par défaut, toutes les images, à l'exception des fichiers SVG, sont légèrement assombries dans le thème sombre.
Pour supprimer l'assombrissement par défaut d'une image lorsque le thème sombre est activé, ajoutez une classe sans filtre à l'image:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Inverser une image
Pour les images dont la palette de couleurs monochrome est noire ou sombre, ajoutez une classe invert à l'image pour qu'elle s'affiche en blanc/clair dans le thème sombre:
<img src="/site-assets/logo-github.png" class="invert" alt="">
Pour une page _index.yaml, ajoutez invert au champ classname pour un élément de ligne:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Image de la variante du thème sombre distincte
Si vous souhaitez fournir une image distincte qui ne s'affiche que lorsque le thème sombre est activé, encapsulez l'élément <img> existant dans un élément <picture> et ajoutez un élément <source> pour la variante du thème sombre.
Dans l'exemple ci-dessous, il existe deux fichiers SVG pour le logo Google dans un élément <picture>. Lorsque le thème sombre est désactivé, le fichier image de l'élément <img> s'affiche, avec le logotype avec les quatre couleurs de la marque Google. Lorsque le thème sombre est activé, le fichier image de l'élément <source> s'affiche, et le logo est entièrement blanc, sans couleurs de la marque.
Exemple
Code
<picture>
<source
srcset="/devsite/images/google-dark-theme.svg"
media="(prefers-color-scheme: dark)"
class="devsite-dark-theme"
alt="">
<img src="/devsite/images/google.svg" alt="">
</picture>
Remarques
Étant donné que le thème sombre est activé via un flag de fonctionnalité, veuillez noter les points suivants concernant les attributs de l'élément <source>:
L'élément <source> doit inclure une classe devsite-dark-theme, qui fournit un crochet permettant au frontend de DevSite de mettre à jour l'attribut multimédia et sa valeur en fonction de l'option de thème sombre sélectionnée par l'utilisateur: light, dark ou device.
La valeur de l'attribut "media" doit inclure une requête multimédia (prefers-color-scheme: dark).
Si vous disposez déjà d'éléments <source> avec des requêtes media dans l'attribut multimédia, ajoutez les requêtes multimédias existantes avec and (prefers-color-scheme: dark) ou ajoutez un élément <source> dont la valeur de l'attribut multimédia est (prefers-color-scheme: dark). La requête media et sa valeur seront supprimées ou remplacées en fonction de l'option de thème sombre sélectionnée par l'utilisateur.
Bien que le nom de fichier de l'image de la variante du thème sombre dans l'attribut srcset puisse techniquement être n'importe quoi, il est recommandé d'ajouter -dark-theme au nom de fichier de l'image existante.