Merge branch 'develop'

Author: mullema

README.md

@@ -10,6 +10,10 @@ Visual image clipping / cropping.
 - [Consider a donation](#Consider-a-donation)
 - [Panel Usage](#Panel-usage)
 - [Frontend Usage](#Frontend-usage)
+   - [Single Image](#single-image)
+   - [Multiple Images](#multiple-images)
+   - [File Methods](#file-methods)
+   - [Responsive: srcset](#file-srcset)
 - [License](#License)
 
 ## Installation
@@ -93,30 +97,38 @@ __Note__: This is only about thumbnail quality in the panel. You don't need to m
 ## Frontend Usage
 How to fetch the images defined in a `image-clip` field.
 Read about the `clip()` method a bit further down.
-#### Multiple Images
+
+### Single Image
 ```php
-foreach($page->myimages()->toImages() as $image) {
+if ($image = $page->myimages()->toImage()) {
     echo $image->clip(500);
 }
 ```
-- **Important:** ~~toFiles~~ does not work, use `toImages()` instead.
-- `toImages()` returns a Files Collection with all it's functions.
+- **Important:** ~~toFile~~ does not work, use `toImage()` instead.
+- `toImage()` returns a File Object with all it's functions.
 
-#### Single Image
+### Multiple Images
 ```php
-if ($image = $page->myimages()->toImage()) {
+foreach($page->myimages()->toImages() as $image) {
     echo $image->clip(500);
 }
 ```
-- **Important:** ~~toFile~~ does not work, use `toImage()` instead.
-- `toImage()` returns a File Object with all it's functions.
+- **Important:** ~~toFiles~~ does not work, use `toImages()` instead.
+- `toImages()` returns a Files Collection with all it's functions.
+
 
+### File Methods
 
 #### `$file->clip()`
 Clip and resize. Generates a Thumbnail of the clip area.
 
 Adapter for `$file->thumb()`. Returns a FileVersion|File Object.
 ```php
+if ($image = $page->myimages()->toImage()) {
+    echo $image->clip(500);
+}
+```
+```php
 $file->clip(200, 300);   // bestfit
 $file->clip(200);        // width 200px
 $file->clip(null, 300);  // height 300px
@@ -127,7 +139,17 @@ $file->clip();           // clip area without resizing
     - if `width` and `height` are both defined, the image will be resized with `bestfit`
 
 
-### Improved `$file->thumb()`
+#### `$file->srcset()`
+Use this method to generate the srcset attribute for responsive images.
+Read more about it's functionality in the [Kirby3 Docs](https://getkirby.com/docs/guide/templates/resize-images-on-the-fly#responsive-images)
+```html
+<?php if ($image = $page->myimages()->toImage()): ?>
+    <img srcset="<?= $image->srcset([300, 800, 1024]) ?>">
+<?php endif; ?>
+```
+
+
+#### `$file->thumb()`
 The thumb method accepts now the option `clip` and can be used with any resizable image.
 ```php
 $file->thumb([
@@ -146,7 +168,7 @@ $file->thumb([
 
 Read more about the `thumb` method in the [Kirby3 Docs](https://getkirby.com/docs/reference/objects/file/thumb)
 
-### Helper `$file->getClip()`
+#### `$file->getClip()`
 Returns the clip data.
 
 Can be useful e.g with the `$file->thumb()` method.

classes/File.php

@@ -33,4 +33,44 @@ public function clip($width = null, $height = null) {
             'clip' => $this->getClip()
         ]);
     }
+
+    /**
+     * Create a srcset definition for the given sizes
+     * Sizes can be defined as a simple array. They can
+     * also be set up in the config with the thumbs.srcsets option.
+     *
+     * From: https://github.com/getkirby/kirby/blob/2b0bfd0b47a308e09117bac95ac674fdf50ce36c/src/Cms/FileModifications.php#L102
+     *
+     * @param array|string $sizes
+     * @return string
+     */
+    public function srcset($sizes = null): ?string
+    {
+        if (empty($sizes) === true) {
+            $sizes = $this->kirby()->option('thumbs.srcsets.default', []);
+        }
+
+        if (is_string($sizes) === true) {
+            $sizes = $this->kirby()->option('thumbs.srcsets.' . $sizes, []);
+        }
+
+        if (is_array($sizes) === false || empty($sizes) === true) {
+            return null;
+        }
+
+        $set = [];
+        foreach ($sizes as $key => $value) {
+            if (is_string($value) === true) {
+                $size = $key;
+                $attr = $value;
+            } else {
+                $size = $value;
+                $attr = $value . 'w';
+            }
+
+            $set[] = $this->clip($size)->url() . ' ' . $attr;
+        }
+
+        return implode(', ', $set);
+    }
 }

index.js

@@ -77,6 +77,7 @@
             isOpen (newVal, oldVal) {
                 if (newVal === true) {
                     this.setDialogWidth();
+                    this.showSpinner();
                     // dialog opened
                     this.$nextTick(() => {
                         let el = document.getElementById('croppr');

src/components/clipDialog.vue

@@ -22,7 +22,7 @@
       </span>
         </k-link>
         <nav class="k-list-item-options">
-            <k-clip-button v-if="resizable" @clicked="openClipDialog" />
+            <k-clip-button v-if="resizable && !disabled" @clicked="openClipDialog" />
             <slot name="options">
                 <k-button
                     v-if="flag"

src/components/clipListItem.vue

@@ -45,7 +45,7 @@
             v-else
             :layout="layout"
             icon="image"
-            @click="shouldOpen"
+            v-on="{ click: !disabled ? open : null }"
         >
             {{ empty || $t('field.files.empty') }}
         </k-empty>
@@ -94,12 +94,6 @@ export default {
         },
     },
     methods: {
-        // quickfix https://github.com/getkirby/kirby/issues/1752
-        shouldOpen() {
-           if (this.more && !this.disabled)  {
-               this.open();
-           }
-        },
         openClipDialog(id) {
             this.clip_image = this.value.find(item => item.id === id);
             this.$refs.clip.open();