repos/website
1
Fork 0
Code Issues 1 Pull requests 23 Activity

Add description to image lightbox

Browse source
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 { .gslide-image img {
object-fit: contain !important; object-fit: contain !important;
// Manually set sizes, as mermaid images are very small
width: 80vw !important;
&[src*="mermaid.ink"] { &[src*="mermaid.ink"] {
@include dark-mode { @include dark-mode {
filter: invert(100%); filter: invert(100%);

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

@ -2,7 +2,7 @@
<figure> <figure>
<div class="image"> <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" /> <img src="{% image_url value.image 'width-1500' %}" alt="{{ value.caption|richtext|extract_text }}" loading="lazy" decoding="async" />
</a> </a>
</div> </div>

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

@ -2,7 +2,7 @@
<figure> <figure>
<div class="image"> <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" /> <img src="https://mermaid.ink/svg/{{ value.pako }}" referrerpolicy="no-referrer" alt="{{ value.caption|richtext|extract_text }}" loading="lazy" decoding="async" />
</a> </a>
</div> </div>