Mit multimedialen Inhalten arbeiten

Einer der Vorteile, den das digitale Publizieren auf einer Plattform wie de.hypotheses bietet ist, dass nicht nur Text, sondern auch multimediale Inhalte veröffentlicht werden können. Ein Text kann also um Bilder, Tonaufnahmen, Videos, Links und eine Reihe anderer multimedialer Inhalte ergänzt werden, die den Leserinnen und Lesern zusätzliche Informationen bieten.

Überblick

• Die Mediathek eines Blogs
• Eine Mediendatei in einen Artikel oder eine Seite einfügen
  • Bilder
  • Dateien
  • Videos
  • Audiodateien
• Externe Inhalte als Block einbetten
  • Vereinfachte Integration kommerzieller Dienstleister
  • Externe Inhalte über Code einbetten

Die Mediathek eines Blogs

In der Regel werden Medieninhalte erst hinzugefügt, wenn der Inhalt (ein Beitrag oder eine Seite) erstellt wird. Alle Medieninhalte, die zu einem Beitrag oder einer Seite hinzugefügt werden, werden automatisch in die Mediathek eines Blogs hochgeladen. Diese ist über die linke Seitenliste im Backend zugänglich (Medien > Medienübersicht). Medieninhalte können auch in die Mediathek hochgeladen werden, wenn ein Widget hinzugefügt wird oder das Theme angepasst wird.

Auf de.hypotheses können folgende Dateitypen hochgeladen werden: jpg, jpeg, png, gif, mp3, mp4, mov, avi, wmv, midi, mid, pdf, doc, odt, xls, zip, WEBVTT und SRT. Die maximal zulässige Größe pro Datei beträgt derzeit 10 MB. Es gibt keine Begrenzung für die maximale Gesamtgröße der verschiedenen Dateien, die in das Blog hochgeladen werden.

Es ist an einer ganzen Reihe von Orten möglich, Bilder hinzuzufügen: Bilder können in den Inhalt eines Beitrags eingebunden werden, ein Beitrag kann mit einem Beitragsbild versehen werden, es können in der Seitenleiste des Blogs Bild-Widgets eingefügt werden oder es kann ein Bild in der Kopfzeile des Blogs (header image) hochgeladen werden (abhängig vom Theme, das genutzt wird). Genauso ist es möglich, ein Bild direkt in die Mediathek hochzuladen (Medien > Medienübersicht). Dazu wird auf Medien > Datei hinzufügen geklickt. Alternativ kann auch auf den Knopf „Datei hinzufügen“ oben auf der Website geklickt werden.

Wenn möglich (wenn es sich beispielsweise um ein Bild oder ein PDF handelt) wird dabei ein Vorschaubild angezeigt.

Für Bilder sind hier einige einfache Bearbeitungen wie Drehen, Beschneiden oder Änderungen der Größe möglich. Allerdings empfehlen wir, Bilder bereits in der gewünschten Größe bzw. den gewünschten Dimensionen hochzuladen. Welche das sind, wird davon abhängen, wie das Bild verwendet werden soll – ob es etwa als Bild in der Kopfzeile gedacht ist oder als Beitragsbild. Informationen hierzu sind in den Beiträgen zu den einzelnen Themes im Bloghaus verfügbar sowie im Beitrag Alles rund ums Bild.

Für Bilder können rechts folgende Informationen geändert oder eingepflegt werden:

• Titel: Standardmäßig wird hier der Titel, den die Bilddatei auf dem Computer hatte, angegeben.
• Beschriftung: Dies ist das einzige Feld, das im Frontend sichtbar ist. Die Beschriftung (oder Bildunterschrift) wird unterhalb des Bildes im Beitrag oder auf einer Seite angezeigt. Hier sollte mindestens der oder die Autor/in des Bildes angegeben werden sowie, wenn verfügbar, die Lizenz, unter der es genutzt wird. Wenn das Bild nicht aus ästhetischen Gründen, sondern auch auf Grund seines Informationsgehalts verwendet wird (wenn es sich etwa um eine Grafik handelt), sollte hier auch eine kurze Erklärung eingefügt werden.
• Alternativer Text:  Dieses Feld dient vor allem dazu, die Barrierefreiheit eines Inhalts zu fördern, indem eine Beschreibung für Nutzerinnen und Nutzer eingefügt wird, die das Bild nicht lesen können (entweder, weil sie einen Screenreader verwenden oder weil sie nur über eine begrenzte Bandbreite verfügen). Außerdem wird der alternative Text von Bots gelesen, die Inhalte für Suchmaschinen indizieren. Wer eine verbesserte Auffindbarkeit in Suchmaschinen erreichen will, sollte daher ebenfalls dieses Feld ausfüllen.
• Beschreibung: Die Beschreibung wird nicht im Frontend angezeigt. Sie dient vor allem dazu, eine Datei in der Mediathek besser auffindbar zu machen, indem über hier verwendete Begriffe die Mediathek durchsucht werden kann. Sie kann außerdem dazu dienen, visuell ähnliche Bilder voneinander zu unterscheiden.

