Medien präsentieren (Grid- & Media-Library-Funktionen)

Wann und wie kannst Du die neuen und vorhandenen Funktionen nutzen, um Medien zu präsentieren?

Neon sign: Media

Ergänzend zu den Medienfunktionen, die es schon in Drupal 7 gab (z. B. Hochladen von Bildern und Pdfs, Anzeigen von Audio & Video von externen Plattformen) gibt es neue Medienfunktionen in Drupal 8, besonders solche, die genutzt werden können, um eine Mediathek zu erstellen. Mit diesen letztgenannten haben wir unsere "Gender Mediathek" gebaut.

Was ist wofür? Wähle Deinen use-case aus:

Website-Funktionen

Ich möchte hochladen:

Ich möchte eine  Landingpage dadurch verbessern, dass ich Multimedia anbiete, insbesondere:

Mediatheksfunktionen

Ich möchte eine ganze Mediathek bauen oder eine Landingpage, die nur Multimedia anzeigt. Ich möchte anzeigen:

Wenn Du die genauen Informationen nicht benötigst, kannst Du Dir hier eine Übersicht herunterladen, die beschreibt, wie Medien für eine Mediathek erstellt werden.


Datei (z. B. PDF, auf das aus einem Text verlinkt wird)

Beispiel-Anwendungen

  • Link auf ein PDF-Bewerbungsformular in einem Artikel, indem eine frei Stelle angeboten wird
  • Direkter Download eines Zip-Archives mit allen Bildern eines Dossiers

Ablauf

(1) INHALT - INHALT HINZUFÜGEN - DATEI oder direkt hochlden mit +ADD MEDIA-button im Advanced Media Admin

Erlaubte Dateitypen: doc docx epub fodg fodp fods fodt key mobi numbers odf odg odp ods odt pages pdf ppt pptx rtf txt xls xlsx zip.

(2) Benenne und fülle die Lizenzinformatioen aus. Wenn Du willst, trage bibliographische Informationen ein (Teaser, Body etc.)) Für die o. g. Anwendungen ist das nicht nötig. Lade die Datei hoch.

(3) Link auf die Datei aus dem Text, z. B. im Formular ARTIKEL BEARBEITEN.

Bemerkungen:

Wenn die Datei hochgeladen wurde, kann sie jetzt als Link-URL benutzt werden.


Bild

Beispiel-Anwendungen

  • Hauptbild eines Artikels/einer Publikation oder zusätzliche Bilder für die Verwendungim Artikel-Body
  • Bild, das in der Gridbox auf einer Landingpage eingesetzt werden soll, z. B. in einer Bildbox, Thematic-Focus-Box, Click-to-action-Box

Ablauf

(1) INHALT - INHALT HINZUFÜGEN - BILD ODER direkter Upload im Advanced Media Admin mit dem +ADD MEDIA-Buttpn button OR (if it is for an article or product) upload it from the article-/product-form

Erlaubte Dateitypen: png jpg jpeg; gif kann für Animationen verwendet werden.

(2) Benenne das Bild und mach alle erforderlichen Eingaben, besonders auch den Alternativen Text für verbesserte Barrierefreiheit und wähle die richtige Lizenz aus. Du kannst - musst aber normalerweise nicht - einen Teaser & Body hinzufügen.

(3) Füge es über das BEARBEITEN-Formular in den Artikel/die Publikation ein. Wenn Du eine Gridbox verwenden willst, schau nach der Medien-ID im Advanced Media Admin und trage sie in das entsprechende Feld in der Bildbox ein oder benutze den Upload aus der Gridbox.

Bemerkungen

Wenn ein Bild einmal hochgeladen ist, kann es wiederverwendet und überall auf der Website eingefügt werden. Bitte überprüfe immer zuerst, ob das Bild schon in den Advanced Media Admin hochgeladen wurde, um das doppelte Hochladen zu vermeiden.


Video-Datei

Beispiel-Anwendung

  • als Hintergrund-Video in der Thematic-Focus-Box

Erlaubte Dateitypen: mp4.

Ablauf

(1) Als Hintergrund in der Thematic-Focus-Box: Benutze den UPLOAD-Button in der Box
ODER INHALT - MEDIEN HINZUFÜGEN - VIDEO ODER lade direkt im Advanced Media Admin hoch mit dem +ADD MEDIA-Button.

