How To Manage Image Styles for Media in Drupal 8

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/

Instructor

  • 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. He has worked in both the non-profit and for-profit worlds, in small companies and large corporations. His extensive open source experience includes WordPress, Joomla and Drupal and he really knows how to help you get the most out of the system you chose. Rod plays ice hockey a couple of times a week and rides his Goldwing motorcycle pretty much everywhere he can.

0 0 votes
Blog Rating
Subscribe
Notify of
7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Susanna

This is useful and interesting, thanks. The question I’m wrestling with as I’m getting into using Media is how best to manage media and image styles for different contexts, e.g. a full-width hero image vs, say, a 400-pixel-max content image. For a hero image, the image needs to have certain minimum dimensions, whereas for a content image, I don’t want the client to have to upload an image that large, or indeed have a minimum size at all. I also want to be able to limit the media browser on edit forms to show only the type of image they should upload to that field (it makes no sense to show a bunch of small content images when adding a hero image). For me, the best way to handle this is to have different Media image types, but that then proliferates admin for those media types, the entity browsers and entity browser views, etc. It would be nice to be able to have one Image type that handled all image sizes, but I can’t see practically how that would work. Any thoughts on this?

Radouch

I tried to solve the same problem (I hope it is the same) – how to insert Media images to the page content while being able to select different image styles.
Finally I found it is pretty easy (using Drupal 8.8.5). At first, prepare desired image styles and media display modes as described in the article above. Then:
1. Go to [i]CK Editor settings[/i] for e.g. [i]Basic HTML format[/i] at
[code]/admin/config/content/formats/manage/basic_html?destination=/admin/config/content/formats[/code]
2. Allow [i]Embed media[/i] option.
3. At [i]Filter settings – Embed media[/i] settings under [i]View modes selectable in the ‘Edit media’ dialog[/i] check media display modes you wish to allow in this CK editor format (Basic HTML in this case).
4. Now, when editing text field using CK editor in Basic HTML format, you can select display mode for inserted media.

phil Did

Rod, it’s alway’s a pleasure to get your clear and clean explainations. Thousand thanks.

Darrell Ulm

Nice straightforward tutorial, and the way to handle embedded media and the styles is far easier since Drupal 8.8 and of course Drupal 9! Thank you.

marc@landreville.info

Thanks, what if we need the image to link to the content? If I do it in the display mode it link to the Media page not the node page.

7
0
Would love your thoughts, please comment.x
()
x