Thumbnail

Core Media

Thumbnail

Campbell Tilley

|

With the release of Drupal 8.4, Drupal Core has had one main improvement that has spiked our interest at Lil Engine, the much anticipated Media module has arrived and is ready to use. What does this mean for Developers and Content Editors?

In the past, if you were looking to store reusable images on your Drupal site you would need to download a contributed module such as Media Entity. With the release of Drupal 8.4, much of what you need ships with core!

If you haven't been exposed to the Media suite of modules before than this could all be quite new to you. You might be nervous, rather than excited, as it brings change. I have had a play around with the new module and I can assure you that there is nothing to be worried about. We've said goodbye to the old way, and have already started using it on this site.

As you'd expect Media is an Entity, like the Node module; we now have a Media Types option under Structure, a Media tab under Content and additional administration options such as new Views and Display modes. In this article I'm going to have a look at setting up the Media module for use in content and creating a Media view.

Disclaimer

This article talks about Drupal 8.4 which is currently in Beta. So there are inherent risks in upgrading. You might get drush/drush incompatibility when updating your codebase with Composer. We also had some trouble using Drush and Drupal Console to run updates, and had to update using /update.php.

In addition to this, 97% of all sites are probably running contrib Media, and upgrading is way beyond the scope of this article.

Installing

The module is currently hidden from the UI, most likely because it conflicts with contrib solutions in the wild. We are not using any media contrib modules, as we've been waiting anxiously for this release. So to install the module, we used Drupal Console (drupal moi media), you could also use Drush (drush en media).

Getting Set Up

If you are a Site Builder or Developer then your first task with this module may be to set it up so it's ready for use by Content Editors. The below steps will have your site ready to use the Media module in no time!

  1. To begin you will need to create your various media types (/admin/structure/media). I recommend creating different types as it will heavily assist when you are setting up your fields in your content types and will make the content editors lives a lot easier. 
  2. In each of your new media types, create your fields and configure the displays as required.
  3. Head over to the Manage fields section of your content type and add a new field Reference > Media.
  4. After adding your field, scroll down to Reference Type and under Bundles, select the required media type.
  5. Edit the form display of the field (I recommend using Chosen as the widget) then edit the display.

Now your Content Editors will be ready to use the module to add Images and Files to the library. This process is very similar to adding Articles. Once the images or files are added, they will be available for selection when creating content.

*If you don't want Anonymous users to be able to access the Media standalone page you can turn off "View Media" in the permissions list. They will still be able to view media being used in other Content types or Views.

Media Views

Another great addition with the Media module is the ability to create media views. If you are wanting to create, for example, an image gallery, then the new view option is perfect!

Setting up an image gallery:

This is a nice and simple view that is easy to create but will show you the power and simplicity of having your images stored in Media.

  1. Create a new view that shows Media > {Media Type} > {Select Order}.
  2. Decide whether you'd like this to be a page or a block (a page would be more common for an image gallery). Set up your page or block options as desired. In my example I've gone for a page with a grid view of fields displaying 12 items.
  3. Save your view
  4. Edit your grid settings. The only change I made was setting the columns to 3.
  5. The default field is name. If we are creating an image gallery, this won't quite work. Delete the name field then add your image field and select the image style (you can leave the name field if you would like to title shown or you can add additional fields if necessary). 
  6. Alter your Filter and Sort criteria as desired.
  7. Scroll down and view the preview of your new gallery.

Each time you add an image to the Media Type you've used, the gallery will be updated to include the image.

Review

The Media module is very powerful and versatile - making it easy to store and reuse images or files throughout your website. The new UI is easy to learn and getting set up is quick and hassle free. The additional features that it has brought to Drupal are great and will only be improved or added to as new versions of core are released.

Drupal 8.4 is currently beta, so you should consider carefully whether it's time to upgrade, and those with existing media modules won't be able to leverage the new functionality. If neither of those issues applies to you, try 8.4 today!

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

Comments

  • Allowed HTML tags: <em> <strong> <cite> <blockquote cite> <ul type> <ol start type> <li> <dl> <dt> <dd> <p>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Use [gist:#####] where ##### is your gist number to embed the gist
    You may also include a specific file within a multi-file gist with [gist:####:my_file].

Spread the word