| Drupal

How To Manage Image Styles for Media in Drupal 8

For years, Drupal site builders have endured a less than great experience with any media they wanted to use.  It was difficult to manage and reuse images; let alone video, audio, and other media.  A number of excellent contributed modules tried to bridge that gap in Drupal 7; however Drupal 8 committed to having a media manager in core.  

As of December 2019, that wait is over with the Media module now officially out of "experimental" and fully integrated into Drupal core.

Probably the most exciting change for site builders in Drupal 8 is that almost everything is an entity, and media is no exception.  That introduces one big issue for images - an image style is not so ealily added to images as it was in Drupal 7.  Learn how to create and apply image styles for media following this tutorial.  It's not difficult, but it does require some planning, because it's now a four-step process.

Step One:  Set up Image Styles

Go to Configuration > Media > Image styles and define styles as needed. For this article, we will use "Gallery", but the steps can be repeated for additional styles as needed.  For simplicity and consistency, it's not a bad idea to use the image style names in the next step as well.

image styles


Step Two: Set up Media View Modes

Go to Structure > Display modes > View modes and navigate to the “Media” section. Add media view modes.

While it's not necessary to name the view modes the same as the image styles, it can help keep everything better organized, especially when there are many more styles than are being covered in this tutorial.

media styles


Step Three: Manage Media Display

Once all media view modes have been created, navigate to Structure > Media types > Image > Manage Display and enable "Gallery".  Continue to enable all custom displays created in Step One.

custom display settings

Now that these are enabled, go to the "Gallery" display, find the image field and make sure its format is “Image.” Click the gear icon and set the image style.
Repeat this step for remaining displays.

manage display media


Step 4: Manage Entity Display

Now we'll see it in action.  Let's review how to setup fields in a content type.  Note: this process can be used on any entity that allows for fields to be defined.

Go to the Manage Display tab of your content type, “Article” in our case. For the Default display, set the “Rendered entity” View Mode to “Gallery.” Now every article node when displayed with this mode will use that style to render the image field.

manage display content

Repeat this step for any other entity displays that have been created, and that's it.

Be sure to watch this video from our class on the Drupal 8 Media Module.

See the full class here: https://www.ostraining.com/class/learn-drupal-8-media-module/


About the author

Rod holds two masters degrees and has been training people how to do "things" for over 25 years. Originally from Australia, he grew up in Canada and now resides just outside Cincinnati, Ohio.