(2) Benenne das Video und trage alle notwendigen Informationen ein, insbesondere die Lizenzinformationen. Wenn Du willst, füge einen Teaser & Body hinzu sowie die Dauer. Für den o.g. Anwendungsfall ist das jedoch nicht notwendig.

(3) Wenn der Advanced Media Admin für den Upload genutzt wurde, kopiere die Medien-ID in das entsprechende Feld der Thematic-Focus-Box.

Bemerkungen:

Die max. Dateigröße ist 100 MB, aber da das Video stumm und als Schleife abgespielt wird, kann es kürzer und viel kleiner sein.
Das Video kann nicht direkt auf der Website abgespielt werden (es gibt dafür keinen Player).


Audio-Datei

Anwendungsfall

Diese Option solltest Du wählen, wenn die Datei nicht auf eine Social Media Plattform wie Soundcloud oder Mixcloud hochgeladen werden kann (weil z. B. kein Account vorhanden ist). Das sollte jedoch die Ausnahme sein.

Erlaubte Dateitypen: mp3 wav aac.

Ablauf

INHALT - MEDIEN HINZUFÜGEN - AUDIO ODER direkt im Advanced Media Admin mit dem +ADD MEDIA-Button hochladen.

(2) Benenne die Datei und trage alle notwendigen Informationen ein, insbesondere die Lizenzinformationen. Wenn Du willst, füge einen Teaser & Body hinzu sowie die Dauer. Für den o.g. Anwendungsfall ist das jedoch nicht notwendig.

Bemerkungen

Die max. Dateigröße ist 100 MB.

Die einzige Möglichkeit, so eine Audiodatei für den User zugänglich zu machen ist, darauf zu verlinken. Allerdings gibt es keinen Player bzw. es wird der Standardplayer, der auf dem jeweiligen Rechner installiert ist, verwendet.


Soundcloud oder Mixcloud Gridbox (ein oder wenige Audios auf einer Landingpage)

Anwendungsbeispiel

Diese D7-Gridbox bettet Audio aus Soundcloud bzw. Mixcloud ein. Benutze diese Box, wenn Du ein oder wenige, nicht eigene Audios auf einer Landingpage einbetten willst, z. B. in einem Dossier.

Soundcloud and mixcloud player

Wenn Du viele Audios auf einer Landingpage zeigen willst, ist eine Häufung dieser Boxen keine gute Wahl, weil mehrere dieser Boxen die Ladegeschwindigkeit herabsetzen und außerdem zu viele Player nicht gut aussehen:

striked through grid-boxes
 

Ablauf

(1) Raster - Statische Boxen - Soundcloud (bzw. Mixcloud) - Box in einem Containerslot platzieren

(2) URL der Original-Quelle aus Soundcloud/Mixcloud einfügen

Bemerkungen

Wenn Du mehrere Audios zeigen willst, benutze lieber die Mediatheksfunktionen.


Video (ein oder wenige Videos auf einer Landingpage)

Anwendungsbeispiel

Ein oder wenige Videos in Gridboxen können die Landingpage anreichern, vor allem in einem Dossier. Mit dieser Gridbox kannst Du auch nicht-eigene Videos aus YouTube und Vimeo einbetten.

Video embed from YouTube
 

 

Ablauf

(1) Raster - Statische Boxen - Video - Box in einem Containerslot platzieren

(2) URL des Originals auf Vimeo/YouTube einfügen.

Bemerkungen

Wenn Du mehrere Videos einbetten willst, verwende lieber die Mediathek-Funktionen.


 

Playlist eines Soundcloud-Podcasts

Anwendungsbeispiel

Auf einer Landingpage möchtest Du die Episoden einer Soundcloud-Serie in einer Übersicht anzeigen, wie z. B. hier:

Soundcloud Playlist

Ablauf

(1) Raster - Statische Boxen - Soundcloud - platziere Box in einem Containerslot.

(2) Benenne die Box und gibt die Soundcloud-URL der Playlist (Serie) im URL-Feld ein.

(3) Du kannst, musst aber nicht, die Höhe der Box definieren.

Bemerkungen

Hier handelt es sich um ein einfaches Embed aus Soundcloud im Soundcloud-Design.


Eine Podcast-Seite wie die auf boell.de

