Thumbnails in Directus (version 6)

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

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
         ]
      ],
   ]
],

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

When a thumbnail already exists, it will use it from this location. So altering the settings means that you have to clear the location of the specific thumbnails.

Explanation on Youtube

Links

Image Intervention PHP Image Manipulation Library

Last update: January 29th at 3:01pm