Put ALT badge on attached images with alt-text
This commit is contained in:
parent
9e016aaa5f
commit
026e1be357
|
@ -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;
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in New Issue