Put ALT badge on attached images with alt-text

static/css/style.css

@@ -1509,6 +1509,7 @@ form .post {
 }
 
 .post .attachments a {
+    position: relative;
     display: block;
     width: 100%;
 }
@@ -1521,6 +1522,18 @@ form .post {
     max-height: 400px;
 }
 
+.post .attachments .badge {
+    position: absolute;
+    bottom: 6px;
+    left: 6px;
+    padding: 0 4px;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: bold;
+    color: var(--color-text-in-highlight);
+    background: rgb(0 0 0 / 60%);
+}
+
 .post .attachments video {
     max-width: 100%;
     aspect-ratio: 16/9;

templates/activities/_post.html

@@ -46,6 +46,9 @@
                         <a href="{{ attachment.full_url.relative }}" class="image" target="_blank"
                             _="on click halt the event then call imageviewer.show(me)">
                             <img src="{{ attachment.thumbnail_url.relative }}" title="{{ attachment.name }}" alt="{{ attachment.name|default:'(no description)' }}" loading="lazy" data-original-url="{{ attachment.full_url.relative }}">
+                            {% if attachment.name %}
+                                <div class="badge">ALT</div>
+                            {% endif %}
                         </a>
                     {% elif attachment.is_video %}
                         <a href="{{ attachment.full_url.relative }}" class="video">