Add 'colorist' tag

fundevogel · Oct 1, 2020 · 52a2e33 · 52a2e33
1 parent f2051e5
commit 52a2e33
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -61,6 +61,20 @@ $profile = $image->identify();
 
 For further details, have a look at the following sections.
 
+#### Configuration
+You may also change certain options from your `config.php` globally (`'fundevogel.colorist.optionName'`):
+
+| Option       | Type        | Default                     | Description                                                                            |
+| ------------ | ----------- | --------------------------- | -------------------------------------------------------------------------------------- |
+| `'bin'`      | string      | `__DIR__ . '/bin/colorist'` | Path to `colorist` executable                                                          |
+| `'formats'`  | array       | `['webp']`                  | Default file formats to be used on image uploads                                       |
+| `'speed'`    | integer     | `0`                         | Quality/speed tradeoff when encoding (AVIF only); `0` = best quality, `10` = fastest   |
+| `'template'` | string      | `'image'`                   | Set file blueprint for generated images                                                |
+| `'tonemap'`  | string      | `'off'`                     | Set tonemapping (`'on'` or `'off'`)                                                    |
+| `'yuv'`      | string      | `'420'`                     | Choose yuv output format for supported formats (`'444'`, `'422'`, `'420'` or `'yv12'`) |
+
+The `colorist` library has [much more](https://github.com/joedrago/colorist/blob/master/docs/Usage.md) to offer, and more options will be made available in time - if one of it's many features you really feel is missing, feel free to open a PR!
+
 #### Methods
 For now, the following methods are available:
 
@@ -79,25 +93,20 @@ Checks if `$file` has image of given `$format`, returns `bool`.
 ##### `isFormat (string $format)`
 Checks if `$file` is image of given `$format`, returns `bool`.
 
-#### Configuration
-You may also change certain options from your `config.php` globally (`'fundevogel.colorist.optionName'`):
+#### Hooks
+On image upload, files are automatically converted to all formats in the `'fundevogel.colorist.formats'` option (`['webp']` by default).
 
-| Option       | Type        | Default                     | Description                                                                            |
-| ------------ | ----------- | --------------------------- | -------------------------------------------------------------------------------------- |
-| `'bin'`      | string      | `__DIR__ . '/bin/colorist'` | Path to `colorist` executable                                                          |
-| `'formats'`  | array       | `['webp']`                  | Default file formats to be used on image uploads                                       |
-| `'speed'`    | integer     | `0`                         | Quality/speed tradeoff when encoding (AVIF only); `0` = best quality, `10` = fastest   |
-| `'template'` | string      | `'image'`                   | Set file blueprint for generated images                                                |
-| `'tonemap'`  | string      | `'off'`                     | Set tonemapping (`'on'` or `'off'`)                                                    |
-| `'yuv'`      | string      | `'420'`                     | Choose yuv output format for supported formats (`'444'`, `'422'`, `'420'` or `'yv12'`) |
+#### Tag
+The `(colorist: example.jpg)` tag supports converting / resizing right from the editor.
 
-The `colorist` library has [much more](https://github.com/joedrago/colorist/blob/master/docs/Usage.md) to offer, and more options will be made available in time - if one of it's many features you really feel is missing, feel free to open a PR!
+##### Options
+WIP
 
 
 ## Roadmap
 - [ ] Add tests
 - [x] ~~Add hooks for file upload/update~~
-- [ ] Add tag for editor use
+- [x] ~~Add tag for editor use~~
 - [x] ~~Add compatibility with 'Focus' plugin by @flokosiol~~
 - [ ] Add methods for editing ICC color profile
 

diff --git a/composer.json b/composer.json
@@ -3,7 +3,7 @@
     "description": "Kirby v3 wrapper for colorist",
     "type": "kirby-plugin",
     "license": "MIT",
-    "version": "1.4.0",
+    "version": "1.5.0",
     "keywords": ["kirby3", "image", "graphics"],
     "homepage": "https://github.com/Fundevogel/kirby3-colorist#readme",
     "authors": [

diff --git a/index.php b/index.php
@@ -6,6 +6,7 @@
 use Kirby\Cms\Filename;
 use Kirby\Cms\FileVersion;
 use Kirby\Data\Data;
+use Kirby\Http\Url;
 use Kirby\Image\Darkroom;
 use Kirby\Toolkit\F;
 use Kirby\Toolkit\Str;
@@ -42,7 +43,7 @@
         'bin' => __DIR__ . '/bin/colorist',
         'sizes' => [1920, 1140, 640, 320],
         'template' => 'image',
-        'uploadFormats' => ['webp'],
+        'formats' => ['webp'],
     ],
     'snippets' => [
         'colorist' => __DIR__ . '/snippets/colorist.php',
@@ -152,7 +153,7 @@
         },
         'toFormats' => function (array $formats) {
             if (empty($formats)) {
-                $formats = option('fundevogel.colorist.uploadFormats');
+                $formats = option('fundevogel.colorist.formats');
             }
 
             $files = [];
@@ -186,7 +187,7 @@
         },
         'toFormats' => function (array $formats) {
             if (empty($formats)) {
-                $formats = option('fundevogel.colorist.uploadFormats');
+                $formats = option('fundevogel.colorist.formats');
             }
 
             $files = [];
@@ -202,10 +203,47 @@
     ],
     'hooks' => [
         'file.create:after' => function ($file) {
-            $file->toFormats(option('fundevogel.colorist.uploadFormats'));
+            $file->toFormats(option('fundevogel.colorist.formats'));
         },
         'file.replace:after' => function ($newFile, $oldFile) {
-            $newFile->toFormats(option('fundevogel.colorist.uploadFormats'));
+            $newFile->toFormats(option('fundevogel.colorist.formats'));
         },
     ],
+    'tags' => [
+        'colorist' => [
+            'attr' => [
+                'alt',
+                'class',
+                'fallback',
+                'height',
+                'imgclass',
+                'title',
+                'width',
+            ],
+            'html' => function($tag) {
+                if ($tag->file = $tag->file($tag->value)) {
+                    $tag->alt = $tag->alt ?? $tag->file->alt()->or(' ')->value();
+                    $tag->fallback = $tag->fallback ?? 'jpg';
+                    $tag->height = $tag->height ?? $tag->file($tag->value)->height();
+                    $tag->sizes = $tag->sizes ? $tag->sizes : option('fundevogel.colorist.sizes');
+                    $tag->src = $tag->file($tag->value);
+                    $tag->title = $tag->title ?? $tag->file->title()->or(' ')->value();
+                    $tag->width = $tag->width ?? $tag->file($tag->value)->width();
+                } else {
+                    $tag->src = Url::to($tag->value);
+                }
+
+                return snippet('colorist', [
+                    'alt' => $tag->alt,
+                    'class' => $tag->class,
+                    'height' => $tag->height,
+                    'sizes' => $tag->sizes,
+                    'src' => $tag->src,
+                    'title' => $tag->title,
+                    'type' => $tag->fallback,
+                    'width' => $tag->width
+                ], false);
+            },
+        ],
+    ],
 ]);
diff --git a/snippets/colorist.php b/snippets/colorist.php
@@ -1,6 +1,6 @@
 <?php
-    $formats = $src->toFormats('avif', 'webp');
-    $sizes = option('fundevogel.colorist.sizes');
+    $formats = $src->toFormats(['avif', 'webp']);
+    $sizes = $sizes ?? option('fundevogel.colorist.sizes');
 ?>
 
 <picture>
@@ -34,5 +34,9 @@
     >
     <?php endforeach?>
 
-    <img src="<?= $src->url() ?>">
+    <img
+        src="<?= $src->resize($width, $height)->url() ?>"
+        title="<?= $src->title() ?>" alt="<?= $src->alt() ?>"
+        width="<?= $width ?>" height="<?= $height ?>"
+    >
 </picture>