Put ALT badge on attached images with alt-text

This commit is contained in:
TAKAHASHI Shuuji 2023-03-01 09:02:20 +09:00 committed by GitHub
parent 9e016aaa5f
commit 026e1be357
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 0 deletions

View file

@ -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;

View file

@ -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">