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.
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.
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.
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.
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.
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/
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?
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.
Hi Susanna,
Yep – I totally get where you’re coming from. One client did exactly that – set up another media type called “Hero Image”, and only those were used in a particular field. But you’re right – that adds a lot of administration.
The other option is to tag your images using the method I describe here (https://www.youtube.com/watch?v=9-Rm9r2jh-U) and have users filter by that tag to find the hero image they need.
There’s no short answer to that – you need to do what seems best for the client.
Rod, it’s alway’s a pleasure to get your clear and clean explainations. Thousand thanks.
Hey Phil,
thank you for your kind words!
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.
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.