actors / poster images

This commit is contained in:
Lars Behrends
2025-10-17 13:45:57 +02:00
parent 929ee43001
commit f4c1cfc164
6 changed files with 195 additions and 54 deletions

View File

@@ -104,7 +104,7 @@
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
{% if movie.poster_url %}
<img class="rounded me-3" style="width: 64px; height: 96px; object-fit: cover;" src="{{ movie.poster_url }}" alt="{{ movie.title }}">
<img class="rounded me-3" style="width: 64px; height: 96px; object-fit: contain; background-color: #f8f9fa;" src="{{ movie.poster_url }}" alt="{{ movie.title }}">
{% else %}
<div class="bg-light rounded me-3 d-flex align-items-center justify-content-center" style="width: 64px; height: 96px;">
<svg class="text-muted" width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -157,8 +157,8 @@
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<div class="card h-100">
{% if movie.poster_url %}
<div class="position-relative" style="aspect-ratio: 2/3; overflow: hidden;">
<img src="{{ movie.poster_url }}" alt="{{ movie.title }}" class="card-img-top" style="width: 100%; height: 100%; object-fit: cover;">
<div class="position-relative" style="background-color: #f8f9fa; border-radius: 0.375rem; overflow: hidden;">
<img src="{{ movie.poster_url }}" alt="{{ movie.title }}" class="card-img-top w-100" style="max-height: 300px; object-fit: contain;">
</div>
{% else %}
<div class="d-flex align-items-center justify-content-center bg-light" style="aspect-ratio: 2/3; min-height: 200px;">
@@ -192,7 +192,7 @@
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
{% if movie.poster_url %}
<img class="rounded" style="width: 64px; height: 96px; object-fit: cover;" src="{{ movie.poster_url }}" alt="{{ movie.title }}">
<img class="rounded" style="width: 64px; height: 96px; object-fit: contain; background-color: #f8f9fa;" src="{{ movie.poster_url }}" alt="{{ movie.title }}">
{% else %}
<div class="bg-light rounded d-flex align-items-center justify-content-center" style="width: 64px; height: 96px;">
<svg class="text-muted" width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor">

View File

@@ -17,9 +17,9 @@
<!-- Video poster -->
<div class="col-md-4">
<div class="card-body">
<div style="aspect-ratio: 2/3; background-color: #f8f9fa; border-radius: 0.375rem; overflow: hidden;">
<div style="background-color: #f8f9fa; border-radius: 0.375rem; overflow: hidden;">
{% if movie.poster_url %}
<img src="{{ movie.poster_url }}" alt="{{ movie.title }}" class="w-100 h-100" style="object-fit: cover;">
<img src="{{ movie.poster_url }}" alt="{{ movie.title }}" class="w-100" style="max-height: 400px; object-fit: contain;">
{% else %}
<div class="w-100 h-100 d-flex align-items-center justify-content-center">
<svg class="text-muted" width="96" height="96" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -111,7 +111,7 @@
<!-- Additional details -->
<div class="row g-3">
<!-- Cast & Crew -->
{% if movie.cast or movie.director or movie.writer %}
{% if movie.cast or movie.director or movie.writer or movie.actors %}
<div class="col-md-6">
<h3 class="h6 fw-semibold text-dark mb-3">Cast & Crew</h3>
<dl class="row g-2">
@@ -134,6 +134,29 @@
</div>
{% endif %}
</dl>
<!-- Actors with thumbnails -->
{% if movie.actors %}
<div class="mt-3">
<h4 class="h6 fw-semibold text-dark mb-2">Performers</h4>
<div class="d-flex flex-wrap gap-2">
{% for actor in movie.actors %}
<div class="d-flex flex-column align-items-center" style="width: 60px;">
{% if actor.thumbnail_path %}
<img src="{{ actor.thumbnail_path }}" alt="{{ actor.name }}" class="rounded-circle mb-1" style="width: 40px; height: 40px; object-fit: cover;">
{% else %}
<div class="rounded-circle bg-light d-flex align-items-center justify-content-center mb-1" style="width: 40px; height: 40px;">
<svg class="text-muted" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg>
</div>
{% endif %}
<span class="small text-muted text-center" style="font-size: 0.75rem;">{{ actor.name }}</span>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% endif %}