diff --git a/classes/srcset.php b/classes/srcset.php index 392a840..9a93089 100644 --- 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 index a4e508c..be635d4 100644 --- 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 index f76939f..f81e70d 100644 --- a/readme.md +++ b/readme.md @@ -8,10 +8,12 @@ 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 @@ -19,6 +21,7 @@ This plugin is free but if you use it in a commercial project please consider to 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 - + test.jpg ``` **lazy** ```html - + - + test.jpg ``` ## 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