diff --git a/classes/srcset.php b/classes/srcset.php
index 392a840..9a93089 100644
--- a/classes/srcset.php
+++ b/classes/srcset.php
@@ -4,7 +4,12 @@
class Srcset
{
- public static function srcset($file, $preset = 'default', $lazy = null) {
+ public static function srcset(\Kirby\Cms\File $file, $preset = 'default', $lazy = null)
+ {
+ if (!$file || !is_a($file, 'Kirby\Cms\File')) {
+ return null;
+ }
+
$lazy = !is_null($lazy) ? $lazy : option('bnomei.srcset.lazy', false);
$isLazy = $lazy !== null && $lazy !== false;
return snippet('plugin-srcset', [
@@ -17,46 +22,57 @@ public static function srcset($file, $preset = 'default', $lazy = null) {
], true);
}
- public static function resizeWithType($file, $width, $type) {
- if(!$file || !is_a($file, 'Kirby\Cms\File')) return null;
+ public static function resizeWithType(\Kirby\Cms\File $file, int $width, string $type)
+ {
+ if (!$file || !is_a($file, 'Kirby\Cms\File')) {
+ return null;
+ }
$resize = option('bnomei.srcset.resize', null);
- if($resize && is_callable($resize)) {
+ if ($resize && is_callable($resize)) {
return $resize($file, $width, $type);
} else {
return $file->resize($width);
}
}
- public static function img($file, $preset = 'default', $lazy = false)
+ public static function img(Kirby\Cms\File $file, $preset = 'default', $lazy = false)
{
- if (!$file && !is_a($file, 'Kirby\Cms\File')) return null;
+ if (!$file && !is_a($file, 'Kirby\Cms\File')) {
+ return null;
+ }
+ $captionFieldname = option('bnomei.srcset.img.alt.fieldname', 'caption');
return [
'src' => $file->resize()->url(), // trigger thumb if needed
- 'alt' => $file->caption()->isNotEmpty() ? $file->caption()->value() : $file->filename(),
+ 'alt' => $file->$captionFieldname()->isNotEmpty() ? $file->$captionFieldname()->value() : $file->filename(),
];
}
- public static function sources($file, $preset = 'default', $lazy = false) {
- if (!$file && !is_a($file, 'Kirby\Cms\File')) return null;
+ public static function sources(Kirby\Cms\File $file, $preset = 'default', $lazy = false)
+ {
+ if (!$file && !is_a($file, 'Kirby\Cms\File')) {
+ return null;
+ }
$presets = option('bnomei.srcset.presets');
- $presetWidths = \Kirby\Toolkit\A::get($presets, $preset, []);
+ if (is_array($preset)) {
+ $presetWidths = $preset;
+ }
$presetWidths[] = intval($file->width());
sort($presetWidths, SORT_NUMERIC);
$presetWidths = array_unique($presetWidths);
$types = option('bnomei.srcset.types', []);
- if (count($types) == 0) {
+ if (count($types) == 0 || option('bnomei.srcset.types.addsource', false)) {
$types[] = $file->mime();
}
$sources = [];
- foreach($types as $t) {
+ foreach ($types as $t) {
$srcset = [];
- foreach($presetWidths as $p) {
+ foreach ($presetWidths as $p) {
$img = static::resizeWithType($file, intval($p), strval($t));
- if($img && is_a($img, 'Kirby\CMS\File')) {
+ if ($img && is_a($img, 'Kirby\CMS\File')) {
$srcset[] = $img->url() . ' ' . $p . 'w';
}
}
diff --git a/composer.json b/composer.json
index a4e508c..be635d4 100644
--- a/composer.json
+++ b/composer.json
@@ -1,7 +1,7 @@
{
"name": "bnomei/kirby3-srcset",
"type": "plugin",
- "version": "1.0.7",
+ "version": "1.0.8",
"license": "MIT",
"description": "Kirby 3 Plugin for creating image srcset using picture element",
"autoload": {
diff --git a/readme.md b/readme.md
index f76939f..f81e70d 100644
--- a/readme.md
+++ b/readme.md
@@ -8,10 +8,12 @@ This plugin is free but if you use it in a commercial project please consider to
## Notice
+- Why the picture element? Because having multiple `sources` with different mime types can improve pagespeed. For example: This is the only way to use `webp` and have a fallack to `jpg` for browsers that [do not support it](https://caniuse.com/#feat=webp).
- You will need a Picture Polyfill for [IE11 support](https://caniuse.com/#search=picture). This plugin does not provide this.
- This plugin is only a quick hack until @fabianmichael ports his [awesome imageset plugin](https://github.com/fabianmichael/kirby-imageset) for Kirby 3
- Javascript library for lazy loading is not included since that should be part of the websites build chain.
-- A `sizes` attribute is not defined since js lib `lazysizes` will create these on-the-fly.
+- A `sizes` attribute is not defined since js lib [lazysizes](https://github.com/aFarkas/lazysizes) will create these on-the-fly based on actual screen size of image.
+
## Usage
@@ -19,6 +21,7 @@ This plugin is free but if you use it in a commercial project please consider to
echo $page->image('ukulele.jpg')->srcset();
echo $page->image('ukulele.jpg')->srcset('default');
echo $page->image('ukulele.jpg')->srcset('breakpoints');
+ 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
@@ -29,38 +32,48 @@ This plugin is free but if you use it in a commercial project please consider to
```html
```
**lazy**
```html
-