Merge pull request #3 from Pascalmh/extend-image-tag

feat: extend kirbytext image tag instead of recoding it
Pascalmh · Feb 5, 2018 · e6627d5 · e6627d5
2 parents c185e5b + 5502ffb
commit e6627d5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 67 deletions.
diff --git a/README.md b/README.md
@@ -7,22 +7,10 @@ It adds the [srcset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i
 
 `composer require pascalmh/kirby-responsiveimage`
 
-## Usage
-
-Instead of using `(image: filename.jpg)` like you are used to use `(responsiveimage: filename.jpg)`.
-
-This will output
-
-```xml
-<img src="http://yourdomain.com/thumbs/pagename/filename-320x212.jpg 320w" srcset="http://yourdomain.com/thumbs/pagename/filename-1200x795.jpg 1200w, http://yourdomain.com/thumbs/pagename/filename-1000x662.jpg 1000w, http://yourdomain.com/thumbs/pagename/filename-800x530.jpg 800w, http://yourdomain.com/thumbs/pagename/filename-600x397.jpg 600w, http://yourdomain.com/thumbs/pagename/filename-400x265.jpg 400w, http://yourdomain.com/thumbs/pagename/filename-320x212.jpg 320w">
-```
-
-The following attributes are available: `alt`, `width`, `height`, `class`, `link`, `popup`, `caption`.
-
 ## Options
 
 You can use the following [Options](http://getkirby.com/docs/advanced/options)
 
-### tag.responsiveimage.widths
+### responsiveimage.widths
 Type: `array`
 Default value: `[2400, 2200, 2000, 1800, 1400, 1200, 1000, 800, 600, 400, 320]`
diff --git a/kirby-responsiveimage.php b/kirby-responsiveimage.php
@@ -1,24 +1,17 @@
 <?php
 
-$kirby->set('tag', 'responsiveimage', [
-    'attr' => [
-        'alt',
-        'width',
-        'height',
-        'class',
-        'link',
-        'popup',
-        'caption',
-    ],
-    'html' => function ($tag) {
-        $image = $tag->file($tag->attr('responsiveimage'));
+$oldFunction = kirbytext::$tags['image'];
+kirbytext::$tags['image'] = [
+    'attr' => $oldFunction['attr'],
+    'html' => function ($tag) use ($oldFunction) {
+        $image = $tag->file($tag->attr('image'));
 
         if (!$image) {
-            return null;
+            return $result = call($oldFunction['html'], $tag);
         }
 
         $widths = c::get(
-            'tag.responsiveimage.widths',
+            'responsiveimage.widths',
             [
                 2400,
                 2200,
@@ -44,45 +37,9 @@
             $srcset[] = $imageResized->url() . ' ' . $imageResized->width() . 'w';
         }
 
-        $img = brick('img');
-        $img->attr('src', array_values(array_slice($srcset, -1))[0]);
-        $img->attr('srcset', implode(', ', $srcset));
-        $img->attr('alt', $tag->attr('alt'));
-        $img->attr('width', $tag->attr('width'));
-        $img->attr('height', $tag->attr('height'));
-        $img->attr('class', $tag->attr('class'));
-        $html = $img;
+        $result = call($oldFunction['html'], $tag);
+        $result = str_replace('<img', '<img srcset="' . implode(', ', $srcset) . '"', $result->toString());
 
-        if ($href = $tag->attr('link')) {
-            $link = brick('a');
-            $link->attr('href', url($href));
-
-            if ($tag->attr('popup') === 'yes') {
-                $link->attr('target', '_blank');
-            }
-
-            $link->append(function () use ($html) {
-                return $html;
-            });
-
-            $html = $link;
-        }
-
-        if (c::get('kirbytext.image.figure', true)) {
-            $figure = brick('figure');
-            $figure->append(function () use ($html) {
-                return $html;
-            });
-
-            if ($caption = $tag->attr('caption')) {
-                $figure->append(function() use ($caption) {
-                    return brick('figcaption', $caption);
-                });
-            }
-
-            $html = $figure;
-        }
-
-        return $html;
+        return $result;
     }
-]);
+];