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

Add lightbox for content images

Browse source
This commit is contained in:
Jake Howard 2022-09-02 17:18:40 +01:00
parent 611e343564
commit 7fff13f0ab
Signed by: jake
GPG key ID: 57AFB45680EDD477
8 changed files with 34 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
package-lock.json generated
View file

@ -13,6 +13,7 @@
"elevator.js": "^1.0.1",
"esbuild": "^0.14.43",
"firacode": "^6.2.0",
"glightbox": "^3.2.0",
"htmx.org": "^1.8.0",
"lite-youtube-embed": "^0.2.0",
"lodash.debounce": "^4.0.8",
@ -1588,6 +1589,11 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/glightbox": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/glightbox/-/glightbox-3.2.0.tgz",
"integrity": "sha512-iit1xYixqL4YVL+I2YJLfMeyJwvLi6FE6kY3qNKeZHEJgRIz80QU8Rm7YCyw1wOTgXvmNDnXGVhHOHRCwnDltQ=="
},
"node_modules/glob": {
"version": "7.2.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@ -4911,6 +4917,11 @@
"get-intrinsic": "^1.1.1"
}
},
"glightbox": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/glightbox/-/glightbox-3.2.0.tgz",
"integrity": "sha512-iit1xYixqL4YVL+I2YJLfMeyJwvLi6FE6kY3qNKeZHEJgRIz80QU8Rm7YCyw1wOTgXvmNDnXGVhHOHRCwnDltQ=="
},
"glob": {
"version": "7.2.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",

1
package.json
View file

@ -32,6 +32,7 @@
"elevator.js": "^1.0.1",
"esbuild": "^0.14.43",
"firacode": "^6.2.0",
"glightbox": "^3.2.0",
"htmx.org": "^1.8.0",
"lite-youtube-embed": "^0.2.0",
"lodash.debounce": "^4.0.8",

1
scripts/copy-npm-contrib.sh
View file

@ -20,3 +20,4 @@ mkcontrib elevator-js node_modules/elevator.js/demo/music/*
mkcontrib shareon node_modules/shareon/dist/{shareon.iife.*,shareon.min.css*}
mkcontrib fira-code node_modules/firacode/distr/{fira_code.css,woff2,woff}
mkcontrib htmx node_modules/htmx.org/dist/{htmx.min.js,ext}
mkcontrib glightbox node_modules/glightbox/dist/css/*.min.*

5
static/src/js/lightbox.js Normal file
View file

@ -0,0 +1,5 @@
const GLightbox = require("glightbox");
window.addEventListener("load", () => {
GLightbox({});
});

8
static/src/scss/_content.scss
View file

@ -47,3 +47,11 @@ section.content {
filter: invert(100%);
}
}
.gslide-description {
background-color: transparent !important;
.gslide-title {
color: $dark-mode-text !important;
}
}

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

@ -2,7 +2,9 @@
<figure>
<div class="image is-16by9">
<img src="{% image_url value.image 'width-1500' %}" alt="{{ value.caption|richtext|extract_text }}" loading="lazy" decoding="async" />
<a href="{% image_url value.image 'original' %}" class="glightbox" data-gallery="content" 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>
<figcaption>
{{ value.caption|richtext }}

2
website/common/templates/common/content_page.html
View file

@ -13,6 +13,7 @@
{% block extra_css %}
{% sri_static "css/lite-youtube-embed.css" %}
{% sri_static "contrib/shareon/shareon.min.css" %}
{% sri_static "contrib/glightbox/glightbox.min.css" %}
<link rel="stylesheet" type="text/css" href="{% url 'code-block:styles' %}">
{% endblock %}
@ -20,4 +21,5 @@
{% block extra_js %}
<script async defer type="text/javascript" src="{% static 'js/lite-youtube-embed.js' %}" integrity="{% sri_integrity_static 'js/lite-youtube-embed.js' %}"></script>
<script async defer type="text/javascript" src="{% static 'contrib/shareon/shareon.iife.js' %}" integrity="{% sri_integrity_static 'contrib/shareon/shareon.iife.js' %}" init></script>
<script async defer type="text/javascript" src="{% static 'js/lightbox.js' %}" integrity="{% sri_integrity_static 'js/lightbox.js' %}"></script>
{% endblock %}

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

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