motion: hover-zoom
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Lien texteLaboratoire média du framework
Cette annexe technique sépare la matrice complète de mise en œuvre de la démonstration orientée métier. Utilisez-la pour examiner les variantes, les solutions de repli et les décisions résolues du framework.
Laboratoire de conception média
Tous les contrôles média publics, les décisions résolues, les solutions de repli progressives et les états invalides exploitables sont réunis dans cette référence neutre du framework.
Mouvement et replis statiques
motion: none
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Lien texte
motion: parallax-medium
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Lien texte
motion: parallax-strong
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Lien texte
motion: parallax-subtle
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Lien texte
motion: reveal
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Lien texteCouverture des modèles média
| Couverture des modèles média | Référence |
|---|---|
asset-purpose-formats
|
[data-media-axis-matrix]
|
semantics-alt-caption-credit
|
[data-media-lab-group="aspects"]
|
box-viewport-frame-fit
|
[data-media-lab-group="fits"]
|
inline-standalone-figures
|
[data-media-lab-group="aspects"]
|
image-cards
|
[data-media-lab-group="card-arrangements"]
|
editorial-offset-overlap
|
[data-media-lab-group="section-layouts"]
|
full-bleed-hero-backdrop
|
[data-media-lab-group="surfaces"]
|
crop-focal-art-direction
|
[data-media-lab-group="focal-points"]
|
grid-mosaic-scroll-gallery
|
.media-gallery
|
lightbox
|
[data-media-lightbox]
|
informative-video
|
[data-media-lab-video="informative"]
|
decorative-video
|
[data-media-lab-video="decorative"]
|
hover-zoom
|
.media-motion-hover-zoom
|
reveal-motion
|
.media-motion-reveal
|
parallax
|
.media-motion-parallax-subtle
|
responsive-delivery-art-direction
|
[data-media-profile]
|
loading-performance-stability
|
[data-media-explain]
|
failure-empty-transitional-states
|
[data-media-invalid-states]
|
Axe
| Axe | Valeur | Comportement résolu |
|---|---|---|
| aspect |
auto
|
auto |
| aspect |
classic
|
4/3 |
| aspect |
landscape
|
3/2 |
| aspect |
portrait
|
4/5 |
| aspect |
square
|
1/1 |
| aspect |
tall
|
3/4 |
| aspect |
vertical
|
9/16 |
| aspect |
widescreen
|
16/9 |
| fit |
cover
|
cover |
| fit |
contain
|
contain |
| layout |
card-bleed
|
card-bleed |
| layout |
card-contained
|
card-contained |
| layout |
edge-to-edge
|
edge-to-edge |
| layout |
editorial-offset
|
editorial-offset |
| layout |
editorial-split
|
editorial-split |
| layout |
full-bleed
|
full-bleed |
| layout |
gallery-grid
|
gallery-grid |
| layout |
gallery-mosaic
|
gallery-mosaic |
| layout |
inline
|
inline |
| layout |
overlap
|
overlap |
| layout |
section-backdrop
|
section-backdrop |
| layout |
video
|
video |
| overlay |
none
|
none / neutral |
| overlay |
readable
|
readable / neutral |
| motion |
hover-zoom
|
progressive |
| motion |
none
|
static |
| motion |
parallax-medium
|
progressive |
| motion |
parallax-strong
|
progressive |
| motion |
parallax-subtle
|
progressive |
| motion |
reveal
|
progressive |
| treatment |
backdrop
|
landscape / cover / none |
| treatment |
editorial
|
landscape / cover / subtle |
| treatment |
natural
|
auto / contain / none |
| treatment |
poster
|
widescreen / cover / none |
Proportions
Recadrage et image contenue
Déplacement du point focal
focal point: 0.5, 0.35 / portrait source in classic frame
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
focal point: 0.5, 0.35 / portrait source in landscape frame
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
focal point: 0.5, 0.35 / portrait source in widescreen frame
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Variante déclarée de famille de recadrage
Dispositions de carte
Exemple de contrat média
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Lien texteExemple de contrat média
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Lien texte
Exemple de contrat média
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Lien texte
Exemple de contrat média
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Lien texteMises en page de section
Exemple de contrat média
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Exemple de contrat média
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Exemple de contrat média
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Exemple de contrat média
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Exemple de contrat média
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Surfaces média claires et sombres
media surface: light
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
media surface: dark
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Galerie statique en grille
Galerie à défilement avec visionneuse
Galerie en mosaïque
Vidéo d'ambiance décorative
Vidéo d'ambiance décorative
Le même contenu sémantique vérifie la hiérarchie, l'espacement, les limites et les contrôles dans chaque traitement média.
Vidéo informative
Le média agrandi est indisponible.
Transcription vidéo
Un extrait silencieux montre du pain près des braises d'un four à bois.
Comportement résolu
| Nom | Valeur |
|---|---|
| asset |
bakery-team
|
| source |
/img/bakery-team.png
|
| placement |
figure / informative
|
| rendition |
feature / 640,768,960,1280,1600
|
| layout |
inline / inline
|
| treatment |
editorial
|
| surface |
none
|
| priority |
lazy / low
|
| accessibility |
informative / catalog-default
|
| fallbacks |
static-responsive-image / unchanged-static-media
|
| renderer |
media-frame media-relationship-figure media-aspect-landscape media-frame-subtle
|
Diagnostic
UNKNOWN_ASSET
[media:UNKNOWN_ASSET] Unknown media asset "missing-media-asset". Path: media-lab.missing-asset.asset. Rejected: "missing-media-asset". Target: media contract v2. Recovery: Select a stable ID declared in src/site/_data/media.yaml.
Chemin media-lab.missing-asset.asset
Correction Select a stable ID declared in src/site/_data/media.yaml.
UNSUPPORTED_LAYOUT
[media:UNSUPPORTED_LAYOUT] Layout "full-bleed" does not support relationship "card-media". Path: media-lab.invalid-layout.layout. Rejected: "full-bleed". Target: media contract v2. Recovery: Select a layout declared for this relationship by the accepted skin.
Chemin media-lab.invalid-layout.layout
Correction Select a layout declared for this relationship by the accepted skin.