pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 07:51:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Display images on park and ride cards using new card image field

Browse Source 
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
This commit is contained in:
pac7
2025-09-22 14:53:02 +00:00
parent 120f215cad
commit 331329d1ec
2 changed files with 43 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
templates/cotton/park_card.html
View File

@@ -124,36 +124,54 @@ Features:
{% else %} {% else %}
{# Enhanced Grid View Item #} {# 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 }}"> <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 #} {# Park Image #}
<div class="h-2 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500"></div> <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="p-6">
<div class="flex items-start justify-between mb-4"> <div class="mb-4">
<h2 class="text-xl font-bold line-clamp-2 flex-1 mr-3"> <h2 class="text-xl font-bold line-clamp-2 mb-2">
{% if park.slug %} {% if park.slug %}
<a href="{% url 'parks:park_detail' 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 }} {{ park.name }}
</a> </a>
{% else %} {% 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 }} {{ park.name }}
</span> </span>
{% endif %} {% endif %}
</h2> </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> </div>
{% if park.operator %} {% if park.operator %}

8
templates/cotton/ride_card.html
View File

@@ -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 }}"> <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 --> <!-- Ride image -->
<div class="relative h-48 bg-gradient-to-br {{ fallback_gradient }}"> <div class="relative h-48 bg-gradient-to-br {{ fallback_gradient }}">
{% if ride.image %} {% if ride.card_image %}
<img src="{{ ride.image.url }}" <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 }}" alt="{{ ride.name }}"
class="w-full h-full object-cover"> class="w-full h-full object-cover">
{% else %} {% else %}