Image browser

Handling media in Drupal has been … let’s just admit it .... horrible. Even in Drupal 7, the Media module didn’t really handle media very well. The only module who came close was Scald, but it was a cumbersome module to work with and required quite a skillset to install and configure.

When D8 first was released, it looked like media was again forgotten. At least in core. Contrib modules were still available but no complete overview seemed to be in place, until the Media initiative was kicked in high gear! Finally, some money and effort was being put into creating a team of contributors that had media management on their plate. And, as of Drupal 8.4, Media entities are going to be part of core!

I’m not sure how much is going to be part of core and there are still going to be many contrib modules that support the core functionality, but a least now we are on the right path.

As with every other entity module, the Media provider entities are fieldable, which means that you can extra fields to your media entities. Which I think is awesome. Now you can store credit information, meta information and more where it should be.

Ivan @Webwash has an awesome webcast on the Media project here:

How to Manage Media Assets in Drupal 8

Below are some of the modules that I think are essential for your media management needs, and also some that is just fun to experiment with!

  1. Media Entity (media_entity)
    Core Media API module. Has to be there for all the others. Won’t go far without it (actually you will not go anywhere without it :-) )

  2. Media Entity Image (media_entity_image)
    A provider module for images.

  3. Media Entity Document (media_entity_document)
    A provider module for storing and rendering documents, like pdfs, spreadsheets and word documents.

  4. Video Embed Field (video_embed_field)
    A provider module for viemo and YouTube videos. Will create thumbnail for your video for better integration to your content.

And finally there are the support modules. Modules that you either need or at least want.

  1. Entity Browser (entity_browser)
    Core module for browsing any kind of entities. Needs some configuration, which is very well explained by Ivan: 

    Embed Assets using Entity Embed
  2. Entity Browser Enchanced (entity_browswer_enhanced)
    This module provides some behavior and style enhancements to Entity Browsers, specifically for multiselect and image/media browsers. The module is still in Beta though.

  3. File Browser (file_browser)
    This module provides a default Entity Browser that lets you browse and select your files in a nice-looking, mobile-ready Masonry based interface, and upload files using the Dropzonejs module.

  4. Content Browser (content_browser)
    This module provides a default Entity Browser that lets you browse and select your Content from a feature-rich View that displays rows in a grid using a new View Mode. This allows for content editors to visually select what Content they want to reference while maintaining a consistent style throughout the selection process. Currently only Nodes are supported - but support for all default Content Entities (Content Blocks, Taxonomy Terms, Users) is planned.

    The Module is in Alpha, but worth a closer look if you have many entity references.

  5. DropzoneJS (dropzonejs)
    Mostly as a support module for various Browser modules, this module also allows you to upload more than one image at a time!

  6. Focal Point (focal_point)
    Focal point is a cool cropping utility that allows you to set a general point of reference when cropping images. Like if your image style is landscape and users upload a lot of portrait images, being able to move the focal point of the crop is essential. Ivan explains it very well here:

    Automatic Crop using Focal Point
  7. Image Widget Crop (image_widget_crop)
    Another cool widget to crop, IWC allows you to crop the image like you want it. And set all kinds of restrictions too, so ppl don’t go too far in the cropping, leaving you with an un-renderable image. Awesome tool, and very well explained here: 

    Cropping using Image Widget Crop

All other kinds of media modules are out there. Try them as well!

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.