Media Browser Responsive Images

You can embed images in your text fields from CKEditor using the Media Entity Browser, which works well. You can choose an image style and position the image as you choose.

What is missing from this process however, is the ability to embed responsive images.

You can embed responsive images using the Inline Responsive Images module, but this only works with the core Image embed functionality, it does not work with the Media Entity browser.

This module provides the ability to embed responsive images from the media entity browser.

Installation

• Install the module
• Select the text format that you wish to configure at /admin/config/content/formats e.g. 'Basic HTML'
• Enable the text format filter 'Display responsive images in Media Entity Browser' and select the images styles/responsive styles that you want to be available to the user.
• Make sure that the 'Limit allowed HTML tags' text filter is enabled but you will need to add the following to the 'allowed tags'
  list:

  <drupal-entity data-* data-entity-type data-entity-uuid data-entity-embed-display data-entity-embed-display-settings data-align
   data-caption data-embed-button alt title class> <picture data-* alt title class> <source srcset media type>

• Make sure that the 'Restrict images to this site' text filter is disabled.
• The user will then be prompted to select a responsive image style when inserting an image via CKEditor

Dependencies

• responsive_image
• editor
• image
• media_entity_browser
• media
• entity_embed
• embed

If you are having difficulty getting the Media Entity Browser configured and working in your site, then follow these instructions:

• composer require drupal/media_entity_browser:^2.0 (use the 2.x branch as we are using core media)
• composer require drupal/entity_embed
• drupal moi media_entity_browser entity_embed embed
• Then go to /admin/config/content/embed and create an ‘image embed’ button (Embed type: entity, Entity type: media, Media type: image, Allowed Entity Embed Display plugins: thumbnail, Entity Browser: Media Entity Browser, Entity Browser Settings: Display the entity after selection)
• Then add this new button to the toolbar under ‘basic html’ text format (or whatever one you like)
• Check the ‘display embedded entities’ checkbox and save

Credits

This module is essentially an adaptation of the Inline Responsive Images module, so many thanks to betawerk, keithm and jeroen_betawerk