Managing images has always been a key concern in Drupal. How to provide the most optimized pages while displaying images provided by contributors, which are often too large for the final use, all while simplifying the operations for the contributor as much as possible?
Thumbnail generation: an essential aspect
Early in Drupal's history, a thumbnail generation mechanism (resizing versions of the image provided by the contributor) was introduced, primarily to meet the dual need of optimizing elements transmitted to the client's browser and allowing for variations in sizes and formats.
This component is so central to a Drupal site that it's commonly understood that the "raw" image provided by the contributor is "archived" forever and will never be displayed again; only its variations/thumbnails will be, both in the back office and on the front end.
This philosophy aligns perfectly with that of a media library or a GED/DAM. The original image is a sanctuarized source that will serve as a reference and can be used multiple times.
A slight deviation from this concept can occur when refining the cropping of the thumbnail. Indeed, it's common for the point of interest, the area of focus in an image, not to be specifically positioned in the same place across our entire collection of images. For this very common use case, the "CROP" module and its derivatives come into play. These modules allow for the natural selection of the specific area of interest in the image and seamlessly integrate into the thumbnail generation process to ensure that the point of interest is highlighted in the thumbnail.
A difficult coexistence
The problem arises when several components are added around a central element, each bringing its own specific functionality, but their coexistence is rarely considered. And that's the key point here. The "CROP" module only concerns itself with the image itself and deliberately ignores its uses. In itself, this isn't particularly problematic.
On the other hand, the widespread use of media libraries has buried the image field within the media, far from the usage of the Image (now a media) in the content. In practice, the contributor believes they are manipulating Images when they are actually dealing with a structure that contains the real image.
This is where misunderstandings begin. The contributor, accustomed to being able to "fine-tune" the area of interest of their image, doesn't understand why the Image library no longer allows this refinement. Even when the configuration allows it, the contributor may panic when, trying to choose an area of interest in a particular article, they realize that all uses of the Image have been modified, with the different selected areas of interest replaced by the last one chosen.
The situation has been in a status quo for several years now, with little change. If you heavily rely on "CROP," it might be best to avoid using media libraries altogether. If you want to centralize the use of images within the media library, you'll have to accept that you can only configure a "default" area of interest for all uses of your Image.
Our experts serving the community
In this context, at Smile, one of our experts decided to provide a solution, and the Media Contextual Crop module collection was proposed. This collection of modules fills the gap between the Media Library and the "CROP" module.
In practice, the module offers a selection field for classic media, allowing "CROP" to handle the context of image usage. The collection not only manages media handled through reference fields but also handles media inserted into rich text editors.
Under development since March 2023, quietly presented at DrupalCon Lille, the solution was publicly unveiled at DrupalCamp Rennes in March 2024 during a dedicated conference, receiving a warm welcome. This reception showed that the need exists and has been ignored for too long.
A new way of thinking about media usage through customization of areas of interest has emerged. You can find a recording of the conference on the social networks of the Drupal France association (of which Smile is also a partner).
Want to delve deeper? Discover my presentation at DrupalCamp!
