The Directus Asset Generator dynamically returns custom thumbnails upon request
The asset whitelist is managed within the project's Global Settings and are stored in the
directus_settings collection. Each whitelist row consists of five fields:
- Key: A unique name to to make accessing thumbnails easier
- Width: The width of the image in pixels
- Height: The height of the image in pixels
- Quality: The image compression (
- Fit: Supports two options:
cropimages to the exact requested width/height
containimages within the requested width/height (maintains aspect ratio)
Images are never stretched or distorted even when changing the aspect ratio.
Removing all options from the Asset Whitelist will allow any assets to be dynamically generated. This might allow malicious users to flood your storage with unwanted generated assets.
Generating and fetching thumbnails is as easy as requesting them using the following URL syntax:
example.com/<project-name>/assets/<private_hash>?<query> example.com/thumper/assets/pnw7s9lqy68048g0?w=200&h=200&f=crop&q=80 example.com/thumper/assets/pnw7s9lqy68048g0?key=card
You can easily request whitelisted thumbnails using their key. When a key isn't provided as a URL parameter, you must provide all four other parameters in order to match the whitelist.
These locations can be configured, but below we show the default locations when using the
local storage adapter out-of-the-box.
When a user downloads a file from the Asset Generator, it's file name is dynamically updated to the value of
Below are a few thumbnail examples that show possible output of the Asset Generator.
Original File Used Below — 602KB and 1800x1200
Crop vs Contain
As you can see from the examples below, the contained thumbnail has maintained its aspect ratio and has simply been shrunk to fit within the 200x200 bounds.
8KB • 200x200
6KB • 200x133
Quality vs Filesize
The quality parameter can be any integer from
0-100. Qualities closer to
0 have more compression artifacts therefore poor image quality, but lower filesizes. Values closer to
100 have less compression and better image quality, but larger filesizes. Below are four possible qualities (200x200 crop) to visually compare the balance between compression and filesize.