Extending¶
The module has no hooks, events or plugins of its own, and no image_compressor.api.php. It can be adjusted in these places.
Which inputs are resized¶
ImageCompressorHooks::elementInfoAlter() implements hook_element_info_alter() and adds ImageCompressorHooks::processManagedFile() to the #process callbacks of every managed_file element. Image widgets, including other modules' widgets that extend core's, and the Media Library's upload form merge those callbacks into their own. For each element, the callback reads the maximum dimensions from #upload_validators['FileImageDimensions']['maxDimensions']. In the Media Library's upload form, which has no dimensions validator, it reads the media type's image source field setting instead. It adds the dimensions to the element's upload input as data-width and data-height and attaches the image_compressor/code library.
So any managed_file element in a custom form is resized when it has the validator, which also makes the server enforce the maximum:
$form['image'] = [
'#type' => 'managed_file',
'#title' => t('Image'),
'#upload_validators' => [
'FileExtension' => ['extensions' => 'jpg jpeg png webp'],
'FileIsImage' => [],
'FileImageDimensions' => ['maxDimensions' => '2400x2400'],
],
];
The script binds to every input[type="file"] with a data-width or data-height attribute. That input must be the upload child of a managed_file element, because the script triggers that element's upload button.
To read the dimensions from a set of upload validators, call the static ImageCompressorHooks::getMaxDimensions($validators); to parse a setting such as 1920x1080, call ImageCompressorHooks::parseDimensions(). Both return [width, height], where 0 means that side has no maximum.
How images are resized¶
js/code.js defines Drupal.imageCompressor:
| Method | Purpose |
|---|---|
resize(file, maxWidth, maxHeight) |
Returns a promise of the resized File, or of the original file when it is not resized |
getDimensions(file) |
Returns a promise of the image's natural {width, height}, or null |
showProgress(input) |
Disables the input, shows core's throbber with "Resizing imageā¦" after it and announces it to screen readers. Returns a function that undoes this |
processFiles(event) |
The change handler: shows the progress, resizes every chosen file, then triggers the upload |
A theme or module script that loads after image_compressor/code can replace Drupal.imageCompressor.resize to pass other Compressor.js options, such as quality or mimeType.
Libraries¶
| Library | Contents |
|---|---|
image_compressor/compressor |
Compressor.js, /libraries/compressorjs/dist/compressor.min.js, or the sites/*/libraries or profile copy found by library.libraries_directory_file_finder |
image_compressor/code |
js/code.js. Depends on image_compressor/compressor and file/drupal.file |
The module's own hook_library_info_alter() sets the path. To load Compressor.js from elsewhere, implement hook_library_info_alter() in a module that runs after it. Note that the widget is only handled when the file finder finds Compressor.js in a libraries directory.