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="= $preset ?>" = ($isLazy?'data-':'') ?>srcset="= $firstSource['srcset'] ?>" = ($isLazy?'data-':'') ?>src="= $img['src'] ?>" alt="= $img['alt'] ?>" />
+ data-preset="= $preset ?>" = ($isLazy?$prefix:'') ?>srcset="= $firstSource['srcset'] ?>" = ($isLazy?$prefix:'') ?>src="= $img['src'] ?>" alt="= $img['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 @@
-
+
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 @@
-
+