Merge pull request #64 from s3ththompson/image-preview-thumbnails

Replace original images with thumbnails
sylvainjule · Mar 10, 2021 · ea23cb5 · ea23cb5
2 parents a47689e + 825ec4f
commit ea23cb5
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/index.js b/index.js
diff --git a/lib/pagetable.php b/lib/pagetable.php
@@ -192,12 +192,11 @@
             );
 
             $data['rows'] = array();
-            $thumb = ['width'  => 100, 'height' => 100];
 
             foreach ($this->pages as $item) {
                 $permissions = $item->permissions();
                 $blueprint   = $item->blueprint();
-                $image       = $item->panelImage($this->image, $thumb);
+                $image       = $item->panelImage($this->image ?? []);
 
                 $baseOptions = [
                     'id'          => $item->id(),

diff --git a/src/components/PageTable.vue b/src/components/PageTable.vue
@@ -29,16 +29,16 @@
                 <span v-if="props.column.field == 'p-cover-image' && options.showImage">
                     <k-link :to="props.row.link">
                         <figure class="k-list-item-image">
-                            <k-image v-if="props.row.image && props.row.image.url" :src="props.row.image.url" :back="props.row.image.back || 'pattern'" :cover="props.row.image.cover" />
+                            <k-image v-if="imageOptions(props.row.image)" v-bind="imageOptions(props.row.image)" />
                             <k-icon v-else v-bind="props.row.icon" />
                         </figure>
                     </k-link>
                 </span>
                 <span v-else-if="props.column.field == 'p-options' && showOptions">
                     <div class="k-list-item-options">
                         <slot name="options">
-                            <k-status-icon v-if="props.row.flag && options.showStatus"
-                                           v-bind="props.row.flag"
+                            <k-status-icon v-if="props.row.statusIcon && options.showStatus"
+                                           v-bind="props.row.statusIcon"
                                            class="k-list-item-status" />
 
                             <k-button v-if="props.row.options && options.showActions"
@@ -95,6 +95,7 @@
 
 <script>
 import { VueGoodTable } from 'vue-good-table'
+
 export default {
     extends: 'k-pages-section',
     components: { VueGoodTable },
@@ -291,6 +292,24 @@ export default {
             // store current state
             this.storeCurrentState()
         },
+        imageOptions(image) {
+            if (!image || image.length === 0 || !image.url) {
+                return false;
+            }
+
+            let src    = image.list.url;
+            let srcset = image.list.srcset;
+            if (!src) {
+                return false;
+            }
+            let result = {
+                src: src,
+                srcset: srcset,
+                back: image.back || "black",
+                cover: image.cover
+            };
+            return result;
+        },
     }
 };
 </script>