motion: hover-zoom
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
Lien texteLaboratoire média du framework
Cette annexe technique sépare la matrice complète de mise en oeuvre 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 media
Tous les controles media publics, les decisions resolues, les solutions de repli progressives et les etats invalides exploitables sont reunis dans cette reference neutre du framework.
Mouvement et replis statiques
motion: none
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
Lien texte
motion: parallax-medium
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
Lien texte
motion: parallax-strong
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
Lien texte
motion: parallax-subtle
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
Lien texte
motion: reveal
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
Lien texteCouverture des modeles media
| Couverture des modeles media | Reference |
|---|---|
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
|
[data-media-motion="hover-zoom"]
|
reveal-motion
|
[data-media-motion="reveal"]
|
parallax
|
[data-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 resolu |
|---|---|---|
| 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
Deplacement du point focal
focal point: 0.5, 0.35 / portrait source in classic frame
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
focal point: 0.5, 0.35 / portrait source in landscape frame
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
focal point: 0.5, 0.35 / portrait source in widescreen frame
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
Variante declaree de famille de recadrage
Dispositions de carte
Exemple de contrat media
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
Lien texteExemple de contrat media
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
Lien texte
Exemple de contrat media
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
Lien texte
Exemple de contrat media
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
Lien texteMises en page de section
Exemple de contrat media
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
Exemple de contrat media
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
Exemple de contrat media
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
Exemple de contrat media
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
Exemple de contrat media
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
Surfaces media claires et sombres
media surface: light
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
media surface: dark
Le meme contenu semantique verifie la hierarchie, l'espacement, les limites et les controles dans chaque traitement media.
Galerie statique en grille
Galerie a defilement avec visionneuse
Galerie en mosaique
Video d'ambiance decorative
Video informative
Le media agrandi est indisponible.
Transcription video
Un extrait silencieux montre du pain pres des braises d'un four a bois.
Comportement resolu
| 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-host media-relationship-figure media-position-inline media-arrangement-stacked media-aspect-landscape media-aspect-behavior-fixed media-fit-cover media-frame-subtle media-tone-natural media-layout-inline media-caption-start media-prominence-standard media-motion-none media-attachment-scroll
|
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.