Anwendungsbeispiel

Wenn Du eine gut-aussehende Landingpage mit Deinen Soundcloud-Podcasts und der Abonnieren-Funktion haben willst.

Page with images and text from Podcasts

Ablauf

Wie in diesem Hilfeartikel beschrieben, baucht es dafür sorgfältige Vorbereitung und die Hilfe des Supports und von Palasthotel.

Voraussetzungen (was Du tun kannst):

  • Episoden sind hochgeladen und korrekt beschrieben in Soundcloud (mit Teaser-Bild, Teaser, Lizenz, Erstellungsdatum etc.)
  • Episoden sind Playlists (Serien) in Soundcloud zugewiesen.

(1) Erstelle eine Landingpage und benenne sie.

(2) Erstelle das Raster, benutze jeweils einen einspaltigen Container für den Namen der Playlist in einer Titel-Gridbox.

(3) Benutze den 3-spaltigen Container: 1. Spalte - Podcast-Box für die Playlist und den Abonnieren-Button. Zweite und dritte Spale: Podcast-by-selection-Boxen, um die jeweils neueste Episode anzuzeigen:

Different grid boxes

(4) Wähle Deine Podcast-Playlist in der Podcast-Gridbox.

(5) Nimm alle Einstellungen vor: Zahl der anzuzeigenden Episoden, Viewmode=main teaser) in der Podcast-by-selection-Box, wähle die Podcast-Playlist.

Bemerkungen

Sage dem Support mind. einen Monat vorher Bescheid, wenn Du eine solche Seite bauen willst. Er/sie erstellt dann die Playlist in der Site-Struktur. Palasthotel baut dann den RSS-feed, um Deine Podcasts aus Soundcloud zu importieren.

Wenn Du Podcasts auch auf anderen Plattformen haben willst, wie z. B. auf iTunes oder/und Spotify, brauchst Du Accounts auf diesen Plattformen. Palasthotel kann dann die Soundcloud-Podcasts auf diese Plattformen exportieren.


Mediatheksfunktionen

External Media: Video

Anwendungsbeispiel

Wenn Du ein Video anzeigen lassen willst, das auf einer entfernten Plattform gehostet ist, die keinen Embed-Code bereitstellt (wie z. B. ARD-Mediathek und andere Mediatheken von TV-Sendern).

Ablauf

(1) INHALT- MEDIEN HINZUFÜGEN - EXTERNAL MEDIA

(2) Trage alle notwendigen Daten ein:

  • Benutze nicht das Original-Teaserbild, weil Du vermutlich dafür nicht die Rechte hast. Stattdessen wird ein Standard-Teaserbild angezeigt.
  • Schreibe einen Teaser, aber kopiere nicht Wort für Wort den bestehenden.
  • Copy & Paste die URL des Originals in das External Media-Feld.
  • Content Genre ist das gleiche Feature wie in Artikeln.
    Unter META
  • (Media) Genre könnte z. B. "Dokumentarfilm" or "Spielfilm" oder "Videoclip" sein.
  • Media type ist "Video".
  • Format Brauchst Du normalerweise nicht.
  • Category Gleiches Feature wie üblich: Wenn Du willst, dass das Medium auf einer Kategorie-Termseite oder in einer Media-by-selection- Box nach Kategorien gefiltert werden soll.
  • Tags Wie üblich: Tags helfen User*innen, besser navigieren zu können.
  • Availability könnte z. B. "online" oder "DVD" sein.
  • Audio languages kann z. B. "English" oder "deutsch" oder "Gebärdensprache" sein.
  • Subtitle Languages können sich von den Audio languages unterscheiden.
  • Typed People - type: Bitte den Support, Dir hier Rollen anzulegen, z. B. für Regisseur*in, Kamerafrau/-mann, Schauspieler*in ...
  • Typed People - Value: Schreibe den Namen der Person, für die Du oben die Rolle ausgewählt hast, in dieses Feld, z. B. den Namen der/des Regisseur*in, wenn Du oben Regisseur*in gewählt hast.
  • Anmerkungen und Empfehlungen werden in der Detail-Medien-Ansicht angezeigt und enthalten zusätzliche Informationen zum Medium, wie z. B. "Enthält Gewaltdarstellungen".
  • Provider/Channel Trage den Namen des Providers/Kanals ein.
  • Speichere.

