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
tab = ViewTab(
label=_('Images'),
# badge=lambda obj: obj.imageattachments.count(),
badge=lambda obj: obj.images.count(),
permission='extras.view_imageattachment',
weight=6000
)

Binary file not shown.

View File

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

View File

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

View File

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