updated readme, preset can be array, minor additional options, type h…

…inting Signed-off-by: Bruno Meilick <[email protected]>
bnomei · Aug 10, 2018 · 68104c9 · 68104c9
1 parent 42937d6
commit 68104c9
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 23 deletions.
diff --git a/classes/srcset.php b/classes/srcset.php
@@ -4,7 +4,12 @@
 
 class Srcset
 {
-    public static function srcset($file, $preset = 'default', $lazy = null) {
+    public static function srcset(\Kirby\Cms\File $file, $preset = 'default', $lazy = null)
+    {
+        if (!$file || !is_a($file, 'Kirby\Cms\File')) {
+            return null;
+        }
+
         $lazy = !is_null($lazy) ? $lazy : option('bnomei.srcset.lazy', false);
         $isLazy = $lazy !== null && $lazy !== false;
         return snippet('plugin-srcset', [
@@ -17,46 +22,57 @@ public static function srcset($file, $preset = 'default', $lazy = null) {
         ], true);
     }
 
-    public static function resizeWithType($file, $width, $type) {
-        if(!$file || !is_a($file, 'Kirby\Cms\File')) return null;
+    public static function resizeWithType(\Kirby\Cms\File $file, int $width, string $type)
+    {
+        if (!$file || !is_a($file, 'Kirby\Cms\File')) {
+            return null;
+        }
 
         $resize = option('bnomei.srcset.resize', null);
-        if($resize && is_callable($resize)) {
+        if ($resize && is_callable($resize)) {
             return $resize($file, $width, $type);
         } else {
             return $file->resize($width);
         }
     }
 
-    public static function img($file, $preset = 'default', $lazy = false)
+    public static function img(Kirby\Cms\File $file, $preset = 'default', $lazy = false)
     {
-        if (!$file && !is_a($file, 'Kirby\Cms\File')) return null;
+        if (!$file && !is_a($file, 'Kirby\Cms\File')) {
+            return null;
+        }
+        $captionFieldname = option('bnomei.srcset.img.alt.fieldname', 'caption');
         return [
             'src' => $file->resize()->url(), // trigger thumb if needed
-            'alt' => $file->caption()->isNotEmpty() ? $file->caption()->value() : $file->filename(),
+            'alt' => $file->$captionFieldname()->isNotEmpty() ? $file->$captionFieldname()->value() : $file->filename(),
         ];
     }
 
-    public static function sources($file, $preset = 'default', $lazy = false) {
-        if (!$file && !is_a($file, 'Kirby\Cms\File')) return null;
+    public static function sources(Kirby\Cms\File $file, $preset = 'default', $lazy = false)
+    {
+        if (!$file && !is_a($file, 'Kirby\Cms\File')) {
+            return null;
+        }
 
         $presets = option('bnomei.srcset.presets');
-        $presetWidths = \Kirby\Toolkit\A::get($presets, $preset, []);
+        if (is_array($preset)) {
+            $presetWidths = $preset;
+        }
         $presetWidths[] = intval($file->width());
         sort($presetWidths, SORT_NUMERIC);
         $presetWidths = array_unique($presetWidths);
 
         $types = option('bnomei.srcset.types', []);
-        if (count($types) == 0) {
+        if (count($types) == 0 || option('bnomei.srcset.types.addsource', false)) {
             $types[] = $file->mime();
         }
 
         $sources = [];
-        foreach($types as $t) {
+        foreach ($types as $t) {
             $srcset = [];
-            foreach($presetWidths as $p) {
+            foreach ($presetWidths as $p) {
                 $img = static::resizeWithType($file, intval($p), strval($t));
-                if($img && is_a($img, 'Kirby\CMS\File')) {
+                if ($img && is_a($img, 'Kirby\CMS\File')) {
                     $srcset[] = $img->url() . ' ' . $p . 'w';
                 }
             }

diff --git a/composer.json b/composer.json
@@ -1,7 +1,7 @@
 {
     "name": "bnomei/kirby3-srcset",
     "type": "plugin",
-    "version": "1.0.7",
+    "version": "1.0.8",
     "license": "MIT",
     "description": "Kirby 3 Plugin for creating image srcset using picture element",
     "autoload": {

diff --git a/readme.md b/readme.md
@@ -8,17 +8,20 @@ This plugin is free but if you use it in a commercial project please consider to
 
 ## Notice
 
+- Why the picture element? Because having multiple `sources` with different mime types can improve pagespeed. For example: This is the only way to use `webp` and have a fallack to `jpg` for browsers that [do not support it](https://caniuse.com/#feat=webp).
 - You will need a Picture Polyfill for [IE11 support](https://caniuse.com/#search=picture). This plugin does not provide this.
 - This plugin is only a quick hack until @fabianmichael ports his [awesome imageset plugin](https://github.com/fabianmichael/kirby-imageset) for Kirby 3
 - Javascript library for lazy loading is not included since that should be part of the websites build chain.
-- A `sizes` attribute is not defined since js lib `lazysizes` will create these on-the-fly.
+- A `sizes` attribute is not defined since js lib [lazysizes](https://github.com/aFarkas/lazysizes) will create these on-the-fly based on actual screen size of image.
+
 
 ## Usage
 
 ```php
     echo $page->image('ukulele.jpg')->srcset();
     echo $page->image('ukulele.jpg')->srcset('default');
     echo $page->image('ukulele.jpg')->srcset('breakpoints');
+    echo $page->image('ukulele.jpg')->srcset([320, 640, 960]);
 
     // choosing if lazy is possible global or override on call
     // default: null => config value, true => will be flagged for lazyloading
@@ -29,38 +32,48 @@ This plugin is free but if you use it in a commercial project please consider to
 ```html
 <picture class="srcset" data-preset="default">
     <source srcset="http://../media/pages/home/test-320x160-q90.jpg 320w, http://../media/pages/home/test-640x320-q90.jpg 640w" type="image/jpeg" />
-    <noscript><img src="http://../media/pages/home/test-640x320-q90.jpg" alt="test.jpg" /></noscript>
+    <img src="http://../media/pages/home/test-640x320-q90.jpg" alt="test.jpg" />
 </picture>
 ```
 
 **lazy**
 ```html
-<picture class="srcset lazy" data-preset="default">
+<picture class="srcset" data-preset="default">
     <source data-srcset="http://../media/pages/home/test-320x160-q90.jpg 320w, http://../media/pages/home/test-640x320-q90.jpg 640w" type="image/jpeg" />
-    <noscript><img src="http://../media/pages/home/test-640x320-q90.jpg" alt="test.jpg" /></noscript>
+    <img class="lazyload" src="http://../media/pages/home/test-640x320-q90.jpg" alt="test.jpg" />
 </picture>
 ```
 
 ## Options explained
 ```php
-'lazy' => false, // bool or class-name, for lozad or lazysizes etc.
+'lazy' => false, // bool or class-name, for lozad or lazysizes etc. true => 'lazyload'
 // override preset array to create your own list of widths
 'presets' => [
     'default' => [320], // will generate original and 320px width thumb
     'breakpoints' => [576, 768, 992, 1200], // common breakpoints
 ],
-// be default only a source of same type a original will be added
+// https://github.com/k-next/kirby/blob/master/src/Toolkit/Mime.php
+// by default only a source of same type a original will be added
 // but setting mime types here you could add more but...
 'types' => [],
 // ... you have to create the variants yourself. there might be
 // another plugin that can do that one day.
 // then you can call it here and use the mime type/
-'resize' => function ($file, $width, $type) {
-    // NOTE: override and do something with $type
+'resize' => function (\Kirby\Cms\File $file, int $width, string $type) {
+    // NOTE: override and do something with $type (mime type string)
+    // return $file->yourImageConverter($width, $type);
     return $file->resize($width);
 }
 ```
 
+## Other Settings
+
+**img.alt.fieldname**
+- default: `caption` will call $file->caption()` if exists or use `$file->filename()`
+
+**types.addsource**
+- default: `false` will not automatically add mime-type of source to registered types. But if no type is set (empty array) the mime type of source is added.
+
 
 ## Disclaimer