From d55eff58b94b75fb55102fce84e7d1fd9e94db35 Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@netboxlabs.com>
Date: Tue, 29 Jul 2025 13:53:39 -0400
Subject: [PATCH] Clean up thumbnails layout

---
 netbox/netbox/views/generic/feature_views.py  |   2 +-
 netbox/project-static/dist/netbox.css         | Bin 555402 -> 555469 bytes
 .../project-static/styles/custom/_misc.scss   |   8 +++++
 netbox/templates/extras/imageattachment.html  |   9 ++++--
 .../extras/object_imageattachments.html       |  30 +++++++++---------
 5 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/netbox/netbox/views/generic/feature_views.py b/netbox/netbox/views/generic/feature_views.py
index 28d4893df..efa45541f 100644
--- a/netbox/netbox/views/generic/feature_views.py
+++ b/netbox/netbox/views/generic/feature_views.py
@@ -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
     )
diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css
index 4ceb4e5240cee70bf5f71c3480ab6a90ae36cf2c..91d3ea25c940b6865149a7fcf73859cfe5816f65 100644
GIT binary patch
delta 89
zcmeDBta$dbVnYjK3sVbo3rh=Y3tJ2O7LGX;ntCM}rMXFYiJ3Xoxrr6J<(VlZ8CFIH
i1_c$h2q}fk-1O-Sl{tjj%nU$qdSVub)by<t99IF@r62?V

delta 35
rcmX^6S+VQ0VnYjK3sVbo3rh=Y3tJ2O7LGX;)046|B&YwV;J69^0F@2!

diff --git a/netbox/project-static/styles/custom/_misc.scss b/netbox/project-static/styles/custom/_misc.scss
index 2ba3262f6..5233616ac 100644
--- a/netbox/project-static/styles/custom/_misc.scss
+++ b/netbox/project-static/styles/custom/_misc.scss
@@ -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 {
diff --git a/netbox/templates/extras/imageattachment.html b/netbox/templates/extras/imageattachment.html
index 9d0a4e479..4f267cf23 100644
--- a/netbox/templates/extras/imageattachment.html
+++ b/netbox/templates/extras/imageattachment.html
@@ -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>
diff --git a/netbox/templates/extras/object_imageattachments.html b/netbox/templates/extras/object_imageattachments.html
index 010ce236d..9b5c9c1f0 100644
--- a/netbox/templates/extras/object_imageattachments.html
+++ b/netbox/templates/extras/object_imageattachments.html
@@ -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 %}