Adds image preview back on the table (#12739)

* adds image preview on image attachment #12627

* adds bootstrap initialization for hx-trigger=load #12627

---------

Co-authored-by: jeremystretch <jstretch@netboxlabs.com>

netbox/extras/tables/tables.py

@@ -22,6 +22,14 @@ __all__ = (
     'WebhookTable',
 )
 
+IMAGEATTACHMENT_IMAGE = '''
+{% if record.image %}
+  <a class="image-preview" href="{{ record.image.url }}" target="_blank">{{ record }}</a>
+{% else %}
+  &mdash;
+{% endif %}
+'''
+
 
 class CustomFieldTable(NetBoxTable):
     name = tables.Column(
@@ -96,6 +104,9 @@ class ImageAttachmentTable(NetBoxTable):
     parent = tables.Column(
         linkify=True
     )
+    image = tables.TemplateColumn(
+        template_code=IMAGEATTACHMENT_IMAGE,
+    )
     size = tables.Column(
         orderable=False,
         verbose_name='Size (bytes)'

netbox/project-static/src/htmx.ts

@@ -2,9 +2,10 @@ import { getElements, isTruthy } from './util';
 import { initButtons } from './buttons';
 import { initSelect } from './select';
 import { initObjectSelector } from './objectSelector';
+import { initBootstrap } from './bs';
 
 function initDepedencies(): void {
-  for (const init of [initButtons, initSelect, initObjectSelector]) {
+  for (const init of [initButtons, initSelect, initObjectSelector, initBootstrap]) {
     init();
   }
 }
@@ -22,4 +23,8 @@ export function initHtmx(): void {
       }
     }
   }
+
+  for (const element of getElements('[hx-trigger=load]')) {
+    element.addEventListener('htmx:afterSettle', initDepedencies);
+  }
 }