How to present media

When and how should you use new or already existing functions to present media?

Neon sign: Media

In addition to media functions that have already worked in D7 (for instance upload of images and pdfs, display of audio & video from remote platforms), there are new features in Drupal 8, especially those for creating a Media library. Using these new features, we have built our "Gender Mediathek".

What is for what? Choose your use-case scenario:

Website-features

I want to upload:

I want to enhance a landingpage by providing multimedia, in particular:

Media Library features

I want to build an entire media library or a landing page for multimedia and want to display:

If you don't need the details, download an overview on how to create media for a media library.


File (for instance a pdf which you can link to from a text)

Example use-cases

  • link to a pdf application-form from an article in which you offer a job vacancy
  • direct download of a zip-archive containing all images used in a dossier.

Workflow

(1) CONTENT - ADD MEDIA - FILE or upload directly using the +ADD MEDIA-button in the Advanced Media Admin

Allowed types are: 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) Name it and fill in license information. If you want to, provide bibliographical information (teaser, body etc.) For the use-cases named above, this is not necessary. Upload file.

(3) Link to the file from a text, for instance in the EDIT-article-form.

Remarks:

Once uploaded, the file location can be reused as link-URL.


Image

Example use-cases:

  • main article/product image or additional image(s) for usage in article-body
  • image to be used in a grid-box on a landingpage, for instance, image box, Thematic Focus box, Click-to-action box

Workflow

(1) CONTENT - ADD MEDIA - IMAGE OR upload directly in the Advanced Media Admin using the +ADD MEDIA button OR (if it is for an article or product) upload it from the article-/product-form

Allowed types: png jpg jpeg; gif can be used for animations.

(2) Name it and make all necessary annotations, especially provide an alternative text for better accessibility and choose the correct license. You can - but usually don't have to - add a teaser & body.

(3) Insert it into the article/product in the EDIT-article/EDIT-product form. If you want to use it in a gridbox - look up the media-ID in the Advanced Media Admin and add it in the respective field of the image-box or upload it using the field in the box.

Remarks

Once uploaded, the image can be reused and inserted at any place on the website. Please always check, whether an image already exists in the Advanced Media Admin, in order to avoid double upload.


Video file

Example use-case:

  • to be used as background video in a Thematic Focus box

Allowed types: mp4.

Workflow

(1) As background in the Thematic Focus box: use the UPLOAD-button in the box
OR CONTENT - ADD MEDIA - VIDEO OR upload directly in the Advanced Media Admin using the +ADD MEDIA button.

(2) Name it and fill in all necessary, esp. license information. If you want to, add duration and body & teaser. However, this is unnecessary for the above-named use-case.

(3) If uploaded directly in Advanced Media Admin, copy media-ID into the respective field of the Thematic Focus box.

Remarks:

Max. file-size is 100 MB, but as the video will be displayed mutely and in a loop, it should be short and can be much smaller.
The video cannot be displayed directly on the website (there would not be a player for it).


Audio file

Use-case

This option should be chosen, when the file cannot be uploaded to a social media platform such as Soundcloud or Mixcloud. However, this should be an exception.

Allowed types: mp3 wav aac.

Workflow

CONTENT - ADD MEDIA - AUDIO OR upload directly in the Advanced Media Admin using the +ADD MEDIA button

(2) Name it and fill in all necessary, esp. license information. If you want to, add duration and body & teaser. However, this is unnecessary for the above-named use-case.

Remarks:

The max. file-size is 100 MB.

The only way to make the audio file accessible to users is linking to it. However, there might not be a player on the user's side, resp., the default player on the user's computer will be used.


Soundcloud or Mixcloud grid-box (one or just a few audios on a landingpage)

Use-case

This D7-gridbox embeds one single audio file from Soundcloud resp. Mixcloud. Use the box, when you want to display just one or a few of your or other people's audio(s) on a landingpage, for instance as part of a dossier.

Soundcloud and mixcloud player

If you want to show multiple audios on a landingpage, an accumulation of boxes ist not the best choice, as many players slow-down the loading and don't look nice:

striked through grid-boxes

Workflow

(1) Grid - Static Boxes - Soundcloud (resp. Mixcloud) - place box in container grid-slot

(2) Paste URL of the original Soundcloud/Mixcloud source

Remarks

If you want to show multiple audios, better use the Media Library features.


