Galerien, Video und Karten einbinden

Bilder, Videos und Karten vermitteln unterschiedliche Informationen. Wählen Sie den Core-Block, der zum Inhalt passt, und ergänzen Sie verständliche Beschriftungen oder Textalternativen. Prüfen Sie externe Verbindungen und die Bedienbarkeit als Gast.

Medienblock auswählen

Klären Sie zuerst, welche Information das Medium vermittelt und welche Textalternative dafür benötigt wird. Ein Bild mit wichtigem Text muss auch lesbar beschrieben sein. Bei Video gehören verständlicher Ton, überprüfte Untertitel und gegebenenfalls zusätzliche Erklärungen zum Inhalt. Eine Karte ersetzt keine ausgeschriebene Adresse und keine Hinweise auf den tatsächlich zugänglichen Eingang.

Bereiten Sie passende Dateigrößen und Bildausschnitte vor. Vermeiden Sie es, mehrere riesige Originalfotos allein durch eine kleine Anzeige optisch zu verkleinern. Vorhandene Bilder wählen Sie aus der Dateiverwaltung, statt sie für jede Seite erneut hochzuladen. Prüfen Sie außerdem die erforderlichen Nutzungsrechte und die zur Veröffentlichung vorgesehenen Angaben in der Datei.

Galerie zeigt mehrere auswählbare Bilder; Slideshow wechselt zwischen einzelnen Slides. Videoplayer verwendet Dateien aus der eigenen Dateiverwaltung. YouTube Video bindet einen externen Player ein. Google Map benötigt die technische Anbindung an Google. Alle fünf Blöcke finden Sie in der Blockauswahl unter Medien. Welche Gestaltung und Interaktion Sie tatsächlich erhalten, hängt zusätzlich vom Theme und dem gewählten Blocktemplate ab.

Galerie anlegen

Öffnen Sie im vorgesehenen Bereich Inhalte hinzufügen → Medien → Galerie. Im Reiter Bilder klicken Sie auf Bilder hinzufügen. Markieren Sie die gewünschten Dateien im nativen Dateidialog und bestätigen Sie mit Auswählen. Die Bilder werden zunächst in den geöffneten Blockdialog übernommen; die Galerie ist damit noch nicht auf der Seite veröffentlicht.

Wählen Sie ein Bild in der Galerie aus, um seine Anzeigeeinstellungen zu bearbeiten. Dort stehen Beschriftung, Hover-Beschriftung und die Größenwahl Standard oder Breit bereit. In der Core-Standardansicht beansprucht ein breites Bild die volle Rasterzeile; Standardbilder können nebeneinander stehen. Auf schmalen Bildschirmen muss die Reihenfolge weiterhin verständlich bleiben.

Ein ausgewähltes Projektbild im Galerie-Dialog zeigt die Bildvorschau, benutzerdefinierte Attribute und zwei getrennte Beschriftungsfelder.

Abbildung 1: Ausschnitt aus dem Galerie-Dialog mit einem vorhandenen Projektbild. Die Beschriftungen gehören zur Verwendung im Galerie-Block.

Schreiben Sie eine hilfreiche Bildunterschrift, etwa was zu sehen ist oder welche Ansicht die Aufnahme zeigt. Die Hover-Beschriftung ist eine zusätzliche Anzeige beim Überfahren mit der Maus. Wichtige Informationen dürfen nicht ausschließlich dort stehen: Auf einem Touchscreen gibt es diesen Zustand nicht in derselben Form. Prüfen Sie auch den tatsächlich erzeugten Alternativtext; Bildunterschrift, Dateititel und Alternativtext sind unterschiedliche Angaben.

Über die Bildübersicht ändern Sie die Reihenfolge. Aus der Galerie entfernen entfernt die Verwendung aus dieser Galerie, nicht automatisch die Datei aus der Dateiverwaltung. Attribute bearbeiten gehört dagegen zur ausgewählten Datei; solche Angaben können weitere Verwendungen derselben Datei betreffen. Ändern Sie gemeinsame Dateiangaben deshalb bewusst.

Im Reiter Einstellungen steht Link zum Herunterladen des Originals einfügen. Aktivieren Sie die Option nur, wenn die Originaldatei tatsächlich angeboten werden soll. Prüfen Sie Auflösung, Dateigröße und enthaltene Angaben. Eine kleine Vorschau bedeutet nicht, dass ein freigegebenes Original ebenfalls klein oder von zusätzlichen Metadaten bereinigt ist.

Der Reiter Einstellungen im Galerie-Dialog zeigt die Option Link zum Herunterladen des Originals einfügen.

Abbildung 2: Die Option „Originaldatei zum Download anbieten“ stellt die Quelldatei bereit.

