Skip to content

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.