(3) Um das Video auf einer Landingpage anzuzeigen:

  • Entweder Du benutzt die Media-by-selectionBox (und wählst ggf. den Filter für Kategorie, media genre oder Tags), wähle "Teaser Media" als viewmode.
    oder
  • Platziere das Medium manuell mit der "Media-Box", suche nach Titel des Videos, wähle"Teaser Media" als viewmode

Beispiel

columns in different colours and a video camera on top


External Media: Audio

Anwendungsbeispiel

Wenn Du ein Audiofile anzeigen/abspielen lassen willst, das auf einer entfernten Plattform gehostet ist, die keinen Embed-Code bereitstellt (wie z. B. ARD-Audiothek und andere Audiotheken von Sendern).

Ablauf

(1) INHALT- MEDIEN HINZUFÜGEN - EXTERNAL MEDIA

(2) Trage alle notwendigen Daten ein:

  • Benutze nicht das Original-Teaserbild, weil Du vermutlich dafür nicht die Rechte hast. Stattdessen wird ein Standard-Teaserbild angezeigt.
  • Schreibe einen Teaser, aber kopiere nicht Wort für Wort den bestehenden.
  • Copy & Paste die URL des Originals in das External Media-Feld.
  • Content Genre ist das gleiche Feature wie in Artikeln.
  • Dauer & Lizenz & Creator trage die Informationen ein
    Unter META
  • (Media) Genre könnte z. B. "Reportage" or "Feature" oder "Popmusik" sein.
  • Media type ist "Audio".
  • Format Brauchst Du normalerweise nicht.
  • Category Gleiches Feature wie üblich: Wenn Du willst, dass das Medium auf einer Kategorie-Termseite oder in einer Media-by-selection- Box nach Kategorien gefiltert werden soll.
  • Tags Wie üblich: Tags helfen User*innen, besser navigieren zu können.
  • Availability könnte z. B. "online" oder "Tonband" sein.
  • Audio languages kann z. B. "English" oder "deutsch" sein.
  • Typed People - type: Bitte den Support, Dir hier Rollen anzulegen, z. B. für Regisseur*in, Sprecher*in, Dramaturg*in ...
  • Typed People - Value: Schreibe den Namen der Person, für die Du oben die Rolle ausgewählt hast, in dieses Feld, z. B. den Namen der/des Sprecher*in, wenn Du oben Sprecher*in gewählt hast.
  • Anmerkungen und Empfehlungen werden in der Detail-Medien-Ansicht angezeigt und enthalten zusätzliche Informationen zum Medium, wie z. B. "Enthält Gewaltdarstellungen".
  • Provider/Channel Trage den Namen des Providers/Kanals ein.
  • Speichere.

(3) Um das Audio auf einer Landingpage anzuzeigen:

  • Entweder Du benutzt die Media-by-selection-Box (und wählst ggf. den Filter für Kategorie, media genre oder Tags), wähle "Teaser Media" als viewmode.
    oder
  • Platziere das Medium manuell mit der "Media-Box", suche nach Titel des Audios, wähle"Teaser Media" als viewmode

Beispiel

columns in different colours and a headset on top

 

Die Detailansicht des Audios wird einen Ausschnitt aus der Orgiginal-Plattform (aber ohne Player) anzeigen. Wenn der/die User*in das Audio abspielen will, muss er/sie auf die Original-Plattform gehen:

Veggiewordl Podcast

Remote video

Anwendungsbeispiel

