Image and Text Section
Mit einer "Image and Text Section" können wir den Inhalt von Standardseiten strukturieren, indem wir Abschnitte mit Text und Bildern hinzufügen.
Zum Inhalt dieser Seite
Image and Text: Überblick
Mit dem Modul „Image and Text Section“ kann man einen Textblock mit oder ohne Bild auf einer Seite hinzufügen.
Da auf einer Seite standardmäßig nur ein Bild eingefügt werden kann, ermöglicht dieses Modul den Einbau weiterer Bilder.
Im CMS
Abschnitt „Container“
Die Module können über dem Abschnitt „Container“ auf einer Seite integriert werden.
Es gibt dazu zwei Möglichkeiten, du kannst:
- ein bereits bestehendes Modul über den Button „Add existing items“ einfügen
- ein neues Modul über den zweiten Button „Create new item“ erstellen
Sobald du ein neues Modul erstellen willst, musst du auf den Button „Create new item“ klicken.
Anschließend erfolgt die Auswahl des erwünschten „Content types“, in diesem Fall „Image and Text Section“.
Nun wird die Auswahl über den Button „Create“ bestätigt.
Es erscheint die Detailansicht des neuen Moduls. Hier müssen nun alle Felder ausgefüllt werden.
Feld „Content item name“
Dieser Name ist nur ein programminterner Name im CMS Kontent.ai, somit nicht der Titel des Moduls, der online auf der Seite erscheint, dennoch kann aber eine Entsprechung stattfinden. Dieser Name identifiziert das „Item“ im CMS und wird für die Volltextsuche im Bereich „Content & assets“ verwendet. Standardmäßig wird für alle Sprachversionen ein Name vergeben, z.B. Name Modul / Nome Modulo.
Erinnere dich daran, die einzelnen Sprachversionen mit einem „Slash“ (/) getrennt zu halten.
Dieses Feld ist immer nur ein einer Sprachversion des Projekts abänderbar.
Feld „Title“
Falls erwünscht, kann dem Modul ein Titel zugewiesen werden, andernfalls lässt man dieses Feld leer.
Feld „Description“
In diesem Feld wird der Beschreibungstext eingefügt. Hier sind keine Bilder vorgesehen, sondern nur im gewidmeten Bereich „Bilder/Images“.
Hinweis: Im Bereich „Standardseite“ dieses Handbuchs findest du eine Reihe von Tipps zum korrekten Abfassen von Webtexten.
Abschnitt „Image“
In diesem Bereich kann jeweils nur ein Bild eingefügt werden.
Es wird die maximale Dateigröße eines Bildes angegeben, und zwar nicht größer als 3 MB.
Das Bild kann auch über den Button „Pick from assets“ direkt im „Assets“-Bereich in Kontent.ai hochgeladen werden.
Handelt es sich um ein neues Bild, das noch nicht im „Assets“-Bereich vorhanden ist, kann es über „Browse“ oder über die “Drag & drop”-Funktion direkt in den „Upload“-Bereich hineingezogen werden.
Abschnitt „Image position“
Es folgen eine Reihe von Einstellungen, du kannst z.B. die Bildausrichtung, rechts oder links, bestimmen. Der Text passt sich dann automatisch an das Bild an und muss nicht ausgerichtet werden.
Abschnitt „Image expansion“
Außerdem ist es möglich, die Ausdehnung des Bildes in der zur Verfügung stehenden Breite zu definieren. Ein Bild kann die gesamte zur Verfügung stehende Breite des Inhaltes einnehmen („full“), nur eine Hälfte davon („half“) oder letztendlich nur ein Drittel („single“).
Im Falle der „full“-Version erscheint zuerst das Bild und darunter dann erst der Text.
Die Bildqualität sollte immer gut sein und für die Bildauflösung gilt immer ein Wert von 72 dpi.
Weiters müssen immer die vom Webdesigner vorgegebenen Standardwerte beachtet werden, damit eine optimale grafische Darstellung auf allen Endgeräten garantiert werden kann („responsive design“).
Hier kannst du die Prototypen vom Webdesigner einsehen:
Varianten Bild mit Text (Detailseiten):
https://demo.siag.it/landesverwaltung_v3/modules/bilder.html
Nachfolgend die Standardwerte, die es zu berücksichtigen gilt:
Varianten Bild mit Text:
- .full: Breite: 1170 Pixel, Höhe: 450 Pixel
- .half: Breite: 562 Pixel, Höhe: 300 Pixel
- .single: Breite: 562 Pixel, Höhe: 300 Pixel
Abschnitt „Image height“
Die darauffolgende Einstellung betrifft die Festlegung der Bildhöhe. Es kann die vordefinierte Höhe ("fixed") eingestellt oder die originale Gesamthöhe des Bildes beibehalten werden ("full").
Hinweis: Alle verwendeten Bilder müssen frei von „Copyright“-Rechten („royality-free“) oder im Besitz des Kunden selber sein. Es ist gesetzlich nicht erlaubt, Bilder aus dem Internet ohne Autorisierung zu benutzen.
Alle Bilder benötigen einen beschreibenden Text, "alt-text" genannt. Dieser Text muss immer das Bild selbst beschreiben und unterliegt den Regeln zur Barrierefreiheit. Die „Screenreader“-Programme lesen diesen Text den Menschen mit Behinderung vor. Im Falle eines Logos oder Bilder mit Text, z.B. ein Banner, sollte dieser Text auch im Beschreibungsfeld eingefügt werden, damit diese Information alle Benutzer erreicht.
Im Falle eines komplexen Bildes, z.B. ein Diagramm, muss eine ausführliche Beschreibung im Textformat zur Alternative bereitgestellt werden.
Sobald ein Bild eingefügt wird, muss sogleich der Beschreibungstext ("alt-text") im vorgesehenen Feld eingetragen werden. Falls das Bild vom Bildarchiv des Projekts („Assets“-Bereich) des Projekts hochgeladen wird, muss dieses Feld kontrolliert und eventuell ausgefüllt werden.
Mit einem Klick auf das Bild erreicht man das obligatorische Beschreibungsfeld:
Abschnitt „Background Type“
Im letzten Abschnitt kann die Hintergrundfarbe des gesamten Moduls definiert werden. Es gibt eine Variante mit transparentem Hintergrund ("transparent") und eine mit einem hellgrauen Hintergrund ("grey").
Online: Vorschau zu einem Beispiel des Moduls „Image and Text Section“, Bild mit Text (transparente Variante + Bild „single“):
Online: Beispiel Vorschau des Moduls „Image and Text Section“, Bild mit Text (hellgraue Variante + Bild „half“):
Letzte Aktualisierung: 29/08/2024