diff --git a/classes/Srcset.php b/classes/Srcset.php index ec94422..0d15fe1 100644 --- a/classes/Srcset.php +++ b/classes/Srcset.php @@ -4,7 +4,7 @@ class Srcset { - public static function srcset(\Kirby\Cms\File $file, $preset = 'default', $lazy = null) + public static function srcset(\Kirby\Cms\File $file, $preset = 'default', $lazy = null, $prefix = null) { if (!$file || !is_a($file, 'Kirby\Cms\File')) { return null; @@ -20,7 +20,8 @@ public static function srcset(\Kirby\Cms\File $file, $preset = 'default', $lazy 'preset' => is_array($preset) ? implode(', ', $preset) : $preset, 'img' => \Bnomei\Srcset::img($file, $preset, $lazy), 'sources' => \Bnomei\Srcset::sources($file, $preset, $lazy), - 'autoSizes' => option('bnomei.srcset.autosizes') + 'autoSizes' => option('bnomei.srcset.autosizes'), + 'prefix' => $prefix ? $prefix : option('bnomei.srcset.prefix'), ], true); } diff --git a/composer.json b/composer.json index 624d1e3..2998e8e 100644 --- a/composer.json +++ b/composer.json @@ -1,7 +1,7 @@ { "name": "bnomei/kirby3-srcset", "type": "kirby-plugin", - "version": "1.3.0", + "version": "1.3.1", "license": "MIT", "description": "Kirby 3 Plugin for creating image srcset using picture or image element", "authors": [ @@ -20,7 +20,8 @@ "load", "images", "lazysizes", - "source" + "source", + "flickity" ], "autoload": { "psr-4": { diff --git a/composer.lock b/composer.lock index faa0be2..e94aefd 100644 --- a/composer.lock +++ b/composer.lock @@ -4,20 +4,20 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "897bce1a246319583afeb01217fc67cd", + "content-hash": "a279bb79dd46349e870b145bf3ae4b04", "packages": [ { "name": "getkirby/composer-installer", - "version": "1.1.3", + "version": "1.1.4", "source": { "type": "git", "url": "https://github.com/getkirby/composer-installer.git", - "reference": "162497e4d9465fae95cb44b6135506eac54c9a05" + "reference": "2d6b8f5601a31caeeea45623e1643fbb437eb94e" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/getkirby/composer-installer/zipball/162497e4d9465fae95cb44b6135506eac54c9a05", - "reference": "162497e4d9465fae95cb44b6135506eac54c9a05", + "url": "https://api.github.com/repos/getkirby/composer-installer/zipball/2d6b8f5601a31caeeea45623e1643fbb437eb94e", + "reference": "2d6b8f5601a31caeeea45623e1643fbb437eb94e", "shasum": "" }, "require": { @@ -42,7 +42,7 @@ ], "description": "Kirby's custom Composer installer for the Kirby CMS and for Kirby plugins", "homepage": "https://getkirby.com", - "time": "2019-02-06T09:15:26+00:00" + "time": "2019-02-11T20:27:36+00:00" } ], "packages-dev": [], diff --git a/index.php b/index.php index 3f75bad..af25d8e 100644 --- a/index.php +++ b/index.php @@ -5,6 +5,7 @@ Kirby::plugin('bnomei/srcset', [ 'options' => [ 'lazy' => false, // bool or class-name + 'lazy.prefix' => 'data-', // bool or string 'autosizes' => false, // https://github.com/aFarkas/lazysizes#markup-api 'presets' => [ 'default' => [320, 0], @@ -23,17 +24,18 @@ 'plugin-srcset-image' => __DIR__ . '/snippets/srcset-img.php', ], 'fileMethods' => [ - 'srcset' => function ($preset = 'default', $lazy = null) { - return \Bnomei\Srcset::srcset($this, $preset, $lazy); + 'srcset' => function ($preset = 'default', $lazy = null, $prefix = null) { + return \Bnomei\Srcset::srcset($this, $preset, $lazy, $prefix); } ], 'tags' => [ 'srcset' => [ - 'attr' => ['preset', 'lazy', 'link', 'class'], + 'attr' => ['preset', 'lazy', 'link', 'class', 'prefix'], 'html' => function ($tag) { try { $file = Kirby::instance()->file($tag->value, $tag->parent()); $preset = (string) $tag->preset; + $prefix = (string) $tag->prefix; if (\Kirby\Toolkit\Str::contains($preset, ' ') || \Kirby\Toolkit\Str::contains($preset, ',')) { $preset = str_replace(['[',']',',',' ','px'], ['','',' ',' ',''], $preset); $preset = array_map(function ($v) { @@ -41,7 +43,7 @@ }, explode(' ', $preset)); } if ($file) { - $srcset = \Bnomei\Srcset::srcset($file, $preset, boolval($tag->lazy)); + $srcset = \Bnomei\Srcset::srcset($file, $preset, boolval($tag->lazy), $prefix); if ($tag->link && $tag->class) { return ''.$srcset.''; } elseif ($tag->link) { diff --git a/readme.md b/readme.md index 4fd7ed1..d3aaf34 100644 --- a/readme.md +++ b/readme.md @@ -35,6 +35,8 @@ 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 echo $page->image('ukulele.jpg')->srcset('breakpoints', true); // null,true, false, 'classname' +echo $page->image('ukulele.jpg')->srcset('breakpoints', true, 'data-'); // null, false, 'data-' +echo $page->image('ukulele.jpg')->srcset('breakpoints', true, 'data-flickity-lazyload-'); // null, false, 'data-' ``` **non-lazy** @@ -99,10 +101,12 @@ echo $page->image('ukulele.jpg')->srcset('breakpoints', true); // null,true, fal - [Override default image tag](https://github.com/bnomei/kirby3-srcset/issues/2) - [How to solve low resolution images on first load?](https://github.com/bnomei/kirby3-srcset/issues/5) +- [Lazyloading with Flickity](https://flickity.metafizzy.co/options.html#lazyload)? Do `lazy.prefix => data-flickity-lazyload-` and `snippet => plugin-srcset-img`. ## Options explained ```php 'lazy' => false, // bool or class-name, for lozad or lazysizes etc. true => 'lazyload' +'lazy.prefix' => 'data-', // bool or prefix before srcset and src when doint lazy loading. 'autosizes' => false, // if true will add `data-sizes="auto"` 'snippet' => 'plugin-srcset-picture', // or plugin-srcset-img // override preset array to create your own list of widths @@ -129,6 +133,10 @@ echo $page->image('ukulele.jpg')->srcset('breakpoints', true); // null,true, fal **autosizes** - default: `false` Please [read the manual](https://github.com/aFarkas/lazysizes#markup-api) before activating this setting. +**lazy.prefix** +- default: `data-`. This can be used to add [Flickity Lazyloading](https://flickity.metafizzy.co/options.html#lazyload). +- example: `$page->image('ukulele.jpg')->srcset('breakpoints', true, 'data-flickity-lazyload-');` + > TIP: You might need to add CSS as well. ```css img[data-sizes="auto"] { display: block; width: 100%; } diff --git a/snippets/srcset-img.php b/snippets/srcset-img.php index d8a5dd8..38fa74b 100644 --- a/snippets/srcset-img.php +++ b/snippets/srcset-img.php @@ -1,5 +1,5 @@ - data-preset="" srcset="" src="" alt="" /> + data-preset="" srcset="" src="" alt="" /> diff --git a/snippets/srcset-picture.php b/snippets/srcset-picture.php index 6c10246..deb704a 100644 --- a/snippets/srcset-picture.php +++ b/snippets/srcset-picture.php @@ -1,4 +1,4 @@ -srcset="" type="" /> src="" alt="" /> +srcset="" type="" /> src="" alt="" /> diff --git a/snippets/srcset.php b/snippets/srcset.php index fc55dcb..be2a2cb 100644 --- a/snippets/srcset.php +++ b/snippets/srcset.php @@ -1,4 +1,4 @@ -srcset="" type="" /> src="" alt="" /> +srcset="" type="" /> src="" alt="" />