Prüfen Sie nach der Veröffentlichung das Öffnen und Schließen der vergrößerten Ansicht, die Reihenfolge und die Beschriftungen. Der Fokus muss nach dem Schließen sinnvoll zur Galerie zurückkehren. Testen Sie einen angebotenen Originaldownload gesondert als Gast. Wenn die Vergrößerung nicht funktioniert, gehört neben den Blockdaten auch die Unterstützung durch das Theme in die Prüfung.

Slideshow einfügen

Wählen Sie Medien → Slideshow. Im Reiter Slides legen Sie mit Slide hinzufügen die einzelnen Motive an und pflegen Bild, Titel, Beschreibung und gegebenenfalls Link. Sortieren Sie die Slides nach ihrer inhaltlichen Reihenfolge. Ein kurzer Titel hilft auch bei der Beschriftung des Motivs; er ist nicht nur Dekoration über einem austauschbaren Bild.

Im Reiter Optionen legen Sie die Navigation mit Pfeile, Punkte, Pfeile & Punkte oder Keine fest. Ohne Navigation können Besucher weitere Slides unter Umständen nicht selbst auswählen. Anzeigedauer Slides und Übergangsgeschwindigkeit Slides werden in Millisekunden angegeben: 4000 ms sind vier Sekunden. Der Wert sagt nichts darüber aus, ob längerer Text in dieser Zeit gut lesbar ist.

Die Slideshow-Optionen zeigen Anzeigedauer, Übergangsgeschwindigkeit und die aktivierte Auswahl Autostart deaktivieren.

Abbildung 3: Die Slideshow-Einstellungen zeigen Navigation und automatischen Start getrennt.

Für eine ruhig lesbare Darstellung ist Autostart deaktivieren oft die bessere Ausgangswahl. Slideshow beim Herüberfahren pausieren ist keine vollständige Alternative zur Bedienbarkeit mit Tastatur und Touch. Wenn Bewegung wirklich gebraucht wird, muss die konkrete Ausgabe eine geeignete Kontrolle ermöglichen. Eine zusätzliche statische Galerie oder ein einzelnes Bild kann die Aufgabe einfacher erfüllen.

Maximale Breite des Slides (0 für unlimitiert) begrenzt die Ausgabe, ersetzt aber keine passend vorbereitete Bilddatei. Im Bearbeitungsmodus wird die Slideshow im Core durch einen Hinweis ersetzt. Das ist kein Beleg für einen Defekt; testen Sie die eigentliche Wiedergabe in der Besucherausgabe. Kontrollieren Sie besonders verlinkte Slides und ihre erreichbaren Linknamen.

Eigene Videodateien im Videoplayer verwenden

Öffnen Sie Medien → Videoplayer. Unter Videodateien wählen Sie die vorhandenen WebM-, Ogg- oder MP4-Dateien aus. Sie müssen nicht für jedes Format irgendeine andere Aufnahme bereitstellen: Mehrere Quellen sollen dieselbe Fassung desselben Videos anbieten. Welches Format im jeweiligen Browser abgespielt werden kann, hängt auch vom tatsächlichen Codec der Datei ab.

Der Videoplayer-Dialog zeigt die Auswahl für ein optionales Platzhalterbild und Videodateien in WebM, Ogg und MP4.

Abbildung 4: Die Dateiauswahl des Videoplayers wählt eine bereits hochgeladene Videodatei.

Ein Platzhalterbild für Video (optional) zeigt vor der Wiedergabe ein geeignetes Standbild. Wählen Sie unter Video Größe zwischen Standard Videogröße, Ganze Breite und Maximale Breite festlegen. Ergänzen Sie einen verständlichen Titel. Ein Video kann optisch in den Bereich passen und trotzdem eine unnötig große Datenmenge übertragen; prüfen Sie die Datei zusätzlich.

Die native Standardansicht stellt die Browser-Bedienelemente bereit. Der geprüfte Dialog bietet jedoch kein eigenes Feld zur Auswahl einer Untertiteldatei. Der bloße Einsatz dieses Core-Blocks garantiert deshalb keine zugänglichen Untertitel. Klären Sie bei Videos mit Sprache, wie überprüfte Untertitel und benötigte Audiobeschreibungen im tatsächlichen Player bereitgestellt werden. Ein begleitendes Transkript hilft beim Nachlesen, ersetzt aber nicht automatisch jede benötigte zeitbezogene Alternative.

Testen Sie Play/Pause, Lautstärke, Tastaturbedienung und die Ausgabe auf dem Handy. Im Bearbeitungsmodus ist die Wiedergabe deaktiviert; kontrollieren Sie nach dem Übernehmen die veröffentlichte Ansicht. Bei einem Fehler prüfen Sie zunächst Dateiauswahl, Format, Codec und Erreichbarkeit, bevor Sie den Block mehrfach neu anlegen.

YouTube-Video einbinden

