motion: hover-zoom
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
Enlace de textoLaboratorio multimedia del framework
Este apéndice técnico separa la matriz completa de implementación de la muestra orientada al negocio. Úsalo para examinar variantes, alternativas y decisiones resueltas del framework.
Laboratorio de diseno multimedia
Todos los controles multimedia publicos, las decisiones resueltas, las alternativas progresivas y los estados invalidos accionables se reunen en esta referencia neutral del framework.
Movimiento y alternativas estaticas
motion: none
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
Enlace de texto
motion: parallax-medium
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
Enlace de texto
motion: parallax-strong
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
Enlace de texto
motion: parallax-subtle
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
Enlace de texto
motion: reveal
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
Enlace de textoCobertura de patrones multimedia
| Cobertura de patrones multimedia | Referencia |
|---|---|
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]
|
Eje
| Eje | Valor | Comportamiento resuelto |
|---|---|---|
| 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 |
Proporciones
Recorte y contenido
Movimiento del punto focal
focal point: 0.5, 0.35 / portrait source in classic frame
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
focal point: 0.5, 0.35 / portrait source in landscape frame
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
focal point: 0.5, 0.35 / portrait source in widescreen frame
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
Alternativa declarada de familia de recorte
Disposiciones de tarjeta
Ejemplo de contrato multimedia
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
Enlace de textoEjemplo de contrato multimedia
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
Enlace de texto
Ejemplo de contrato multimedia
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
Enlace de texto
Ejemplo de contrato multimedia
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
Enlace de textoDisenos de seccion
Ejemplo de contrato multimedia
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
Ejemplo de contrato multimedia
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
Ejemplo de contrato multimedia
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
Ejemplo de contrato multimedia
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
Ejemplo de contrato multimedia
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
Superficies multimedia claras y oscuras
media surface: light
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
media surface: dark
El mismo contenido semantico comprueba jerarquia, espaciado, limites y controles entre tratamientos multimedia.
Galeria estatica en cuadricula
Galeria con ajuste de desplazamiento y visor
Galeria en mosaico
Video ambiental decorativo
Video informativo
El contenido ampliado no esta disponible.
Transcripcion del video
Un clip silencioso muestra pan junto a las brasas de un horno de lena.
Comportamiento resuelto
| Nombre | Valor |
|---|---|
| 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
|
Diagnostico
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.
Ruta media-lab.missing-asset.asset
Correccion 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.
Ruta media-lab.invalid-layout.layout
Correccion Select a layout declared for this relationship by the accepted skin.