Navigation auf uzh.ch

Suche

Magnolia CMS User Guide

Neue Bildgrössen

Grössere Bilder auf grösserem Viewport

Mit der Vergrösserung des Viewports (Website-Breite) auf 1440px (bisher 980px) und der neuen Einspaltigkeit über alle Seitentypen hinweg werden die Bilder neu wesentlich breiter dargestellt. Dabei bleiben die Bildhöhen wie bisher flexibel, wir empfehlen aber die untenstehenden Bildformate. Insbesondere raten wir, die Bildformate (pro Bildtyp) über die ganze Website hinweg einheitlich zu gestalten.

Tabelle: Neue Bildgrössen

Die vollständigen Angaben finden Sie auf der Seite Bilder

Bildtyp Darstellungsgrösse* Effektive Bildgrösse** Empfohlenes Bildformat
Bild in Text/Bild-Komponente 840px Breite
(Höhe flexibel)		 1680px Breite
(Höhe flexibel)		 16:9 oder 4:3
Bild in Intro-Komponente (Top-Image) 840px Breite
(Höhe flexibel)		 1680px Breite
(Höhe flexibel)		 16:9 oder 3:2
Bild in Intro-Komponente auf Homepages und Subhomepages 1240px Breite
(Höhe flexibel)		 2480px Breite
(Höhe flexibel)		 16:9 oder 3:2
Bilder in Slideshow 1240px Breite
(Höhe flexibel)		 2480px Breite
(Höhe flexibel)		 16:9, 3:2 oder 4:3
Bild in Linkliste 385px Breite
(Höhe flexibel)		 770px Breite
(Höhe flexibel)		 4:3 oder 16:9
Bild in Teaser 320px Breite
(Höhe flexibel)		 640px Breite
(Höhe flexibel)		 4:3, 16:9 oder 3:2
Personen-Bild auf Team-Übersicht
Personen-Bild auf Personen-Seite		 100px Breite
200px Breite		 400px Breite
(Höhe flexibel)		 2:2.5 oder 2:3
Bilder in News-Übersicht 385px Breite
(Höhe flexibel)		 770px Breite
(Höhe flexibel)		 4:3 oder 16:9
Bild in Bildergalerie 575px Höhe (fix)
(Breite flexibel)		 1150px Höhe (fix)
(Breite flexibel)		 flexibel

* Maximale Darstellungsgrösse im Browser bei Desktop-Viewport
** Empfohlene effektive Bildgrösse für optimale Darstellung auf Retina-Bildschirmen (2:1)

Was passiert mit den Bildern bei der Umstellung?

Der Umgang mit bestehenden Bildern ist abhängig vom Bildtyp. Vorbehaltlich allfälliger Detailanpassungen nach der Finalisierung des Frontends ist das Vorgehen wie folgt:

  • Bilder in Intro-Komponenten und Text/Bild-Komponenten werden bei der Umstellung nur dann in der neuen Darstellungsgrösse angezeigt, wenn das Bild bereits in einer genug grossen (effektiven) Grösse vorliegt. Wenn die effektive Bildbreite nicht ausreicht, werden Bilder in der bisherigen Darstellungsgrösse angezeigt (left-aligned).
  • Bilder in Linklisten, Teasern sowie Personen-Bilder und Bilder in einer News-Übersicht werden alle in der neuen Darstellungsgrösse dargestellt.
  • Bilder in Slideshows erhalten einen grauen Hintergrund, wenn sie nicht gross genug vorhanden sind für die neue Darstellungsbreite oder wenn Slideshows Bilder unterschiedlicher Grösse u./o. Bildformate enthalten. Die Höhe der Slideshow entspricht dem Bild mit der höchsten Höhe.
  • Bilder in Bildergalerien werden neu in einer fixen Höhe und einer flexiblen Breite dargestellt und so aneinandergereiht.

Empfehlung für die Anpassung der Bilder

Wir empfehlen, die bestehenden Bilder wenn möglich im Vorfeld auf die neuen Grössen anzupassen und im Authoring auszutauschen. Dies gilt insbesondere für Bilder auf der Homepage, Bilder in Slideshows und Bildergalerien sowie für Bilder in Linklisten, da letztere alle in der neuen Darstellungsgrösse dargestellt werden:

  • Bild(er) auf Homepage: Wir empfehlen die Anpassung auf die neue maximale Breite.
  • Bilder in Slideshows: Wir empfehlen gleiche(s) Bildformat/Bildgrösse für alle Bilder.
  • Bilder in Bildergalerien: Wir empfehlen, alle Bilder auf die neue fixe Höhe aufzubereiten.
  • Bilder in Linklisten: Auch hier empfehlen wir das gleiche Bildformat für alle Bilder einer Seite, wenn möglich auch konsistent über die gesamte Website hinweg.

Bei den weiteren Bildern (Bilder in Teasern oder in Text/Bild-Komponenten) genügt auch eine Kontrolle und allfällige Anpassung nach der Umstellung. Dies gilt besonders für Bilder auf «älteren» Archivseiten oder «alten» News-Seiten.