Video (one or just a few videos on a landingpage)

Use-case

One (or a few) videos displayed in video gridboxes can enhance a landingpage, in particular a dossier. This gridbox can embed your or other people's videos from YouTube and Vimeo.

Video embed from YouTube

Workflow

(1) Grid - Static Boxes - Video - place box in container grid-slot

(2) Paste URL of the original Vimeo/YouTube source.

Remarks

If you want to show multiple videos, better use the Media Library features.


Video-channel box

Use-case

If you want to show the latest max. four videos from your YouTube channel, you can use the video-channel box.

One bigger video with YouTube video player and three smaller videos below

Workflow

(1) Grid - Static Boxes - Video channel-by-username grid box - place box in container grid-slot

(2) Enter name of your YouTube channel.

OR

(1) Grid - Static Boxes - Video channel-by-ID grid box - place box in container grid-slot.

(2) Enter channel-ID of your YouTube channel.

Remarks

This channel-box is nice, when you want to draw attention to your video-channel. It is good practice to use it on your startpage. On a more thematic page, it may be better to use just one or few special video(s) on your topic.

 


Playlist from a Soundcloud-Podcast

Use-case

On a landingpage, you want to provide an overview of episodes belonging to a Soundcloud-playlist, like here:

Soundcloud Playlist

Workflow

(1) Grid - Static boxes - Soundcloud - place box in container-slot

(2) Name the box and enter Soundcloud-URL of playlist in URL-field.

(3) You can but don't have to - define the height.

Remarks

As this is a simple embed from Soundcloud, it is in Soundcloud-design.


A podcasts-page such as the one on boell.de

Use-case

If you want to have a nice-looking landingpage showing your Soundcloud-podcasts with an option to SUBSCRIBE.

Page with images and text from Podcasts

Workflow

As described in this help-article, this needs thorough preparation and the help of the support as well as of Palasthotel.

Preconditions (what you can do):

  • Episodes were uploaded and correctly annotated in Soundcloud (with teaser image, teaser, license, date of creation etc.)
  • Episodes have been assigned to playlists in Soundcloud.

(1) Create the landingpage - name it.

(2) Create the grid, use one container for Playlist title and line.

(3) Use 3-columns-container: 1st column - Podcast box for the playlist and subscribe. 2nd and 3d column: Podcast-by-selection boxes to show the latest episodes:

Different grid boxes

(4) Choose your podcast-playlist in the podcast-gridbox.

(5) Make the settings (number of episodes to be displayed, viewmode=main teaser) in the podcast-by-selection box, choose the Podcast-playlist.

Remarks

Let the support know at least a month in advance if you want to set up such a page. He/she will set up the playlists in your site-structure. Palasthotel will then build the RSS-feed to fetch your podcasts from Soundcloud.

If you also want to have the podcasts on other platforms, such as iTunes or/and Spotify, you need accounts on these platforms. Palasthotel can then export the Soundcloud-podcasts to these platforms.


External Media: Video

Use-case

If you want to display a video hosted remotely on a platform that doesn't provide an embed code (such as ARD-Mediathek and other media libraries of TV broadcasters).

Workflow

(1) CONTENT - ADD MEDIA - EXTERNAL MEDIA

(2) Fill in all the necessary data:

  • Don't use the original teaser image as you probably don't have permission to do so. A default teaser image will be displayed automatically instead.
  • Write a teaser, but don't use the original word by word.
  • Copy & Paste URL of the original in the External Media field.
  • Content Genre is the same feature as in articles.
    Under META
  • (Media) Genre could, for instance, be "documentary" or "movie" or "videoclip"
  • Media type is "Video" .
  • Format Usually, you don't need this.
  • Category Same feature as usual: If you want to display the medium on a category-termpage or in a media-by-selection box which filters for categories
  • Tags Same feature as usual: Tags help users to navigate through your site
  • Availability could, for instance, be "online" or "DVD"
  • Audio languages this can, for instance, be "English" or "deutsch" or "Sign language"
  • Subtitle Languages can differ from Audio languages
  • Typed People - type: Ask the support to create roles here, for instance, for a director, photographer, actor ...
  • Typed People - Value: Write the name of the person in the role above, for instance, the director's name if you have chosen "director" on top.
  • Notes and Advice will be displayed in the detail media view and can provide additional information for users, such as "Careful. This video contains violence"
  • Provider/Channel Fill in name of Provider/Channel.
  • Save

