Directus Assets extension

Smarter image resizing for Directus.

This is a port of the "Important part of an image" feature from Contao CMS.

Installation

The extension is available as NPM package:

npm install @ameotoko/directus-extension-assets

What does it do?

The extension allows you to mark an "important part" of any image in your File Library. The selected area will always be preserved when image is automatically cropped by Directus, i.e. when both new width and new height is set, and the resulting aspect ratio differs from the original aspect ratio.

Original images:

Default crop by Directus:

Smart crop by the extension:

Usage

To enable smart cropping for an image, go to image editing screen and mark the important part of the image by mouse-dragging across the image preview:

To reset the selection, double-click inside the blue rectangle.

Use cases

Gallery

This allows you to easily implement such content as e.g. an image gallery of portraits of avatars, where each source file can have different aspect ratio, but must be displayed at the same size and aspect ratio in the frontend.

Just define your image size preset once in the Data Studio, and request it in your frontend component, for example in React:

<img src={`/assets/${item.id}?key=preset-gallery`} />

Then, all you or your editors have to do is set the focal point whenever new image is uploaded.

HTML Responsive images

Another use-case might be implementing responsive images in your project. You might want to define different image size presets for various breakpoints, and then use them in srcset attribute. Here's a rewritten example from the MDN article:

<img
  srcset="/assets/57b4a7af-cfa1-4e97-9a84-f8777f7f4ecb/image.jpg?key=preset-sm 480w,
          /assets/57b4a7af-cfa1-4e97-9a84-f8777f7f4ecb/image.jpg?preset-md 800w"
  sizes="(max-width: 600px) 480px, 800px"
  src="/assets/57b4a7af-cfa1-4e97-9a84-f8777f7f4ecb/image.jpg"
  alt="Elva dressed as a fairy" />

Previous version

This extension previously provided simpler functionality, where focal_point of an image could be set by a dropdown with 8 predefined options: "Top", "Left" etc.

If you need to use this functionality in your project, install the previous version of the extension:

npm install @ameotoko/[email protected]