Navigieren in Sproochbrugg

Bilder in Seiten, Cards und Newsmeldungen

Bilder können eine Seite sehr viel attraktiver machen, bei zu vielen oder schlechten Bildern aber auch das Gegenteil bewirken oder die Übersicht erschweren. Grundsätzlich sollte pro Seite mit wenigen, aber guten und grosszügigen Bildern gearbeitet werden. Ein guter Seitenauftakt kann ein Intro-Bild nach Haupttitel und dem Leadtext sein:

Bitte Alternativtext nicht vergessen
Bild «medium» über gesamte Inhaltsbreite.
Bild rechts ausgerichtet

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Lorem Justo Fringilla Vehicula

Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Dapibus Pharetra Mollis Sem Magna

Bitte Alternativtext eingeben
Bild links ausgerichtet

Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Achtung Barrierefreiheit

Bilder, die inhaltlich relevant sind, sollten immer mit einem Alternativtext versehen werden, der Benutzern von assistiver Technologie oder für Suchmaschinen als Bildersatzt dienen kann. Dafür Doppelklick auf das platzierte Bild, oder via rechte Maustaste > Bildeigenschaften und dann den Alternavtivtext im Feld «Alternativer Text» eingeben.

Bei rein dekorative Bilder sollte der Alternativtext explizit leer gelassen werden. So wird assistive Technologie das Bild ignorieren.

Bildergalerie

Bildergalerien zeigen immer eine ganze Auswahl von Bildern gleichzeitig. Bilder innerhalb einer Galerie sollten immer die gleichen Bilddimensionen besitzen, da Grössenunterschiede zu einem unschönen Raster führen.
Aus diesem Grund werden alle Bilder für Slideshows automatisch auf das Format 16:9 im Querformat zugeschnitten (zentraler Ausschnitt). Um die Kontrolle über den Ausschnitt zu haben (speziell bei Hochformat), kann ein Zuschneiden vor dem Upload ins CMS sinnvoll sein. Das vergrösserte Bild wird dann wieder in seinen Original-Proportionen dargestellt.


Bild zu jeweilger Cards

Beim Einfügen von Bilder in den Cards ist folgendes zu beachten:

  1. Die Bilder müssen eine Grösse von 840 * 962px aufweisen;

Link aus einer Card auf eine Newsmeldung

Der Link aus einer Card auf eine explizite Newsmeldung wird wie abgebildet eingerichtet.

Neue Card aktivieren

Zum Aktivieren einer neuen Card gehen Sie wie folgt vor:

  1. Gehen Sie in Seiten-ElementeInhalt und wählen Sie Home Teasers und klicken Sie auf Seiten-Element bearbeiten;

  1. Klicken Sie bei Cards-Liste nochmals auf bearbeiten;

  1. Mit Hinzufügen können Sie die neu erstellt Card in die Liste aufnehmen ⇒ Achtung: es werden nur die obersten 4 Cards auf der Landingpage angezeigt. Hier kann auch die Sortierung vorgenommen werden.
  2. Zum Abschluss 2 mal Speichern.


Einfügen von Bildergalerien in Newsmeldungen

Zum Einfügen von Bildergalerien in Newsmedungen gehen Sie wie folgt vor:

  1. Wählen Sie die entsprechende Meldung;
  2. Unter Allgemein fügen Sie ein Teaserbild hinzu, optional eine Bildergalerie ⇒ Achtung: es müssen in jedem Fall die Verwendungszwecke mitgegeben werden, dies geschieht mittels den Aktionen;
  3. Zum Abschluss speichern.

Automatischer Newsletter

Bildergalerien werden  beim Versand eines automatischen Newsletters nicht mitgesendet.


Events Teaserbilder

Auch bei den Veranstaltungen müssen die Bilder die auf der Landingpage zu sehen sind als Teaserbilder markiert werden:

  1. Die Bilder müssen eine Grösse von960 * 960px aufweisen;
  2. Unter Allgemein fügen Sie ein Teaserbild hinzu ⇒ Achtung: es muss in jedem Fall dere Verwendungszweck mitgegeben werden, dies geschieht mittel Aktionen;
  3. Zum Abschluss speichern.


Generell

Fügen Sie die Teaserbilder, Bildergalerien und Links auf Module generell unter Allgemein und nicht in der Sprachversion ein.