(3) To show the video on a landingpage:

  • Either use Media-by-selection box (and perhaps filter for category, media genre or tags), chose "Teaser Media" as viewmode
    or
  • Place medium manually by using the box-type "Media", search for it by media-title, chose "Teaser Media" as viewmode

Example

columns in different colours and a video camera on top


External Media: Audio

Use-case

If you want to display & make listenable audio hosted remotely on a platform that doesn't provide an embed code (such as ARD-Audiothek and other media libraries of broadcasters).

Workflow

(1) CONTENT - ADD MEDIA - EXTERNAL MEDIA

(2) Fill in all the necessary data:

  • Don't use the original teaser image as you probably don't have permission to do so. A default teaser image will be displayed automatically instead.
  • Write a teaser, but don't use the original word by word.
  • Copy & Paste URL of the original in the External Media field.
  • Duration & License & Creator Fill in the information
    Under META
  • Content Genre is the same feature as in articles.
  • (Media) Genre could, for instance, be "report" or "feature" or "pop music"
  • Media type is "Audio".
  • Format Usually, you don't need this.
  • Category Same feature as usual: If you want to display the medium on a category-termpage or in a media-by-selection box which filters for categories
  • Tags Same feature as usual: Tags help users to navigate through your site
  • Availability could, for instance, be "online" or "tape"
  • Audio languages this can, for instance, be "English" or "deutsch"
  • Typed People - type: Ask the support to create roles here, for instance, for a director, speaker,  dramaturg ...
  • Typed People - Value: Write the name of the person in the role above, for instance, the speaker's name if you have chosen "speaker" on top.
  • Notes and Advice will be displayed in the detail media view and can provide additional information for users, such as "Careful. This audio contains violence"
  • Provider/Channel Fill in name of Provider/Channel.
  • Save

(3) To show the audio on a landingpage:

  • Either use Media-by-selection box (and perhaps filter for category, media genre or tags), choose "Teaser Media" as viewmode
    or
  • Place medium manually by using the box-type "Media", search for it by media-title, choose "Teaser Media" as viewmode

Example

columns in different colours and a headset on top

The detail-view of the audio will display a section of the source-platform without player. If the user wants to play the audio, he/she has to go to the source platform:

Veggiewordl Podcast


Remote video

Use-case

Contrary to using the video-gridbox, you would choose this option if

  • you want to provide media information (explanation/description in a teaser and/or body, duration, time of publication etc.)
    and
  • the original source is on a platform providing an embed-code, such as YouTube or Vimeo

Workflow

(1) CONTENT - ADD MEDIA - REMOTE VIDEO

(2) Fill in all the necessary data:

  • Don't upload a teaser image, the source platform provides an embed of the video as teaser-image.
  • Write a teaser & body, but don't use the original word by word.
  • Copy & Paste URL of the original in the External Media field.
  • Under MEDIA
  • Video-URL: Copy & paste URL from source-platform
  • Filesize, Duration enter data
  • Playlist If you want to provide the playlist, which the video is a part of, enter the playlist name here
  • License Fill in the information
  • Creator Fill in the information
  • URL re-enter source URL (will be displayed in the detail-view)
    Under META
  • Date of Publication Fill in the information
  • Content genre is the same feature as in articles
  • (Media) genre can, for instance, be "documentary" or "movie" or "videoclip"
  • Media type is "Video".
  • Format Usually, you don't need this.
  • Category Same feature as usual: If you want to display the medium on a category-termpage or in a media-by-selection box which filters for categories
  • Tags Same feature as usual: Tags help users to navigate through your site
  • Audio languages this can, for instance, be "English", "deutsch"
  • Availability could, for instance, be "online" or "tape"
  • Typed People - type: Ask the support to create roles here, for instance, for a director, speaker,  dramaturg...
  • Typed People - Value: Write the name of the person in the role above, for instance, the speaker's name if you have chosen "speakter" on top.
  • Notes and Advice will be displayed in the detail media view and can provide additional information for users, such as "Careful. This audio contains violence"
  • FSK fill in recommended minimum listeners' age
  • Provider/Channel Fill in name of Provider/Channel.
  • Save

(3) To show the video on a landingpage:

  • Either use Media-by-selection box (and perhaps filter for category, media genre or tags), choose "Teaser Media" as viewmode
    or
  • Place medium manually by using the box-type "Media", search for it by media-title, choose "Teaser Media" as viewmode

