Skip to content

Commit

Permalink
Thumbnailer fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
benhaynes committed Aug 26, 2018
1 parent 25b4a17 commit c666ff2
Show file tree
Hide file tree
Showing 3 changed files with 3 additions and 3 deletions.
Binary file removed img/thumbnailer/200-200-contain-best.jpg
Binary file not shown.
Binary file added img/thumbnailer/200-200-contain-better.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions thumbnailer.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ https://directus.example.com/thumbnail/<project>/<width>/<height>/<action>/<qual

1. A user requests a thumbnail of a specific Directus file using the URL syntax above
2. The request is routed through an .htaccess file (or nginx equivalent) to the thumbnailer that checks if the thumbnail already exists
3. If it already exists:
3. If it already exists:
1. **The thumbnail is returned**
4. If it does _NOT_ exist
4. If it does _NOT_ exist
1. The requested size is validated against the whitelist
2. The thumbnail is generated and saved in the filesystem
3. **The thumbnail is returned**
Expand Down Expand Up @@ -91,7 +91,7 @@ Images are never stretched or distorted even when changing the aspect ratio.

Now let's use the first example again, but this time with `contain` action. Now our URL is `http://directus.example.com/thumbnail/_/200/200/contain/better/file-name.jpg`, which saves the thumbnail to the server's filesystem at `thumbnail/_/200/200/contain/better/file-name.jpg`. As you can see ferom the example below, this new thumbnail has not been cropped at all... it has simply been shrunk to fit within the 200x200 bounds.

<!-- ![Contain](./img/thumbnailer/200-200-contain-better.jpg)<br>_27KB • 200x133_ -->
![Contain](./img/thumbnailer/200-200-contain-better.jpg)<br>_27KB • 200x133_

:::tip
You can also use the contain action with the `resizeCanvas` enabled. This would result in the same thumbnail as above but with "letterboxing" since the requested dimensions are forced and any negative space is filled with the `canvasBackground` color.
Expand Down

0 comments on commit c666ff2

Please sign in to comment.