Medienlabor des Frameworks

Dieser technische Anhang trennt die vollständige Implementierungsmatrix von der geschäftsorientierten Übersicht. Prüfen Sie hier einzelne Varianten, Rückfälle und aufgelöste Framework-Entscheidungen.

Zurück zur Medienübersicht

Medien-Designlabor

Alle offentlichen Mediensteuerungen, aufgelosten Entscheidungen, progressiven Ruckfalle und umsetzbaren Fehlerzustande stehen in dieser neutralen Framework-Referenz.

Bewegung und statische Ruckfalle

Three freshly baked sourdough loaves on a flour-dusted table.
motion: hover-zoom

motion: hover-zoom

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Textlink
Three freshly baked sourdough loaves on a flour-dusted table.
motion: none

motion: none

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Textlink
Artisan baker shaping sourdough loaves in a warm workshop.
motion: parallax-medium

motion: parallax-medium

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Textlink
Artisan baker shaping sourdough loaves in a warm workshop.
motion: parallax-strong

motion: parallax-strong

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Textlink
Artisan baker shaping sourdough loaves in a warm workshop.
motion: parallax-subtle

motion: parallax-subtle

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Textlink
Artisan baker shaping sourdough loaves in a warm workshop.
motion: reveal

motion: reveal

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Textlink

Abdeckung der Medienmuster

Abdeckung der Medienmuster
Abdeckung der Medienmuster Referenz
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]

Achse

Medien-Designlabor
Achse Wert Aufgelostes Verhalten
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

Seitenverhaltnisse

Three freshly baked sourdough loaves on a flour-dusted table.
aspect: auto
Three freshly baked sourdough loaves on a flour-dusted table.
aspect: classic
Three freshly baked sourdough loaves on a flour-dusted table.
aspect: landscape
Portrait of Ana, an artisan baker in the workshop.
aspect: portrait
Goldkorn paper bread bag and wrapped sourdough loaf on a transparent background.
aspect: square
Three freshly baked sourdough loaves on a flour-dusted table.
aspect: tall
Three freshly baked sourdough loaves on a flour-dusted table.
aspect: vertical
Three freshly baked sourdough loaves on a flour-dusted table.
aspect: widescreen

Abdecken und Einpassen

Goldkorn paper bread bag and wrapped sourdough loaf on a transparent background.
fit: cover
Goldkorn paper bread bag and wrapped sourdough loaf on a transparent background.
fit: contain

Bewegung des Fokuspunkts

Portrait of Ana, an artisan baker in the workshop.

focal point: 0.5, 0.35 / portrait source in classic frame

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Portrait of Ana, an artisan baker in the workshop.

focal point: 0.5, 0.35 / portrait source in landscape frame

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Portrait of Ana, an artisan baker in the workshop.

focal point: 0.5, 0.35 / portrait source in widescreen frame

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Deklarierte Variante der Zuschnittfamilie

Three artisan bakers together in their workshop.
fixed crop-family alternative: portrait

Kartenanordnungen

Three freshly baked sourdough loaves on a flour-dusted table.
card arrangement: stacked

Beispiel fur einen Medienvertrag

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Textlink

Beispiel fur einen Medienvertrag

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Textlink
Three freshly baked sourdough loaves on a flour-dusted table.
card arrangement: split
Portrait of Ana, an artisan baker in the workshop.
card arrangement: featured

Beispiel fur einen Medienvertrag

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Textlink
Three freshly baked sourdough loaves on a flour-dusted table.
card arrangement: overlay

Beispiel fur einen Medienvertrag

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Textlink

Abschnittslayouts

Three freshly baked sourdough loaves on a flour-dusted table.
layout: edge-to-edge

Beispiel fur einen Medienvertrag

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Beispiel fur einen Medienvertrag

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Portrait of Ana, an artisan baker in the workshop.
layout: editorial-offset
Three freshly baked sourdough loaves on a flour-dusted table.
layout: editorial-split

Beispiel fur einen Medienvertrag

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Beispiel fur einen Medienvertrag

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Portrait of Ana, an artisan baker in the workshop.
layout: full-bleed
Three freshly baked sourdough loaves on a flour-dusted table.
layout: overlap

Beispiel fur einen Medienvertrag

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Helle und dunkle Medienoberflachen

Three artisan bakers together in their workshop.
media surface: light

media surface: light

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Primare Aktion Textlink
Three artisan bakers together in their workshop.
media surface: dark

media surface: dark

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Primare Aktion Textlink

Statische Rastergalerie

Scroll-Snap-Galerie mit Lightbox

Mosaikgalerie

Dekoratives Hintergrundvideo

Dekoratives Hintergrundvideo

Derselbe semantische Inhalt pruft Hierarchie, Abstande, Grenzen und Steuerelemente uber alle Medienbehandlungen hinweg.

Informatives Video

Informatives Video Transkript lesen
Video-Transkript

Ein stummer Ausschnitt zeigt Brot neben gluhender Asche in einem Holzofen.

Aufgelostes Verhalten

Aufgelostes Verhalten
Name Wert
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

Diagnose

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.

Pfad media-lab.missing-asset.asset

Korrektur 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.

Pfad media-lab.invalid-layout.layout

Korrektur Select a layout declared for this relationship by the accepted skin.