Example

Three videos with player


Remote audio

Use-case

If you want to display & make listenable audio hosted remotely on a platform other than Soundcloud, that provides an embed code (such as Spreaker).

Workflow

(1) CONTENT - ADD MEDIA - EXTERNAL MEDIA

(2) Fill in all the necessary data:

  • Don't use the original teaser image as you probably don't have permission to do so. A default teaser image will be displayed automatically instead.
  • Write a teaser & body, but don't use the original word by word.
    Under Media
  • External Media Copy & Paste URL of the original.
  • Embed Code Copy & Paste embed-code from source platform
  • Duration & License & Creator Fill in the information
     
  • Content Genre is the same feature as in articles.
    Under META
  • (Media) Genre could, for instance, be "report" or "feature" or "pop music"
  • Media type is "Audio".
  • Format Usually, you don't need this.
  • Category Same feature as usual: If you want to display the medium on a category-termpage or in a media-by-selection box which filters for categories
  • Tags Same feature as usual: Tags help users to navigate through your site
  • Availability could, for instance, be "online" or "tape"
  • Audio languages this can, for instance, be "English" or "deutsch"
  • Typed People - type: Ask the support to create roles here, for instance, for a director, speaker,  dramaturg ...
  • Typed People - Value: Write the name of the person in the role above, for instance, the speaker's name if you have chosen "speaker" on top.
  • Notes and Advice will be displayed in the detail media view and can provide additional information for users, such as "Careful. This audio contains violence"
  • Provider/Channel Fill in name of Provider/Channel.
  • Save

(3) To show the audio on a landingpage:

  • Either use Media-by-selection box (and perhaps filter for category, media genre or tags), choose "Teaser Media" as viewmode
    or
  • Place medium manually by using the box-type "Media", search for it by media-title, choose "Teaser Media" as viewmode

Example

In the gridbox on the landingpage, the audio will look the same as Audio for which there's no embed code:

columns in different colours and a headset on top

The detail-view shows the embedded player from the source-platform:


Woman and text: With Hannah Witton

Soundcloud-Audio

Use-case

You want to show (and make listenable) your Soundcloud-audio.

Workflow

(1) CONTENT - ADD MEDIA - SOUNDCLOUD

(2) Fill in all the necessary data:

  • Don't use the original teaser image as you probably don't have permission to do so. An embedded teaser image will be displayed automatically instead.
  • Write a teaser & body, but don't use the original word by word.
    Under Media
  • Soundcloud Copy & Paste URL of the original.
  • Soundcloud-ID Will be added automatically on SAVE
  • Download Repeat URL of the original or leave empty
  • Serie Add name of Soundcloud playlist (if there is one and if you want to use the playlist later, for instance, in a gridbox)
  • Duration & Filesize & License & Creator Fill in the information
  • URL Repeat Soundcloud-URL
    Under META
  • Date of Ordering Fill in the information if available
  • Content Genre is the same feature as in articles
  • (Media) Genre could, for instance, be "report" or "feature" or "pop music"
  • Media type is "Audio".
  • Format Usually, you don't need this.
  • Category Same feature as usual: If you want to display the medium on a category-termpage or in a media-by-selection box which filters for categories
  • Tags Same feature as usual: Tags help users to navigate through your site
  • Availability could, for instance, be "online" or "tape"
  • Audio languages this can, for instance, be "English" or "deutsch"
  • Typed People - type: Ask the support to create roles here, for instance, for a director, speaker,  dramaturg ...
  • Typed People - Value: Write the name of the person in the role above, for instance, the speaker's name if you have chosen "speaker" on top.
  • Notes and Advice will be displayed in the detail media view and can provide additional information for users, such as "Careful. This audio contains violence"
  • Additional Playlists Fill in names of additional playlists, if you want to point the user to them
  • Provider/Channel Fill in name of Provider/Channel.
  • Save

(3) To show the audio on a landingpage:

  • Place medium manually by using the box-type "Media", search for it by media-title, choose "Teaser Media" as viewmode

Remarks

A listbox allowing for showing (the latest) single Soundcloud episodes (other than the Soundcloud-gridbox) is still under construction.

Example (Soundcloud episode placed manually)

Red headphone on green background, embed from Soundcloud