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
]
],
]
],
supportedThumbnailDimensions
image sizes are commented, but you can create size to your own liking.contain
and crop
is that crop
will crop the image to force it in the demanded size, while contain
will keep the aspect ratio.Url in the media (files) library:
https://api6.thuiskunst.nl/storage/uploads/00000000003.jpg
size: 300x300,
resize: contain,
quality: best (=100%)
https://api6.thuiskunst.nl/thumbnail/300/300/contain/best/00000000003.jpg
Result:
size: 300x300,
resize: crop,
quality: better (=75%)
https://api6.thuiskunst.nl/thumbnail/300/300/crop/better/00000000003.jpg
Result:
size: 200x210,
resize: crop,
quality: better (=75%)
https://api6.thuiskunst.nl/thumbnail/200/210/crop/better/00000000003.jpg
Result:
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.
Image Intervention PHP Image Manipulation Library