Im Unterschied zur Video-Gridbox, wählst Du diese Option, wenn

  • Du Medieninformationen (Erläuterungen, Beschreibungen, einen Teaser, Dauer, Datum der Publikation etc. anzeigen lassen willst
    und
  • das Original auf einer Plattform ist, die einen Embed-Code anbietet, wie z. B. YouTube oder Vimeo

Ablauf

(1) INHALT - MEDIEN HINZUFÜGEN - REMOTE VIDEO

(2) Trage alle notwendigen Daten ein:

  • Lade kein Teaserbild hoch, da die Originalplattform einen Embed mit Teaserbild liefert.
  • Schreibe einen Teaser, aber kopiere nicht Wort für Wort den bestehenden.
  • Copy & Paste die URL des Originals in das External Media-Feld.
  • Under MEDIA
  • Video-URL: Copy & paste die URL des Originals
  • Dateigröße, Dauer gib die Informationen ein
  • Playlist Wenn Du eine Playlist hast, zu der das Video gehört, gib hier deren Titel ein
  • Lizenz Gib die information ein
  • Creator Gib die information ein
  • URL gib noch einmal die Original-URL ein (sie wird in der Detailansicht angezeigt)
    Under META
  • Veröffentlichungsdatum Trage die Information ein
  • Content genre ist die gleiche Funktion wie in Artikeln
  • (Media) Genre könnte z. B. "Dokumentarfilm" or "Spielfilm" oder "Videoclip" sein.
  • Media type is "Video".
  • Format Brauchst Du normalerweise nicht.
  • Category Gleiches Feature wie üblich: Wenn Du willst, dass das Medium auf einer Kategorie-Termseite oder in einer Media-by-selection- Box nach Kategorien gefiltert werden soll.
  • Tags Wie üblich: Tags helfen User*innen, besser navigieren zu können.
  • Availability könnte z. B. "online" oder "DVD" sein.
  • Audio languages kann z. B. "English" oder "deutsch" oder "Gebärdensprache" sein.
  • Subtitle Languages können sich von den Audio languages unterscheiden.
  • Typed People - type: Bitte den Support, Dir hier Rollen anzulegen, z. B. für Regisseur*in, Kamerafrau/-mann, Schauspieler*in ...
  • Typed People - Value: Schreibe den Namen der Person, für die Du oben die Rolle ausgewählt hast, in dieses Feld, z. B. den Namen der/des Regisseur*in, wenn Du oben Regisseur*in gewählt hast.
  • Anmerkungen und Empfehlungen werden in der Detail-Medien-Ansicht angezeigt und enthalten zusätzliche Informationen zum Medium, wie z. B. "Enthält Gewaltdarstellungen".
  • Provider/Channel Trage den Namen des Providers/Kanals ein.
  • Speichere.

(3) Um das Video auf einer Landingpage anzuzeigen:

  • Entweder Du benutzt die Media-by-selectionBox (und wählst ggf. den Filter für Kategorie, media genre oder Tags), wähle "Teaser Media" als viewmode.
    oder
  • Platziere das Medium manuell mit der "Media-Box", suche nach Titel des Videos, wähle"Teaser Media" als viewmode

Beispiel

Three videos with player


Remote audio

Anwendungsbeispiel

Wenn Du einen Audio-File anzeigen & abspielen lassen willst, der entfernt auf einer Plattform (nicht Soundcloud) gehostet ist, die einen Embed-code anbietet (z. B. Spreaker).

Ablauf

(1) INHALT- MEDIEN HINZUFÜGEN - EXTERNAL MEDIA

(2) Trage alle notwendigen Daten ein:

  • Benutze nicht das Original-Teaserbild, weil Du vermutlich dafür nicht die Rechte hast. Stattdessen wird ein Standard-Teaserbild angezeigt.
  • Schreibe einen Teaser, aber kopiere nicht Wort für Wort den bestehenden.
  • Unter Media
  • External Media Copy & Paste die Original-URL.
  • Embed Code Copy & Paste den embed-Code von der Originalplattform.
  • Duration & License & Creator Fülle die Felder aus.
  • URL: Trage die URL des Originals ein.
  • Under META
  • Date of Publication: Trage das Veröffentlichungsdatum ein.
  • Content Genre is the same feature as in articles.
  • (Media) Genre könnte z. B. "Bericht" or "Feature" or "Popmusik"
  • Media type ist "Audio".
  • Format Brauchst Du normalerweise nicht.
  • Category Gleiches Feature wie üblich: Wenn Du willst, dass das Medium auf einer Kategorie-Termseite oder in einer Media-by-selection- Box nach Kategorien gefiltert werden soll.
  • Tags Wie üblich: Tags helfen User*innen, besser navigieren zu können.
  • Availability könnte z. B. "online" oder "Tonband" sein.
  • Audio languages kann z. B. "English" oder "deutsch" oder "Gebärdensprache" sein.
  • Typed People - type: Bitte den Support, Dir hier Rollen anzulegen, z. B. für Regisseur*in, Sprecher*in, Dramaturg*in ...
  • Typed People - Value: Schreibe den Namen der Person, für die Du oben die Rolle ausgewählt hast, in dieses Feld, z. B. den Namen der/des Sprecher*in, wenn Du oben Sprecher*in gewählt hast.
  • Anmerkungen und Empfehlungen werden in der Detail-Medien-Ansicht angezeigt und enthalten zusätzliche Informationen zum Medium, wie z. B. "Enthält Gewaltdarstellungen".
  • Provider/Channel Trage den Namen des Providers/Kanals ein.
  • Speichere.

(3) Um das Audio auf einer Landingpage anzuzeigen:

  • Entweder Du benutzt die Media-by-selection-Box (und wählst ggf. den Filter für Kategorie, media genre oder Tags), wähle "Teaser Media" als viewmode.
    Anmerkung, Stand 9.4.2020:
    Es besteht noch nicht die Möglichkeit, alle Audios (also externe, entfernte und Podcast) gemeinsam auf einer Termpage auszugeben.)
    oder
  • Platziere das Medium manuell mit der "Media-Box", suche nach Titel des Audios, wähle"Teaser Media" als viewmode

