From 331329d1ecc88720cae45326785f5c1314ff87d0 Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Mon, 22 Sep 2025 14:53:02 +0000
Subject: [PATCH] Display images on park and ride cards using new card image
 field

Update park and ride card templates to utilize the `card_image` field for displaying images, with fallbacks to existing image fields or placeholders.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0bdea3fb-49ea-4863-b501-fa6f5af0cbf0
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/0bdea3fb-49ea-4863-b501-fa6f5af0cbf0/0NbnR7B
---
 templates/cotton/park_card.html | 56 ++++++++++++++++++++++-----------
 templates/cotton/ride_card.html |  8 +++--
 2 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/templates/cotton/park_card.html b/templates/cotton/park_card.html
index 29e551f7..e09be47b 100644
--- a/templates/cotton/park_card.html
+++ b/templates/cotton/park_card.html
@@ -124,36 +124,54 @@ Features:
     {% else %}
         {# Enhanced Grid View Item #}
         <article class="group bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 hover:-rotate-1 overflow-hidden {{ class }}">
-            {# Card Header with Gradient #}
-            <div class="h-2 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500"></div>
+            {# Park Image #}
+            <div class="relative h-48 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500">
+                {% if park.card_image %}
+                    <img src="{{ park.card_image.image.url }}" 
+                         alt="{{ park.name }}" 
+                         class="w-full h-full object-cover">
+                {% elif park.photos.first %}
+                    <img src="{{ park.photos.first.image.url }}" 
+                         alt="{{ park.name }}" 
+                         class="w-full h-full object-cover">
+                {% else %}
+                    <div class="flex items-center justify-center h-full">
+                        <svg class="w-16 h-16 text-white opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
+                        </svg>
+                    </div>
+                {% endif %}
+                
+                {# Status Badge Overlay #}
+                <div class="absolute top-3 right-3">
+                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold border shrink-0 bg-white/90 backdrop-blur-sm
+                               {% if park.status == 'operating' or park.status == 'OPERATING' %}text-green-700 border-green-200
+                               {% elif park.status == 'closed' or park.status == 'CLOSED_PERM' or park.status == 'closed_permanently' or park.status == 'closed_perm' %}text-red-700 border-red-200
+                               {% elif park.status == 'seasonal' %}text-blue-700 border-blue-200
+                               {% elif park.status == 'closed_temp' or park.status == 'CLOSED_TEMP' %}text-yellow-700 border-yellow-200
+                               {% elif park.status == 'under_construction' or park.status == 'UNDER_CONSTRUCTION' %}text-blue-700 border-blue-200
+                               {% elif park.status == 'demolished' or park.status == 'DEMOLISHED' %}text-gray-700 border-gray-200
+                               {% elif park.status == 'relocated' or park.status == 'RELOCATED' %}text-purple-700 border-purple-200
+                               {% else %}text-gray-700 border-gray-200{% endif %}">
+                        {{ park.get_status_display }}
+                    </span>
+                </div>
+            </div>
             
             <div class="p-6">
-                <div class="flex items-start justify-between mb-4">
-                    <h2 class="text-xl font-bold line-clamp-2 flex-1 mr-3">
+                <div class="mb-4">
+                    <h2 class="text-xl font-bold line-clamp-2 mb-2">
                         {% if park.slug %}
                             <a href="{% url 'parks:park_detail' park.slug %}"
-                               class="bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300 bg-clip-text text-transparent hover:from-blue-600 hover:to-purple-600 dark:hover:from-blue-400 dark:hover:to-purple-400 transition-all duration-300">
+                               class="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-300">
                                 {{ park.name }}
                             </a>
                         {% else %}
-                            <span class="bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300 bg-clip-text text-transparent">
+                            <span class="text-gray-900 dark:text-white">
                                 {{ park.name }}
                             </span>
                         {% endif %}
                     </h2>
-                    
-                    {# Status Badge #}
-                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold border shrink-0
-                               {% if park.status == 'operating' or park.status == 'OPERATING' %}bg-green-50 text-green-700 border-green-200 dark:bg-green-900/20 dark:text-green-400 dark:border-green-800
-                               {% elif park.status == 'closed' or park.status == 'CLOSED_PERM' or park.status == 'closed_permanently' or park.status == 'closed_perm' %}bg-red-50 text-red-700 border-red-200 dark:bg-red-900/20 dark:text-red-400 dark:border-red-800
-                               {% elif park.status == 'seasonal' %}bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-800
-                               {% elif park.status == 'closed_temp' or park.status == 'CLOSED_TEMP' %}bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-400 dark:border-yellow-800
-                               {% elif park.status == 'under_construction' or park.status == 'UNDER_CONSTRUCTION' %}bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-800
-                               {% elif park.status == 'demolished' or park.status == 'DEMOLISHED' %}bg-gray-50 text-gray-700 border-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600
-                               {% elif park.status == 'relocated' or park.status == 'RELOCATED' %}bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-900/20 dark:text-purple-400 dark:border-purple-800
-                               {% else %}bg-gray-50 text-gray-700 border-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600{% endif %}">
-                        {{ park.get_status_display }}
-                    </span>
                 </div>
                 
                 {% if park.operator %}
diff --git a/templates/cotton/ride_card.html b/templates/cotton/ride_card.html
index ffce1f60..826e60bf 100644
--- a/templates/cotton/ride_card.html
+++ b/templates/cotton/ride_card.html
@@ -64,8 +64,12 @@ Features:
 <div class="ride-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-lg transition-all duration-300 {{ class }}">
     <!-- Ride image -->
     <div class="relative h-48 bg-gradient-to-br {{ fallback_gradient }}">
-        {% if ride.image %}
-            <img src="{{ ride.image.url }}" 
+        {% if ride.card_image %}
+            <img src="{{ ride.card_image.image.url }}" 
+                 alt="{{ ride.name }}" 
+                 class="w-full h-full object-cover">
+        {% elif ride.photos.first %}
+            <img src="{{ ride.photos.first.image.url }}" 
                  alt="{{ ride.name }}" 
                  class="w-full h-full object-cover">
         {% else %}