Add new custom Thumbnail component to display a preview of the image being edited in the drawer along with dimensions and file name metadata.

Author: scottboms

classes/CheckFiles.php

@@ -38,6 +38,7 @@ public function findImagesWithoutContentOrTemplate(): array
 					'blueprint' => $file->blueprint(),
 					'mime' => $file->mime(),
 					'thumbUrl' => $file->resize(300)->url(),
+					'size' => $file->dimensions()->width() . ' x ' . $file->dimensions()->height() . ' px' ?? null,
 					'parent' => $parent?->title()->value() ?? null,
 					'parentId' => $file->parent()->id(),
 					'fileUrl' => '/pages/' . $parentPanelUrl . '/files/' . $file->filename(),

index.js

@@ -17,7 +17,7 @@
 	info: [
 		'homepage' => 'https://github.com/scottboms/template-checker'
 	],
-	version: '1.1.1',
+	version: '1.2.0',
 	license: 'MIT',
 	extends: [
 	'options' => [],

index.php

@@ -2,7 +2,7 @@
 	"name": "template-checker",
 	"description": "Template Checker",
 	"author": "Scott Boms <[email protected]>",
-	"version": "1.1.1",
+	"version": "1.2.0",
 	"type": "kirby-plugin",
 	"license": "MIT",
 	"scripts": {

package.json

@@ -107,6 +107,15 @@ export default {
 					title: 'Quick Edit',
 					icon: 'image',
 					fields: {
+						'preview': {
+							'label': 'Preview',
+							'type': 'thumbnail',
+							'width': '1/1',
+							'src': image.thumbUrl,
+							'alt': image.alt || '',
+							'size': image.size,
+							'filename': image.filename
+						},
 						...(this.availableTemplates.length === 0 
 							? {
 								'notice': {
@@ -130,20 +139,19 @@ export default {
 								}
 							}
 						),
-						'filename': {
-							'label': 'File',
-							'type': 'hidden',
-							'text': `${image.id}`,
-							'width': '1/1',
-						},
-						
 						'alt': {
 							'label': 'Alt Text',
 							'type': 'textarea',
 							'buttons': false,
 							'size': 'medium',
 							'value': `${image.alt}`,
-							'width': '1.1'
+							'width': '1/1'
+						},
+						'filename': {
+							'label': 'File',
+							'type': 'hidden',
+							'text': `${image.id}`,
+							'width': '1/1',
 						}
 					},
 					value: {

src/components/ImageList.vue

@@ -0,0 +1,21 @@
+<template>
+	<k-field :label="label">
+			<k-item
+				:image="{ src: src }"
+				:text="filename"
+				:info="size"
+			/>
+	</k-field>
+</template>
+
+<script>
+export default {
+  props: {
+		label: String,
+    src: String,
+    alt: String,
+    filename: String,
+		size: String
+  }
+};
+</script>

src/components/Thumbnail.vue

@@ -1,7 +1,11 @@
 import ImageList from "./components/ImageList.vue";
+import Thumbnail from "./components/Thumbnail.vue";
 
 panel.plugin("scottboms/template-checker", {
 	components: {
 		"k-image-template-checker": ImageList,
+	},
+	fields: {
+		thumbnail: Thumbnail
 	}
 });