Frank/dmtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Art: full-image thumbnails, detail page with copy-to-clipboard

Browse Source 
- gallery thumbnails now object-fit: contain (whole image, letterboxed),
  and a card links to the new detail page instead of the raw file
- /art/{id} detail page: large uncropped image, "Open full size",
  "Delete" (moved here from the gallery), and "Copy image"
- clipboard Stimulus controller copies the image to the OS clipboard
  (converts non-PNG via canvas) for pasting into WhatsApp etc.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Frank
2026-09-06 16:53:49 +02:00
co-authored by Claude Sonnet 5
parent f04c8ccc51
commit ed22b81e97
5 changed files with 147 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/art/index.html.twig
+10 -19
View File
@@ -18,26 +18,17 @@
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-3">
{% for art in artworks %}
<div class="col">
<div class="card shadow-sm h-100">
<a href="{{ path('app_art_file', {id: art.id}) }}" target="_blank" rel="noopener">
<img src="{{ path('app_art_file', {id: art.id}) }}" alt="{{ art.name }}"
class="card-img-top object-fit-cover" style="height: 180px;"
loading="lazy">
</a>
<div class="card-body py-2 d-flex justify-content-between align-items-start gap-2">
<div class="min-w-0">
<div class="fw-semibold text-truncate" title="{{ art.name }}">{{ art.name }}</div>
<div class="text-body-secondary small">
{{ art.uploadedAt|date('Y-m-d') }} · {{ (art.size / 1024)|round }} KB
</div>
</div>
<form method="post" action="{{ path('app_art_delete', {id: art.id}) }}"
onsubmit="return confirm('Delete “{{ art.name|e('js') }}”?')">
<input type="hidden" name="_token" value="{{ csrf_token('delete-art-' ~ art.id) }}">
<button class="btn btn-sm btn-outline-danger" title="Delete">&times;</button>
</form>
<a href="{{ path('app_art_show', {id: art.id}) }}" class="card shadow-sm h-100 text-decoration-none text-body">
<div class="art-thumb">
<img src="{{ path('app_art_file', {id: art.id}) }}" alt="{{ art.name }}" loading="lazy">
</div>
</div>
<div class="card-body py-2">
<div class="fw-semibold text-truncate" title="{{ art.name }}">{{ art.name }}</div>
<div class="text-body-secondary small">
{{ art.uploadedAt|date('Y-m-d') }} · {{ (art.size / 1024)|round }} KB
</div>
</div>
</a>
</div>
{% endfor %}
</div>
templates/art/show.html.twig
+38
View File
@@ -0,0 +1,38 @@
{% extends 'base.html.twig' %}
{% block title %}{{ art.name }} · Art · dmtools{% endblock %}
{% block body %}
<div class="d-flex justify-content-between align-items-start mb-3 gap-3 flex-wrap">
<div>
<a href="{{ path('app_art') }}" class="text-decoration-none small">&larr; Art</a>
<h1 class="h3 mb-0">{{ art.name }}</h1>
<span class="text-body-secondary small">
{{ art.uploadedAt|date('Y-m-d H:i') }} · {{ (art.size / 1024)|round }} KB
{%- if art.originalName %} · {{ art.originalName }}{% endif %}
</span>
</div>
<div class="d-flex gap-2 flex-wrap">
<button type="button" class="btn btn-outline-secondary btn-sm"
data-controller="clipboard"
data-clipboard-url-value="{{ path('app_art_file', {id: art.id}) }}"
data-action="clipboard#copy">Copy image</button>
<a href="{{ path('app_art_file', {id: art.id}) }}" target="_blank" rel="noopener"
class="btn btn-outline-secondary btn-sm">Open full size</a>
<form method="post" action="{{ path('app_art_delete', {id: art.id}) }}"
onsubmit="return confirm('Delete “{{ art.name|e('js') }}”?')">
<input type="hidden" name="_token" value="{{ csrf_token('delete-art-' ~ art.id) }}">
<button class="btn btn-outline-danger btn-sm">Delete</button>
</form>
</div>
</div>
<div class="card shadow-sm">
<div class="card-body text-center art-full">
<img src="{{ path('app_art_file', {id: art.id}) }}" alt="{{ art.name }}">
</div>
</div>
{% endblock %}