repos
/
website
1
Fork 0
Code Issues 1 Pull Requests 24 Activity

Add description to image lightbox

This commit is contained in:
Jake Howard 2024-04-07 20:05:31 +01:00
parent f1934ecdaa
commit a1808f4bb4
Signed by: jake
GPG Key ID: 57AFB45680EDD477
3 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
static/src/scss/_content.scss
View File

@ -56,6 +56,9 @@ section.content {
.gslide-image img {
object-fit: contain !important;
// Manually set sizes, as mermaid images are very small
width: 80vw !important;
&[src*="mermaid.ink"] {
@include dark-mode {
filter: invert(100%);

2
website/common/templates/common/blocks/image-caption.html
View File

@ -2,7 +2,7 @@
<figure>
<div class="image">
<a href="{% image_url value.image 'original' %}" class="glightbox" data-gallery="content" data-height="70vh" data-width="95vw" data-alt="{{ value.caption|richtext|extract_text }}">
<a href="{% image_url value.image 'original' %}" class="glightbox" data-gallery="content" data-height="70vh" data-alt="{{ value.caption|richtext|extract_text }}" data-title="{{ value.caption|richtext|extract_text }}">
<img src="{% image_url value.image 'width-1500' %}" alt="{{ value.caption|richtext|extract_text }}" loading="lazy" decoding="async" />
</a>
</div>

2
website/contrib/mermaid_block/templates/contrib/blocks/mermaid.html
View File

@ -2,7 +2,7 @@
<figure>
<div class="image">
<a href="https://mermaid.ink/svg/{{ value.pako }}" data-gallery="content" class="glightbox" data-type="image" data-height="60vh" data-width="95vw" data-alt="{{ value.caption|richtext|extract_text }}">
<a href="https://mermaid.ink/svg/{{ value.pako }}" data-gallery="content" class="glightbox" data-type="image" data-height="70vh" data-alt="{{ value.caption|richtext|extract_text }}" data-title="{{ value.caption|richtext|extract_text }}">
<img src="https://mermaid.ink/svg/{{ value.pako }}" referrerpolicy="no-referrer" alt="{{ value.caption|richtext|extract_text }}" loading="lazy" decoding="async" />
</a>
</div>