From 026e1be357290c0ef92ebab1692030b1f2b6454e Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Wed, 1 Mar 2023 09:02:20 +0900
Subject: [PATCH] Put ALT badge on attached images with alt-text

---
 static/css/style.css            | 13 +++++++++++++
 templates/activities/_post.html |  3 +++
 2 files changed, 16 insertions(+)

diff --git a/static/css/style.css b/static/css/style.css
index 8ad8e57..97816fd 100644
--- a/static/css/style.css
+++ b/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;
diff --git a/templates/activities/_post.html b/templates/activities/_post.html
index f514cc1..1c1a6e6 100644
--- a/templates/activities/_post.html
+++ b/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">