Improve showcase galleries for mobile apps

Author: simonhamp

database/factories/ShowcaseFactory.php

@@ -4,6 +4,7 @@
 
 use App\Models\User;
 use Illuminate\Database\Eloquent\Factories\Factory;
+use Illuminate\Support\Facades\Storage;
 
 /**
  * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Showcase>
@@ -106,4 +107,75 @@ public function both(): static
             'linux_download_url' => fake()->optional(0.5)->url(),
         ]);
     }
+
+    public function withScreenshots(int $count = 3, bool $tall = false): static
+    {
+        return $this->state(function (array $attributes) use ($count, $tall) {
+            $screenshots = [];
+
+            for ($i = 0; $i < $count; $i++) {
+                $screenshots[] = $this->generatePlaceholderScreenshot($tall);
+            }
+
+            return ['screenshots' => $screenshots];
+        });
+    }
+
+    public function withTallScreenshots(int $count = 3): static
+    {
+        return $this->withScreenshots($count, tall: true);
+    }
+
+    public function withWideScreenshots(int $count = 3): static
+    {
+        return $this->withScreenshots($count, tall: false);
+    }
+
+    protected function generatePlaceholderScreenshot(bool $tall = false): string
+    {
+        $width = $tall ? 390 : 1280;
+        $height = $tall ? 844 : 720;
+
+        $image = imagecreatetruecolor($width, $height);
+
+        $colors = [
+            [99, 102, 241],   // Indigo
+            [139, 92, 246],   // Purple
+            [236, 72, 153],   // Pink
+            [14, 165, 233],   // Sky
+            [34, 197, 94],    // Green
+            [249, 115, 22],   // Orange
+        ];
+
+        $color = fake()->randomElement($colors);
+        $bgColor = imagecolorallocate($image, $color[0], $color[1], $color[2]);
+        imagefill($image, 0, 0, $bgColor);
+
+        $white = imagecolorallocate($image, 255, 255, 255);
+
+        if ($tall) {
+            // Draw phone UI elements
+            imagefilledrectangle($image, 20, 60, $width - 20, 120, $white);
+            imagefilledrectangle($image, 20, 140, $width - 20, 400, imagecolorallocatealpha($image, 255, 255, 255, 80));
+            imagefilledrectangle($image, 20, 420, ($width - 20) / 2 - 10, 600, imagecolorallocatealpha($image, 255, 255, 255, 80));
+            imagefilledrectangle($image, ($width - 20) / 2 + 10, 420, $width - 20, 600, imagecolorallocatealpha($image, 255, 255, 255, 80));
+        } else {
+            // Draw desktop UI elements
+            imagefilledrectangle($image, 0, 0, $width, 40, imagecolorallocatealpha($image, 0, 0, 0, 80));
+            imagefilledrectangle($image, 20, 60, 250, $height - 20, imagecolorallocatealpha($image, 255, 255, 255, 80));
+            imagefilledrectangle($image, 270, 60, $width - 20, $height - 20, imagecolorallocatealpha($image, 255, 255, 255, 90));
+        }
+
+        $filename = 'showcase-screenshots/'.fake()->uuid().'.png';
+        Storage::disk('public')->makeDirectory('showcase-screenshots');
+
+        ob_start();
+        imagepng($image);
+        $imageData = ob_get_clean();
+        imagedestroy($image);
+
+        Storage::disk('public')->put($filename, $imageData);
+
+        return $filename;
+    }
 }

database/seeders/ShowcaseSeeder.php

@@ -12,19 +12,21 @@ class ShowcaseSeeder extends Seeder
      */
     public function run(): void
     {
-        // 10 approved showcases (mix of platforms)
-        Showcase::factory(4)->approved()->mobile()->create();
-        Showcase::factory(4)->approved()->desktop()->create();
-        Showcase::factory(2)->approved()->both()->create();
+        // Approved showcases with screenshots
+        Showcase::factory(2)->approved()->mobile()->withTallScreenshots(3)->create();
+        Showcase::factory(2)->approved()->mobile()->create();
+        Showcase::factory(2)->approved()->desktop()->withWideScreenshots(3)->create();
+        Showcase::factory(2)->approved()->desktop()->create();
+        Showcase::factory(2)->approved()->both()->withTallScreenshots(2)->create();
 
-        // 5 recently approved (will show as "new")
-        Showcase::factory(2)->recentlyApproved()->mobile()->create();
-        Showcase::factory(2)->recentlyApproved()->desktop()->create();
-        Showcase::factory(1)->recentlyApproved()->both()->create();
+        // Recently approved (will show as "new") with screenshots
+        Showcase::factory(2)->recentlyApproved()->mobile()->withTallScreenshots(4)->create();
+        Showcase::factory(2)->recentlyApproved()->desktop()->withWideScreenshots(3)->create();
+        Showcase::factory(1)->recentlyApproved()->both()->withWideScreenshots(2)->create();
 
-        // 5 pending review
-        Showcase::factory(2)->pending()->mobile()->create();
-        Showcase::factory(2)->pending()->desktop()->create();
+        // Pending review
+        Showcase::factory(2)->pending()->mobile()->withTallScreenshots(2)->create();
+        Showcase::factory(2)->pending()->desktop()->withWideScreenshots(2)->create();
         Showcase::factory(1)->pending()->both()->create();
     }
 }

resources/views/components/showcase-card.blade.php

@@ -44,7 +44,7 @@ class="group relative overflow-hidden rounded-2xl border border-gray-200 bg-whit
                         x-transition:enter-end="opacity-100"
                         src="{{ Storage::disk('public')->url($screenshot) }}"
                         alt="{{ $showcase->title }} screenshot {{ $index + 1 }}"
-                        class="absolute inset-0 w-full h-full object-cover"
+                        class="absolute inset-0 w-full h-full object-contain"
                     >
                 @endforeach
 
@@ -90,7 +90,7 @@ class="w-2 h-2 rounded-full transition-colors"
             <img
                 src="{{ Storage::disk('public')->url($showcase->image) }}"
                 alt="{{ $showcase->title }}"
-                class="w-full h-full object-cover"
+                class="w-full h-full object-contain"
             >
         @else
             <div class="w-full h-full flex items-center justify-center">