Thumbnails in Directus (version 6)

In Directus you can have some heavy lifting done by Directus itself, things like:

• different sizes
• resizing
• cropping
• different qualities

To have it working properly you have to modify the configuration.php in the api folder.

Scroll down to the section thumbnails:

'thumbnailer' => [
   '404imageLocation' => __DIR__ . '/../thumbnail/img-not-found.png',
   'supportedThumbnailDimensions' => [
      // width x height
     '100x100',
     '100x200',     
     '300x300',
     '500x500',
     '640x480',
     '1024x1024'
   ],
   'supportedQualityTags' => [
      'poor' => 25,
      'good' => 50,
      'better' => 75,
      'best' => 100,
   ],
   'supportedActions' => [
      'contain' => [
          'options' => [
              'resizeCanvas' => false, // http://image.intervention.io/api/resizeCanvas
              'position' => 'center',
              'resizeRelative' => false,
              'canvasBackground' => 'ccc', // http://image.intervention.io/getting_started/formats
           ]
      ],
      'crop' => [
         'options' => [
             'position' => 'center', // http://image.intervention.io/api/fit
         ]
      ],
   ]
],

• By default the supportedThumbnailDimensions image sizes are commented, but you can create size to your own liking.
• The difference between contain and crop is that crop will crop the image to force it in the demanded size, while contain will keep the aspect ratio.

How to use it?

Admin

Url in the media (files) library:

https://api6.thuiskunst.nl/storage/uploads/00000000003.jpg

Frontend

Sample 1

size: 300x300,
resize: contain,
quality: best (=100%)

https://api6.thuiskunst.nl/thumbnail/300/300/contain/best/00000000003.jpg

Result:

Sample 2

size: 300x300,
resize: crop,
quality: better (=75%)

https://api6.thuiskunst.nl/thumbnail/300/300/crop/better/00000000003.jpg

Result:

Sample 3 (image not found)

size: 200x210,
resize: crop,
quality: better (=75%)

https://api6.thuiskunst.nl/thumbnail/200/210/crop/better/00000000003.jpg

Result:

Where do the results go?

The thumbnails are stored in:

/storage/uploads/thumbs

Explanation on Youtube

Links

Image Intervention PHP Image Manipulation Library