Use resized images in panel view

Author: medienbaecker

commands/generate.php

@@ -55,10 +55,10 @@ class AltTextGenerator
 	public function __construct(CLI $cli)
 	{
 		$this->cli = $cli;
-		
+
 		// Use CLI prompt if provided, otherwise use config option
 		$prompt = $cli->arg('prompt') ?: kirby()->option('medienbaecker.alter.prompt');
-		
+
 		$this->config = [
 			'prompt' => $prompt,
 			'overwrite' => $cli->arg('overwrite'),
@@ -428,7 +428,7 @@ private function generateAltText($image, $language = null): string
 			throw new \Exception('Image file not found: ' . $image->root());
 		}
 
-		$resized = $image->resize(500);
+		$resized = $image->resize(500, 500);
 		$resized->publish();
 		$imageContent = $resized->read();
 
@@ -441,12 +441,12 @@ private function generateAltText($image, $language = null): string
 
 		// Get prompt - handle callback if provided
 		$prompt = $this->config['prompt'];
-		
+
 		// If prompt is callable, invoke it with the image
 		if (is_callable($prompt)) {
 			$prompt = $prompt($image);
 		}
-		
+
 		// Add language specification to prompt
 		if ($language) {
 			$prompt .= ' Write the alt text in ' . $language->name() . '.';

index.css

@@ -93,6 +93,7 @@
 								$allImages[] = [
 									'id' => $image->id(),
 									'url' => $image->url(),
+									'thumbUrl' => $image->resize(500, 500)->url(),
 									'filename' => $image->filename(),
 									'alt' => $altText,
 									'alt_reviewed' => $image->alt_reviewed()->toBool(),

index.js

@@ -37,8 +37,8 @@
 						</k-link>
 					</k-text>
 					<div class="page-group__badges">
-						<k-button v-if="pageGroup.pageStatus === 'draft' || pageGroup.hasParentDrafts" element="span" variant="filled" size="sm"
-							theme="negative">
+						<k-button v-if="pageGroup.pageStatus === 'draft' || pageGroup.hasParentDrafts" element="span"
+							variant="filled" size="sm" theme="negative">
 							{{ $t('page.status.draft') }}
 						</k-button>
 						<k-button element="span" variant="filled" size="sm">
@@ -54,7 +54,8 @@
 					<div v-for="image in pageGroup.images" :key="image.id"
 						:class="{ 'alt-review-card--has-changes': currentImages[image.id] && hasChanges(image.id) }"
 						class="alt-review-card">
-						<k-image-frame :src="image.url" :alt="getImageData(image.id).alt" back="pattern" ratio="3/2" />
+						<k-image-frame :src="image.thumbUrl" :alt="getImageData(image.id).alt" back="pattern"
+							ratio="3/2" />
 
 						<div class="alt-review-card__content">
 							<k-text class="alt-review-card__filename">
@@ -290,14 +291,14 @@ export default {
 					// Alt text changed - update alt text count
 					const hadAltText = original.alt && original.alt.trim() !== '';
 					const hasAltText = current.alt && current.alt.trim() !== '';
-					
+
 					if (!hadAltText && hasAltText) {
 						this.totals.withAltText++;
 					} else if (hadAltText && !hasAltText) {
 						this.totals.withAltText--;
 					}
 				}
-				
+
 				if (current.alt_reviewed !== original.alt_reviewed) {
 					// Review status changed - update reviewed count
 					if (current.alt_reviewed) {