Clean up thumbnails layout

This commit is contained in:
Jeremy Stretch 2025-07-29 13:53:39 -04:00
parent 22dfa87c3c
commit d55eff58b9
5 changed files with 31 additions and 18 deletions

View File

@ -102,7 +102,7 @@ class ObjectImageAttachmentsView(ConditionalLoginRequiredMixin, View):
base_template = None base_template = None
tab = ViewTab( tab = ViewTab(
label=_('Images'), label=_('Images'),
# badge=lambda obj: obj.imageattachments.count(), badge=lambda obj: obj.images.count(),
permission='extras.view_imageattachment', permission='extras.view_imageattachment',
weight=6000 weight=6000
) )

Binary file not shown.

View File

@ -81,6 +81,14 @@ img.plugin-icon {
height: auto; height: auto;
} }
// Image attachment thumbnails
.thumbnail {
max-width: 200px;
img {
border: 1px solid #606060;
}
}
body[data-bs-theme=dark] { body[data-bs-theme=dark] {
// Assuming icon is black/white line art, invert it and tone down brightness // Assuming icon is black/white line art, invert it and tone down brightness
img.plugin-icon { img.plugin-icon {

View File

@ -56,8 +56,13 @@
<div class="card"> <div class="card">
<h2 class="card-header">{% trans "Image" %}</h2> <h2 class="card-header">{% trans "Image" %}</h2>
<div class="card-body"> <div class="card-body">
<a href="{{ object.image.url }}"> <a href="{{ object.image.url }}" title="{{ object.description }}">
<img src="{{ object.image.url }}" height="{{ image.height }}" width="{{ image.width }}" alt="{{ object }}" /> <img
src="{{ object.image.url }}"
height="{{ image.height }}"
width="{{ image.width }}"
alt="{{ object.name }}"
/>
</a> </a>
</div> </div>
</div> </div>

View File

@ -3,24 +3,24 @@
{% load thumbnail %} {% load thumbnail %}
{% block content %} {% block content %}
<div class="container"> <div class="d-flex flex-wrap">
<div class="row row-cards">
{% for object in image_attachments %} {% for object in image_attachments %}
<div class="col"> <div class="thumbnail m-2">
<div class="card card-sm"> {% thumbnail object.image "200x200" crop="center" as tn %}
{% thumbnail object.image "200x200" crop="center" as tn %} <a href="{{ object.get_absolute_url }}" class="d-block" title="{{ object.description }}">
<a href="{{ object.get_absolute_url }}" class="d-block"> <img
<img src="{{ tn.url }}" width="{{ tn.width }}" height="{{ tn.height }}" class="card-img-top" /> src="{{ tn.url }}"
</a> width="{{ tn.width }}"
{% endthumbnail %} height="{{ tn.height }}"
<div class="card-body p-1"> class="rounded"
<div class="text-center"> alt="{{ object.name }}"
<small class="text-secondary">{{ object }}</small> />
</div> </a>
</div> {% endthumbnail %}
<div class="text-center text-secondary text-truncate fs-5">
{{ object }}
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div>
{% endblock %} {% endblock %}