Beispiel

In der Gridbox auf der Landingpage sieht das Audio genauso aus, wie ein Audio ohne embed-Code:

columns in different colours and a headset on top

Die Detailansicht zeigt dann aber den eingebetteten Player der Originalplattform:

Woman and text: With Hannah Witton

 


Soundcloud-Audio

Anwendungsbeispiel

Du möchtest Dein Soundcloud-Audio anzeigen und abspielbar machen.

Ablauf

(1) INHALT - MEDIEN HINZUFÜGEN - SOUNDCLOUD

(2) Gib die notwendigen Informationen ein:

  • Benutze nicht das Original-Teaserbild, weil Du vermutlich dafür nicht die Rechte hast. Stattdessen wird das eingebettete Teaserbild aus Soundcloud automatisch angezeigt.
  • Schreibe einen Teaser, aber kopiere nicht Wort für Wort den bestehenden.
    Unter Media
  • Soundcloud Copy & Paste die URL des Originals.
  • Soundcloud-ID Wird beim Speichern automatisch ermittelt und eingetragen.
  • Download Trage die Original-URL noch einmal ein oder lass es leer.
  • Serie Füge den Namen der Soundcloud Playlist hinzu (wenn es eine gibt und diese Playlist später z. B. in einer Gridbox angezeigt werden soll.
  • Dauer & Lizenz & Creator trage die Informationen ein.
  • URL Trage die Soundcloud-URL nochmals ein.
    Unter META
  • Date of Ordering Trage die Information ein, wenn vorhanden
  • Content Genre ist das gleiche Feature wie in Artikeln.
  • (Media) Genre könnte z. B. "Reportage" or "Feature" oder "Popmusik" sein.
  • Media type is "Audio".
  • Format Brauchst Du normalerweise nicht.
  • Category Gleiches Feature wie üblich: Wenn Du willst, dass das Medium auf einer Kategorie-Termseite oder in einer Media-by-selection- Box nach Kategorien gefiltert werden soll.
  • Tags Wie üblich: Tags helfen User*innen, besser navigieren zu können.
  • Availability könnte z. B. "online" oder "Tonband" sein.
  • Audio languages kann z. B. "English" oder "deutsch" sein.
  • Typed People - Value: Schreibe den Namen der Person, für die Du oben die Rolle ausgewählt hast, in dieses Feld, z. B. den Namen der/des Sprecher*in, wenn Du oben Sprecher*in gewählt hast.
  • Anmerkungen und Empfehlungen werden in der Detail-Medien-Ansicht angezeigt und enthalten zusätzliche Informationen zum Medium, wie z. B. "Enthält Gewaltdarstellungen".
  • Provider/Channel Trage den Namen des Providers/Kanals ein.
  • Speichere.

(3) Um das Audio auf der Landingpage anzuzeigen:

  • Platziere es manuell über den Boxtyp "Media", suche nach Titel, wähle "Teaser Media" as viewmode

Anmerkungen

Eine Listenbox, die - anders als die Soundcloud-Box - automatisch einzelne neueste Soundcloud-Episoden ausspielt, befindet sich noch im Bau.

Beispiel (Soundcloud-Episode, manuell platziert)

Red headphone on green background, embed from Soundcloud