Fließtext und Bilder / Bildergalerie

WEBRED 10-010

Was Sie wissen müssen

Sie wollen Fließtext verfassen und diesen optional mit einem oder mehreren Bildern anreichern oder eine Bildergalerie einfügen.

Der Inhaltscontainer Text & Medien bietet die Möglichkeit eine beliebige Anzahl an Bildern mit umfließendem Text darzustellen. Dieser Inhaltscontainertyp ist sehr flexibel und deshalb auch für folgende Fälle geeignet:

- Sie wollen eine Überschrift mit dazugehörigem Fließtext auf einer Seite einfügen.
- Sie wollen eine Überschrift mit dazugehörigem Fließtext sowie einem oder mehreren Bildern auf einer Seite einfügen.
- Sie wollen eine Bildergalerie auf einer Seite einfügen.

Was Sie tun müssen

  1. Inhaltscontainer "Text & Medien" einfügen

    • Fügen Sie an der gewünschten Stelle auf einer Seite durch Klick auf die Schaltfläche [+ Inhalt] einen neuen Inhaltscontainer hinzu.

    • Die Ansicht aktualisiert sich, Sie sehen jetzt den Wizard Neues Inhaltselement erstellen.

    • Wählen Sie im Reiter Typischer Seiteninhalt den Inhaltscontainertyp Text & Medien aus.

    • Die Ansicht aktualisiert sich, Sie sehen jetzt eine leere Eingabemaske zur Bearbeitung des Inhaltscontainers.

    • Sollten Sie den Typ eines Inhaltscontainers nachträglich ändern wollen können Sie dies über das Auswahlmenü Typ im Reiter Allgemein der sich gerade geöffneten Eingabemaske tun.

  2. Eine Überschrift vergeben (optional)

    • Wechseln Sie in den Reiter Allgemein (wenn Sie sich dort nicht bereits befinden) und geben Sie in das Feld Überschrift eine aussagekräftige Überschrift ein.

    • Legen Sie anschließend die Überschriftenhierarchie durch das Auswahlmenü Typ fest. 

    • Sie können Überschriften der 1., 2., 3., 4., 5. und 6. Ordnung anlegen oder sie auch komplett ausblenden.

    • Wenn Sie als Typ Überschrift nicht anzeigen wählen wird die Überschrift im Frontend nicht ausgegeben. Die Überschrift hilft Ihnen dann bei der Organisation Ihrer Inhaltscontainer im Backend.

    • Halten Sie bei der Auswahl des Überschriftentyps stets die Reihenfolge der Verschachtelung von Überschriften ein. Dies ist für eine optimale Barrierefreiheit und SEO unerlässlich. Die Semantik eines Überschriftentyps sollte immer den Vorzug gegenüber der optischen Darstellung des Überschriftentyps haben.

    • Tipp: Sie können die optische Gestaltung nach Auswahl des richtigen Typs gesondert beeinflussen, indem Sie alternativ über Überschrift anzeigen als das gewünschte Styling auswählen.

  3. Fließtext einpflegen und formatieren

    • Tragen Sie in das Feld Text den Fließtext ein, der im Frontend angezeigt werden soll und formatieren Sie den Text mit Hilfe der Formatierungsmöglichkeiten des Rich Text Editors (RTE).

  4. Bilder verknüpfen und beschriften (optional)
    Sofern Sie Bilder zusammen mit dem Fließtext anzeigen lassen möchten, müssen Sie diese mit dem Inhaltscontainer verknüpfen. Idealerweise vergeben Sie für jedes verknüpfte Bild einen Titel und einen Beschreibungstext.

    • Wechseln Sie in den Reiter Medien und klicken Sie auf Mediendatei hinzufügen.

    • Es öffnet sich ein neues Fenster. Navigieren Sie über den angezeigten Verzeichnisbaum in den Ordner Ihres persönlichen Dateibereichs, in dem Sie die Bilddatei zuvor hochgeladen haben.

    • Verknüpfen Sie ein Bild mit Ihrem Inhaltscontainer, indem Sie auf den Dateinamen klicken.

    • Fügen Sie mehrere Bilder hinzu, indem Sie nacheinander auf die Schaltfläche [+] rechts neben dem Dateinamen der jeweiligen Bilddatei klicken.

    • Schließen Sie das Fenster über das Kreuz an der oberen rechten Ecke, sobald Sie alle gewünschten Bilder mit Ihrem Inhaltscontainer verknüpft haben.

    • Klicken Sie auf einen Eintrag in der Liste verknüpfter Bilder innerhalb des Reiters Medien um die Bild-Metadaten zu pflegen.

    • Es klappt eine Eingabemaske für die Einpflege von Bild-Metadaten auf.

    • Wenn Sie einen Titel vergeben möchten aktivieren Sie die Checkbox Elementspezifischen Wert setzen. Vergeben Sie anschließen einen sinnvollen Bildtitel.

    • Wenn Sie eine Bildunterschrift vergeben möchten aktivieren Sie die Checkbox Elementspezifischen Wert setzen. Vergeben Sie anschließen eine Bildbeschreibung.

    • Bitte berücksichtigen Sie Kriterien und Richtlinien für SEO und Barrierefreiheit bei der Wahl von Bildtitel und Bildbeschreibung. Lesen Sie zu diesem Zweck die Anleitung Barrierefreie Grafiken.

  5. Bilder vergrößerbar machen(optional)
    Wenn Sie möchten, dass ein Bild von Webseitenbesuchern vergrößert werden kann, so muss der Titel und der Beschreibungstext in den Metainformationen des Bildes hinterlegt werden.

    • Öffnen Sie die Metainformationen der betreffenden Grafik.

    • Insofern Sie die Metainformationen noch nicht bearbeitet haben, so können Sie die drei deaktivierten und leeren Eingabefelder "Titel", "Alternativer Text" und "Beschreibung (Bildunterschrift)" sehen.

    • Aktivieren Sie die Felder mit Klick auf die Checkbox "Elementspezifischen Wert setzen (Kein Standard vorgegeben)".

    • Befüllen Sie die Eingabefelder mit sinnvollen Beschreibungen und speichern Sie danach den Text-Medien-Container.

    • Das Bild lässt sich nun im Frontend vergrößern.

    • Beachten Sie bitte während der Definition des Alternativtextes folgende Hintergrundinformationen der Anleitung WEBRED 20-030.

  6. Speichern

    • Speichern Sie die Änderungen mit einem Klick auf die Schaltfläche [Speichern].

Probleme oder Fragen?

IMZ | IT-Applications

FU C 1.16

Schreiben Sie ein Ticket an "Website" auf servicedesk.hs-furtwangen.de.