added additional attributes for using kirbytag (srcset: …)

link, linkclass, class, imgclass, target, rel this also relates to #7 concering usage of class attr Signed-off-by: Bruno Meilick <[email protected]>
bnomei · Feb 27, 2019 · b5200d2 · b5200d2
1 parent 2a8a01f
commit b5200d2
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 24 deletions.
diff --git 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, $prefix = null)
+    public static function srcset(\Kirby\Cms\File $file, $preset = 'default', $lazy = null, $prefix = null, $class = null, $imgclass = null)
     {
         if (!$file || !is_a($file, 'Kirby\Cms\File')) {
             return null;
@@ -22,6 +22,8 @@ public static function srcset(\Kirby\Cms\File $file, $preset = 'default', $lazy
             'sources' => \Bnomei\Srcset::sources($file, $preset, $lazy),
             'autoSizes' => option('bnomei.srcset.autosizes'),
             'prefix' => $prefix ? $prefix : option('bnomei.srcset.prefix'),
+            'class' => $class ? $class : option('bnomei.srcset.class', ''),
+            'imgclass' => $imgclass ? $imgclass : option('bnomei.srcset.imgclass', ''),
         ], true);
     }
 

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

diff --git a/index.php b/index.php
@@ -30,24 +30,39 @@
     ],
     'tags' => [
         'srcset' => [
-            'attr' => ['preset', 'lazy', 'link', 'class', 'prefix'],
+            // https://getkirby.com/docs/reference/text/kirbytags/image
+            'attr' => ['preset', 'lazy', 'prefix', 'class', 'imgclass', 'link', 'linkclass', 'target', 'rel'],
             '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), $prefix);
-                        if ($tag->link && $tag->class) {
-                            return '<a href="'.url($tag->link).'" class="'.$tag->class.'">'.$srcset.'</a>';
-                        } elseif ($tag->link) {
-                            return '<a href="'.url($tag->link).'">'.$srcset.'</a>';
+                        $preset = (string) $tag->preset;
+                        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));
+                        }
+                        $prefix = (string) $tag->prefix;
+                        $class = $tag->class ? trim($tag->class) : null;
+                        $imgclass = $tag->imgclass ? trim($tag->imgclass) : null;
+                        $srcset = \Bnomei\Srcset::srcset($file, $preset, boolval($tag->lazy), $prefix, $class, $imgclass);
+                        if ($tag->link) {
+                            $attr = [
+                                'href' => trim($tag->link),
+                            ];
+                            if ($tag->linkclass) {
+                                $attr['class'] = trim($tag->linkclass);
+                            }
+                            if ($tag->target) {
+                                $attr['target'] = trim($tag->target);
+                            }
+                            if ($tag->rel) {
+                                $attr['rel'] = trim($tag->rel);
+                            }
+                            // wrap $srcset in array to avoid encoding
+                            // https://github.com/getkirby/kirby/blob/master/src/Toolkit/Html.php#L367
+                            return \Kirby\Toolkit\Html::tag('a', [$srcset], $attr);
                         } else {
                             return $srcset.PHP_EOL;
                         }

diff --git a/readme.md b/readme.md
@@ -91,9 +91,11 @@ echo $page->image('ukulele.jpg')->srcset('breakpoints', true, 'data-flickity-laz
 # but NOT ranges (like imageset does)
 (srcset: myfile.jpg preset: 320-960, 3) // fails!
 
-# link and class do work like with (image: )
+# class, imgclass, link, linkclass, target and rel do work similar to (image: )
+https://getkirby.com/docs/reference/text/kirbytags/image
+
 (srcset: myfile.jpg link: mypdf.pdf)
-(srcset: myfile.jpg class: myclass)
+(srcset: myfile.jpg imglass: myclass)
 ```
 
 

diff --git a/snippets/srcset-img.php b/snippets/srcset-img.php
@@ -1,10 +1,10 @@
 <?php
-    // $file, $lazy, $isLazy, $preset, $sources, $img, $autoSizes, $prefix
+    // $file, $lazy, $isLazy, $preset, $sources, $img, $autoSizes, $prefix, $class, $imgclass
 
     $firstSource = null;
     foreach ($sources as $s) {
         $firstSource = $s;
         break;
     }
 ?>
-<img class="srcset <?= $lazy ?>" <?= ($autoSizes?'data-sizes="auto"':'') ?> data-preset="<?= $preset ?>" <?= ($isLazy?$prefix:'') ?>srcset="<?= $firstSource['srcset'] ?>" <?= ($isLazy?$prefix:'') ?>src="<?= $img['src'] ?>" alt="<?= $img['alt'] ?>" />
+<img class="srcset <?= $lazy ?> <?= $class ?> <?= $imgclass ?>" <?= ($autoSizes?'data-sizes="auto"':'') ?> 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
@@ -1,4 +1,4 @@
 <?php
-    // $file, $lazy, $isLazy, $preset, $sources, $img, $autoSizes, $prefix
+    // $file, $lazy, $isLazy, $preset, $sources, $img, $autoSizes, $prefix, $class, $imgclass
 ?>
-<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>
+<picture class="srcset <?= $class ?>" data-preset="<?= $preset ?>"><?php foreach ($sources as $s): ?><source <?= ($isLazy?$prefix:'') ?>srcset="<?= $s['srcset'] ?>" type="<?= $s['type'] ?>" /><?php endforeach; ?> <img class="<?= $lazy ?> <?= $imgclass ?>" <?= ($autoSizes?'data-sizes="auto"':'') ?> <?= ($isLazy?$prefix:'') ?>src="<?= $img['src'] ?>" alt="<?= $img['alt'] ?>" /></picture>
diff --git a/snippets/srcset.php b/snippets/srcset.php
@@ -1,4 +1,4 @@
 <?php
-    // $file, $lazy, $isLazy, $preset, $sources, $img, $prefix
+    // $file, $lazy, $isLazy, $preset, $sources, $img, $prefix, $class, $imgclass
 ?>
-<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>
+<picture class="srcset <?= $class ?>" data-preset="<?= $preset ?>"><?php foreach ($sources as $s): ?><source <?= ($isLazy?$prefix:'') ?>srcset="<?= $s['srcset'] ?>" type="<?= $s['type'] ?>" /><?php endforeach; ?> <img class="<?= $lazy ?> <?= $imgclass ?>" <?= ($isLazy?$prefix:'') ?>src="<?= $img['src'] ?>" alt="<?= $img['alt'] ?>" /></picture>