Die Oberfläche „Anhang-Details“ gibt auch die Dimensionen eines Bildes an, die Größe der Mediendatei sowie den Beitrag oder die Seite, auf welcher die Datei verwendet wird.

Hier können Dateien übrigens auch dauerhaft gelöscht aus der Mediathek und damit aus dem Blog gelöscht werden. Über die Seite Medien > Medienübersicht ist es möglich, mehrere Dateien auf einmal dauerhaft zu löschen, indem auf „Mehrfachauswahl“ und dann auf „Endgültig löschen“ geklickt wird. Dateien, die aus dem Blog gelöscht werden, werden innerhalb von 24 Stunden von den Servern von Hypothèses gelöscht.

Eine Mediendatei in einen Artikel oder eine Seite einfügen

In der Artikel- oder Seitenansicht des Backends können verschiedene Arten von Blöcken hinzugefügt werden, über welche verschiedene Medieninhalte zu einem Text hinzugefügt werden. Die gängigsten sind folgende:

Bilder

Dieser Block ermöglicht es, ein einzelnes Bild einzufügen, das vom Computer hochgeladen wird (auf „Hochladen“ klicken). Alternativ kann ein Bild, das bereits in die Mediathek geladen wurde, ausgewählt werden (auf „Mediathek“ klicken). Sobald das Bild eingefügt ist, wird es in voller Größe angezeigt. Unterhalb des Bildes kann hier auch direkt die Bildunterschrift eingefügt werden.

In der Bearbeitungsleiste des Blocks “Bild” kann über den Button “Link bearbeiten” (Büroklammer-Symbol) eingestellt werden, welche Aktion bei einem Klick auf das Bild ausgeführt werden soll:

• Standardmäßig passiert nichts, das Bild ist nicht anklickbar.
• Benutzerdefinierte URL: In das Feld “URL einfügen oder zum Suchen tippen” wird die gewünschte URL eingegeben, die sich beim Klick auf das Bild öffnen soll.
• Mediendatei: Öffnet das Bild beim Klick in der Originalgröße in einem Viewer, dabei wird der Untertitel angezeigt (die empfehlenswerteste Option).
• Anhang-Seite: Öffnet eine Umgebung, die nur das Bild mit seiner Beschreibung und seinem Titel enthält, die in den Anhang-Details eingegeben wurden.

Mit der Bearbeitungsleiste kann auch die Ausrichtung des Bildes geändert werden. Ist das Bild nach links oder rechts ausgerichtet, kann die Größe durch die blauen Ziehpunkte verändert werden, wenn der nächste Block Text enthält, wird der Text dann an die Seite des Bildes verschoben.

Im Reiter „Block“ in der rechten Seitenleiste kann ebenfalls der alternative Text eingegeben oder geändert werden. Dort kann auch die Bildgröße bearbeitet werden, entweder über eine Vorauswahl an Bildgrößen oder indem die gewünschte Größe händisch eingetragen wird.

Der Block „Bild“ kann in verschiedene andere Blöcke umgewandelt werden, indem auf den kleinen Pfeil neben dem Bild-Icon geklickt wird. So kann aus einem Bild-Block ein Block „Datei“ werden (der nicht das Bild, sondern nur einen Link zum Bild anzeigt), eine „Galerie“ (hier können mehrere Bilder angezeigt und angeordnet werden), ein „Cover“ (dieser Block bietet eine etwas andere Darstellung und ermöglicht es, Text über das Bild zu legen) oder ein „Medien und Text“-Block (der es ermöglicht, neben dem Bild Text einzufügen).

Dateien

Der Block “Datei” ermöglicht es, ein Dokument – beispielsweise eine PDF-Datei – in Form eines klickbaren Links zu einem Text hinzuzufügen. Die Datei wird dann angezeigt oder heruntergeladen (je nach Einstellungen des Webbrowsers, welcher von dem oder der Leser*in verwendet wird). Die Datei wird hochgeladen, indem entweder eine Datei vom eigenen Computer hochgeladen wird (+ > Allgemeine Blöcke > Datei > „Hochladen“) oder indem eine bereits hochgeladene Datei aus der Mediathek ausgewählt wird.

Der Text des Links kann im Block verändert werden.

Im Reiter „Block“ in der rechten Seitenleiste kann ausgewählt werden, welche Aktion auf einen Klick auf den Link folgen soll:

• Link zu Mediendatei: Öffnet die Datei im Webbrowser (wenn möglich)
• Link zu Anhang-Seite: Öffnet eine neue Umgebung, in der das Dokument angezeigt wird

Es ist ebenfalls möglich, einen Button „Herunterladen“ neben dem Link anzuzeigen.

Um ein Dokument oder ein PDF per Vorschau anzuzeigen, muss die Datei über einen externen Anbieter gehostet werden und dann dieser externe Inhalt in das Blog eingebettet werden (siehe unten: Externe Inhalte als Block einbetten).

Videos

