prefix option (adding flickity support)

Signed-off-by: Bruno Meilick <[email protected]>

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);
     }
 

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": {

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,25 +24,26 @@
         '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) {
                             return trim($v);
                         }, 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 '<a href="'.url($tag->link).'" class="'.$tag->class.'">'.$srcset.'</a>';
                         } elseif ($tag->link) {

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%; }

snippets/srcset-img.php

@@ -1,10 +1,10 @@
 <?php
-    // $file, $lazy, $isLazy, $preset, $sources, $img, $autoSizes
+    // $file, $lazy, $isLazy, $preset, $sources, $img, $autoSizes, $prefix
 
     $firstSource = null;
     foreach ($sources as $s) {
         $firstSource = $s;
         break;
     }
 ?>
-<img class="srcset <?= $lazy ?>" <?= ($autoSizes?'data-sizes="auto"':'') ?> data-preset="<?= $preset ?>" <?= ($isLazy?'data-':'') ?>srcset="<?= $firstSource['srcset'] ?>" <?= ($isLazy?'data-':'') ?>src="<?= $img['src'] ?>" alt="<?= $img['alt'] ?>" />
+<img class="srcset <?= $lazy ?>" <?= ($autoSizes?'data-sizes="auto"':'') ?> data-preset="<?= $preset ?>" <?= ($isLazy?$prefix:'') ?>srcset="<?= $firstSource['srcset'] ?>" <?= ($isLazy?$prefix:'') ?>src="<?= $img['src'] ?>" alt="<?= $img['alt'] ?>" />

snippets/srcset-picture.php

@@ -1,4 +1,4 @@
 <?php
-    // $file, $lazy, $isLazy, $preset, $sources, $img, $autoSizes
+    // $file, $lazy, $isLazy, $preset, $sources, $img, $autoSizes, $prefix
 ?>
-<picture class="srcset" data-preset="<?= $preset ?>"><?php foreach ($sources as $s): ?><source <?= ($isLazy?'data-':'') ?>srcset="<?= $s['srcset'] ?>" type="<?= $s['type'] ?>" /><?php endforeach; ?> <img class="<?= $lazy ?>" <?= ($autoSizes?'data-sizes="auto"':'') ?> <?= ($isLazy?'data-':'') ?>src="<?= $img['src'] ?>" alt="<?= $img['alt'] ?>" /></picture>
+<picture class="srcset" data-preset="<?= $preset ?>"><?php foreach ($sources as $s): ?><source <?= ($isLazy?$prefix:'') ?>srcset="<?= $s['srcset'] ?>" type="<?= $s['type'] ?>" /><?php endforeach; ?> <img class="<?= $lazy ?>" <?= ($autoSizes?'data-sizes="auto"':'') ?> <?= ($isLazy?$prefix:'') ?>src="<?= $img['src'] ?>" alt="<?= $img['alt'] ?>" /></picture>

snippets/srcset.php

@@ -1,4 +1,4 @@
 <?php
-    // $file, $lazy, $isLazy, $preset, $sources, $img
+    // $file, $lazy, $isLazy, $preset, $sources, $img, $prefix
 ?>
-<picture class="srcset" data-preset="<?= $preset ?>"><?php foreach ($sources as $s): ?><source <?= ($isLazy?'data-':'') ?>srcset="<?= $s['srcset'] ?>" type="<?= $s['type'] ?>" /><?php endforeach; ?> <img class="<?= $lazy ?>" <?= ($isLazy?'data-':'') ?>src="<?= $img['src'] ?>" alt="<?= $img['alt'] ?>" /></picture>
+<picture class="srcset" data-preset="<?= $preset ?>"><?php foreach ($sources as $s): ?><source <?= ($isLazy?$prefix:'') ?>srcset="<?= $s['srcset'] ?>" type="<?= $s['type'] ?>" /><?php endforeach; ?> <img class="<?= $lazy ?>" <?= ($isLazy?$prefix:'') ?>src="<?= $img['src'] ?>" alt="<?= $img['alt'] ?>" /></picture>