Mercury Dokumentation

Unterschiedliches Bildformat für Desktop und Mobil einstellen

In den Element-Einstellungen vieler Elemente kann nun ein unterschiedliches Bildformat für Desktop und Mobil eingestellt werden. Damit kann die Darstellung von Bildern für große und kleine Ausgabegeräte optimiert werden.

Ein typischer Anwendungsfall

Auf einer Detailseite wird das Key-Visual-Bild oft oben "seitenfüllend" im Querformat dargestellt (z.B. "2.35:1 Widescreen"). Die Bilder in den folgenden Absätzen werden neben dem Text des Absatzes angezeigt und sind daher deutlich kleiner.

Dies gilt jedoch nur für große "Desktop"-Bildschirme. Auf mobilen Geräten mit kleinen Bildschirmen werden alle Bilder in der Regel in voller Bildschirmbreite angezeigt. Das Key-Visual im Querformat ist daher oft kleiner - weil weniger hoch - als die Bilder in den folgenden Absätzen.

Mit den neuen Einstellungsmöglichkeiten kann dies optimiert werden, wie das Beispiel unten zeigt. Das Key-Visual kann z.B. für mobile Geräte quadratisch dargestellt werden und die Bilder in den folgenden Absätzen im 16:9 Querformat. Dadurch wird das Key-Visual wieder größer - weil höher - als die Bilder in den folgenden Absätzen. 

Um den Effekt auf großen "Desktop"-Bildschirmen zu sehen, müssen Sie das Browserfenster verkleinern.

Vergleichen Sie dies mit der Darstellung der Bilder auf kleinen Bildschirmen, wenn das Bildformat NICHT angepasst wird. 

Zeigt neue Möglichkeiten auf:Beispiel-Artikel mit vielen Absätzen

Dieser Artikel hat mehrere Absätze mit Bildern. Dadurch lässt er sich gut verwenden, um die Dartellungsmöglichkeiten der Detailansicht zu demonstrieren.
Sonnenuntergang fotografiert von der linken Rheinseite. Man sieht den Kölner Dom und die Hohenzollernbrücke. Sonnenuntergang fotografiert von der linken Rheinseite. Man sieht den Kölner Dom und die Hohenzollernbrücke.
Datum:
12. März 2023
Von:
Arno Autor

Erster Absatz

Blick vom Kölner Dom Blick vom Kölner Dom

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind.

Absatz Nummer Zwei

Kölner Dom bei Nacht Kölner Dom bei Nacht

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik.

Absatz der Verkehrsinfrastrukturfinanzierungsgesellschaft

Kölner Dom am Abend Kölner Dom am Abend

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.