Im Block „Video“ kann in einem Beitrag oder auf einer Seite ein Video angezeigt werden, das zuvor in die Mediathek hochgeladen wurde. Die Datei wird, genau wie beim Bild, über den Button „Hochladen“ direkt vom Computer ausgewählt oder, falls die Datei zuvor in die Mediathek hochgeladen wurde, direkt aus der Mediathek ausgewählt.

Die Videounterschrift kann innerhalb des Blocks bearbeitet werden.

Im Reiter „Block“ in der rechten Seitenleiste kann die automatische Abspielung des Videos bei Öffnung der Seite ausgewählt wird (dies wird nicht empfohlen), eine Abspielung als Schleife eingestellt werden, die Wiedergabesteuerung ausgeblendet werden (mit denen Nutzer*innen innerhalb des Videos navigieren, das Video anhalten oder die Lautstärke anpassen können), und die Standardtonlautstärke festgelegt werden.

Schließlich ist es möglich, ein Bild auszuwählen, das anstelle des Videos angezeigt werden soll, solange dies nicht abgespielt wird.

Der Block „Video“ kann in die Blöcke „Datei“ (zeigt einen Link zum Download des Videos an) oder „Cover“ (das Video wird hier in ein Bild umgewandelt, auf das Text geschrieben werden kann) umgewandelt werden.

Audiodateien

Mit diesem Block kann ein einfacher Audio-Player angezeigt werden, um in einen Beitrag oder eine Seite eine Tondatei einzufügen. Die Datei wird entweder über den „Hochladen“-Button direkt vom Computer ausgewählt oder aus der Mediathek ausgewählt, wenn er zuvor hochgeladen wurde.

Die Unterschrift kann im Block bearbeitet werden. Im Reiter „Block“ in der rechten Seitenleiste kann die automatische Wiedergabe der Tondatei (nicht empfohlen) oder die Wiedergabe als Schleife eingestellt werden.

Der Block „Ton“ kann in den Block „Datei“ umgewandelt werden (der einen Link zum Download der Tondatei anbietet).

Externe Inhalte als Block einbetten

Wenn die Mediendatei zu groß ist, um direkt in die Mediathek hochgeladen zu werden (das gilt für alle Dateien, die größer als 10 MB sind) oder wenn die Datei nicht in gewünschter Form dargestellt werden kann bietet es sich an, die Datei bei einem externen Dienst zu hosten und dann als eingebetteten Inhalt in einen Artikel oder eine Seite einzubinden.

Vereinfachte Integration kommerzieller Dienstleister

WordPress erleichtert die Integration von Muldimedia-Elementen, die auf den großen kommerziellen Plattformen wie Twitter, Spotify, Issuu, YouTube etc. gehostet werden. Für diese Plattformen wird einfach ein neuer Block (egal welcher Art) an der gewünschten Stelle eingefügt, in den die URL der Datei kopiert wird. WordPress erkennt an Hand der URL automatisch, um welche Art von Publikation es sich handelt und stellt das Element entsprechend dar.

Alternativ kann auch ein entsprechender Block über den Reiter + > Einbettungen eingefügt werden, in den die URL kopiert wird.

Tipp: Anhand der Liste der externen Dienste in der Blockkategorie „Einbettungen“ lässt sich auf einen Blick feststellen, welche Hosting-Dienste von Drittanbietern eingebettet werden können.

Externe Inhalte über Code einbetten

Es gibt eine Vielzahl von externen Diensten, die es ermöglichen, Inhalte auf einem Blog oder einer Webseite anzuzeigen, ohne dass diese Inhalte auf den Servern von Hypothèses gehostet werden.

Dies gilt beispielsweise für bestimmte Mapping-Tools (z.B. Google Maps, OpenStreetMap), akademische Videoplattformen sowie für viele frei zugängliche Hosting- und Distributionsdienste für Dokumente (z.B. OpenEdition Books, Internet Archive, HAL, etc.).

Diese Dienste stellen HTML-Code zur Verfügung, mit dem ein Multimedia-Element in ein Blog (in einen Beitrag, eine Seite oder sogar in ein Widget) eingebettet werden kann. Dieser Code ist oft durch einen Klick auf ein Freigabesymbol oder einen Freigabelink in der Nähe des betreffenden Multimedia-Elements erhältlich. Der gesuchte HTML-Code wird oft mit dem Begriff “Einbetten” oder “Integrieren” bezeichnet und hat meist die Form: <iframe src=”…”><</iframe>

Der abgerufene Code wird dann in einen “Custom HTML”-Block eingefügt (+ > Formatierung > HTML). Hier kann durch einen Klick auf Vorschau angezeigt werden, wie das Multimediaelement im Frontend dargestellt wird.

Beitragsbild: Soragrit Wongsa, Unsplash-Lizenz

Dieser Artikel ist eine übersetzte und leicht modifizierte Version des Artikels “Ajouter du multimédia” von Marion Wesely in der französischen Maison des carnets: https://maisondescarnets.hypotheses.org/179.

---

---