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 { .post .attachments a {
position: relative;
display: block; display: block;
width: 100%; width: 100%;
} }
@ -1521,6 +1522,18 @@ form .post {
max-height: 400px; 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 { .post .attachments video {
max-width: 100%; max-width: 100%;
aspect-ratio: 16/9; aspect-ratio: 16/9;

View File

@ -46,6 +46,9 @@
<a href="{{ attachment.full_url.relative }}" class="image" target="_blank" <a href="{{ attachment.full_url.relative }}" class="image" target="_blank"
_="on click halt the event then call imageviewer.show(me)"> _="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 }}"> <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> </a>
{% elif attachment.is_video %} {% elif attachment.is_video %}
<a href="{{ attachment.full_url.relative }}" class="video"> <a href="{{ attachment.full_url.relative }}" class="video">