├── LICENSE
├── README.md
├── composer.json
├── kirby-responsiveimage.php
└── renovate.json


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Pascal Küsgen
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Kirby - responsiveimage tag
 2 | 
 3 | This is a plugin for [Kirby](http://getkirby.com/).
 4 | It adds the [srcset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset) attribute to the `<img>`-tag.
 5 | 
 6 | ## Installation
 7 | 
 8 | `composer require pascalmh/kirby-responsiveimage`
 9 | 
10 | ## Options
11 | 
12 | You can use the following [Options](http://getkirby.com/docs/advanced/options)
13 | 
14 | ### responsiveimage.widths
15 | Type: `array`
16 | Default value: `[2400, 2200, 2000, 1800, 1400, 1200, 1000, 800, 600, 400, 320]`
17 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pascalmh/kirby-responsiveimage",
 3 |   "type": "kirby-plugin",
 4 |   "license": "MIT",
 5 |   "require": {
 6 |     "composer/installers": "~1.0",
 7 |     "getkirby/kirby": "^2.4"
 8 |   },
 9 |   "repositories": [
10 |     {
11 |       "type": "vcs",
12 |       "url": "https://github.com/pascalmh/kirby-responsiveimage"
13 |     }
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/kirby-responsiveimage.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | $oldFunction = kirbytext::$tags['image'];
 4 | kirbytext::$tags['image'] = [
 5 |     'attr' => $oldFunction['attr'],
 6 |     'html' => function ($tag) use ($oldFunction) {
 7 |         $image = $tag->file($tag->attr('image'));
 8 | 
 9 |         if (!$image) {
10 |             return $result = call($oldFunction['html'], $tag);
11 |         }
12 | 
13 |         $widths = c::get(
14 |             'responsiveimage.widths',
15 |             [
16 |                 2400,
17 |                 2200,
18 |                 2000,
19 |                 1800,
20 |                 1400,
21 |                 1200,
22 |                 1000,
23 |                 800,
24 |                 600,
25 |                 400,
26 |                 320,
27 |             ]
28 |         );
29 | 
30 |         $srcset = [];
31 |         foreach ($widths as $width) {
32 |             if ($image->width() < $width) {
33 |                 continue;
34 |             }
35 | 
36 |             $imageResized = $image->resize($width);
37 |             $srcset[] = $imageResized->url() . ' ' . $imageResized->width() . 'w';
38 |         }
39 | 
40 |         $result = call($oldFunction['html'], $tag);
41 |         $result = str_replace('<img', '<img srcset="' . implode(', ', $srcset) . '"', $result->toString());
42 | 
43 |         return $result;
44 |     }
45 | ];
46 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "config:base",
4 |     ":preserveSemverRanges"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------