Wählen Sie Medien → YouTube Video. Im Reiter Video tragen Sie die passende YouTube URL ein. Prüfen Sie, ob das Video öffentlich beziehungsweise für die vorgesehene Einbettung verfügbar ist. Als Größe stehen 16:9 (Breitbild), 4:3 und Fixe Größe (nicht responsive) bereit. Für eine responsive Seite wählen Sie gewöhnlich ein passendes Verhältnis und kontrollieren den konkreten Player auf dem Handy.

Der YouTube-Dialog zeigt YouTube URL, die Größenwahl 16:9 und einen beschreibenden Titel.

Abbildung 5: Der Videotitel benennt die YouTube-Einbettung für Besucher.

Geben Sie unter Titel einen verständlichen Namen ein. Im Reiter Einstellungen kontrollieren Sie Bedienelemente anzeigen, Automatisch abspielen, Video in Endlosschleife abspielen und Untertitel anzeigen. Lassen Sie einen Film nicht überraschend automatisch starten. Die Untertiteloption fordert die Anzeige vorhandener Untertitel an; sie schreibt oder korrigiert keine Untertitel für das Video.

Die YouTube-Einstellungen zeigen Wiedergabeoptionen, Untertitel anzeigen, Kein Cookie und Lazy Loading aktivieren.

Abbildung 6: Ausschnitt aus den Einstellungen. Wiedergabe, externe Einbettung und Ladeverhalten erfüllen unterschiedliche Aufgaben.

Unter Datenschutz steht Kein Cookie. Die Option wechselt diese Auswahl die verwendete Einbettungsdomain zu youtube-nocookie.com. Sie ist kein allgemeiner Einwilligungsmechanismus und verhindert nicht automatisch jede Verbindung zu einem externen Dienst. Lazy Loading aktivieren verzögert das Laden nach Browserverhalten, ist aber ebenfalls keine inhaltliche Freigabe durch den Besucher.

Stimmen Sie externe Einbettungen mit der zuständigen Website-Betreuung ab. Wenn ein Consent-Package vorgeschaltet ist, prüfen Sie den tatsächlichen Ablauf vor und nach der Auswahl des Besuchers. Die Existenz eines Cookie-Banners allein belegt keine Blockierung des Players. Ein normaler, verständlich beschrifteter Link zum externen Video kann eine einfachere Alternative sein. Einzelne Anbieteroptionen können sich zudem ändern; testen Sie die benötigte Wirkung am realen Video.

Eine Karte und eine textliche Anreisehilfe anbieten

Der Block Medien → Google Map enthält API-Schlüssel, einen optionalen Kartentitel, Ort, Zoom sowie Breiten- und Höhenangaben. Die Google-Anbindung muss dafür eingerichtet sein. Eine leere Schlüsselzeile wird nicht dadurch nutzbar, dass Sie mehrfach den Block speichern. Einrichtung und gegebenenfalls abrechnungsbezogene Voraussetzungen gehören zur technischen Betreuung des verwendeten Google-Projekts.

Wenn die Anbindung vorbereitet ist, wählen Sie den konkreten Vorschlag zur eingegebenen Adresse und prüfen die Markierung. Achten Sie besonders bei großen Gebäuden auf Eingang, Anlieferung und barrierefreien Zugang. Die Einstellung Mausrad-Zoom aktivieren beeinflusst die Interaktion mit der Karte; sie sollte das normale Seitenscrolling nicht unerwartet stören.

Stellen Sie die vollständige Adresse, Anreisehinweise und bei Bedarf einen normalen Routenlink zusätzlich als Text bereit. Prüfen Sie die externe Einbettung wie beim Video zusammen mit der vorgesehenen Consent-Lösung. Wird die Karte nicht geladen oder abgelehnt, muss die wesentliche Anreiseinformation trotzdem erreichbar bleiben. Kopieren Sie keine ungeprüften fremden Einbettungsskripte in einen Content-Block.

Medien als Besucher prüfen

Prüfen Sie die Seite als Gast und auf einem schmalen Bildschirm. Öffnen Sie Galerie, Originaldownload und Linkziele einzeln. Kontrollieren Sie Videos mit und ohne Ton, vorhandene Untertitel und die Bedienung mit der Tastatur. Wichtige Bildunterschriften müssen auch ohne Maus-Hover erreichbar sein. Die redaktionellen Grundlagen erklärt Barrierefreiheit im Redaktionsalltag.

Beurteilen Sie die Ladezeit und die externen Verbindungen vor und nach einer vorgesehenen Freigabe. Die Darstellung im Bearbeitungsmodus ist für mehrere Medienblöcke bewusst vereinfacht; sie ersetzt diesen Besuchertest nicht. Bei einer größeren Überarbeitung bewahren Sie einen nachvollziehbaren Versionsstand. Allgemeine Dateiverarbeitung und Vorschautypen erklärt Dateieinstellungen konfigurieren.

Weiterlesen

Quelle: Concrete CMS Dokumentation (EN) · Stand: ConcreteCMS 9.5.7