pitbuster/zola-ludwig
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add photoswipe for photo enlarge on click

Browse source
This commit is contained in:
Felipe 2023-06-05 23:45:34 -04:00
parent 0545542026
commit 77dd363db7
Signed by: pitbuster
SSH key fingerprint: SHA256:HDYu2Pm4/TmSX8GBwV49UvFWr1Ljg8XlHxKeCpjJpOk
2 changed files with 116 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
templates/page.html
View file

@ -10,6 +10,95 @@
<link rel="stylesheet" href="{{ get_url(path='fonts.css') }}">
<link rel="stylesheet" href="{{ get_url(path='forkawesome.css') }}">
<link rel="stylesheet" href="{{ get_url(path='main.css') }}">
<link rel="stylesheet" href="https://unpkg.com/photoswipe@5.3.7/dist/photoswipe.css">
<script type="module">
import PhotoSwipeLightbox from "https://unpkg.com/photoswipe@5.3.7/dist/photoswipe-lightbox.esm.js";
import PhotoSwipe from "https://unpkg.com/photoswipe@5.3.7/dist/photoswipe.esm.js";
const lightbox = new PhotoSwipeLightbox({
gallery: '.instant a',
pswpModule: PhotoSwipe
});
// use <picture> instead of <img>
lightbox.on('contentLoad', (e) => {
const { content, isLazy } = e;
const avifSrc = content.data.element.dataset.pswpAvif;
const webpSrc = content.data.element.dataset.pswpWebp;
if (avifSrc || webpSrc) {
// prevent to stop the default behavior
e.preventDefault();
content.pictureElement = document.createElement('picture');
if (avifSrc) {
const sourceAvif = document.createElement('source');
sourceAvif.srcset =avifSrc;
sourceAvif.type = 'image/avif';
content.pictureElement.appendChild(sourceAvif);
}
if (webpSrc) {
const sourceWebp = document.createElement('source');
sourceWebp.srcset = webpSrc;
sourceWebp.type = 'image/webp';
content.pictureElement.appendChild(sourceWebp);
}
const source = document.createElement('source');
source.srcset = content.data.src;
if (/.png$/.test(content.data.src)) {
source.type = 'image/png';
} else {
source.type = 'image/jpeg';
}
content.pictureElement.appendChild(source);
content.element = document.createElement('img');
content.element.src = content.data.src;
content.element.setAttribute('alt', '');
content.element.className = 'pswp__img';
content.pictureElement.appendChild(content.element);
content.state = 'loading';
if (content.element.complete) {
content.onLoaded();
} else {
content.element.onload = () => {
content.onLoaded();
};
content.element.onerror = () => {
content.onError();
};
}
}
});
// by default PhotoSwipe appends <img>,
// but we want to append <picture>
lightbox.on('contentAppend', (e) => {
const { content } = e;
if (content.pictureElement && !content.pictureElement.parentNode) {
e.preventDefault();
content.slide.container.appendChild(content.pictureElement);
}
});
// for next/prev navigation with <picture>
// by default PhotoSwipe removes <img>,
// but we want to remove <picture>
lightbox.on('contentRemove', (e) => {
const { content } = e;
if (content.pictureElement && content.pictureElement.parentNode) {
e.preventDefault();
content.pictureElement.remove();
}
});
lightbox.init();
</script>
</head>
<body>
<header>

52
templates/shortcodes/figure.html
View file

@ -1,48 +1,50 @@
{% set avif_src = src |
replace(from=".jpg",to=".avif") |
replace(from=".png",to=".avif") %}
{% set orig_thumb = src %}
{% if thumb %}
{% set orig_thumb = src |
replace(from=".jpg",to=thumb~".jpg") |
replace(from=".png",to=thumb~".png") %}
{% endif %}
{% set webp_thumb = thumb |
replace(from=".jpg",to=".webp") |
replace(from=".png",to=".webp") %}
{% set avif_thumb = webp_thumb |
replace(from=".webp",to=".avif") %}
{% set avif_thumb = orig_thumb |
replace(from=".jpg",to=".avif") |
replace(from=".png",to=".avif") %}
{% set src_url = get_url(path=src) %}
{% set avif_url = get_url(path=avif_src) %}
{% set thumb_url = get_url(path=orig_thumb) %}
{% set webp_url = get_url(path=webp_thumb) %}
{% set avif_url = get_url(path=avif_thumb) %}
{% set avif_thumb_url = get_url(path=avif_thumb) %}
{% set img_data = get_image_metadata(path=src) %}
{% set avif_data = true %}
{% set thumb_data = get_image_metadata(path=orig_thumb) %}
{% set avif_data = get_image_metadata(path=avif_thumb,allow_missing=true) %}
{% set webp_data = get_image_metadata(path=webp_thumb,allow_missing=true) %}
{% set avif_thumb_data = true %}
<div class="box"
style="--w:{{thumb_data.width}};--h:{{thumb_data.height}};"
>
<figure class="instant"
<figure
class="instant"
style="max-width:calc({{thumb_data.width}}px + 4vw)"
itemprop="associatedMedia" itemscope
itemtype="http://schema.org/ImageObject"
>
<picture
class="thumb {%if avif_data %} avif{%endif%}{%if webp_data %} webp{%endif%}"
data-size="{{img_data.width}}x{{img_data.height}}"
<a href="{{src_url}}" itemprop="contentUrl"
data-pswp-width="{{img_data.width}}" data-pswp-height="{{img_data.height}}"
{%if avif_data %}data-pswp-avif="{{avif_url}}"{%endif%}
>
{% if avif_data %}
<source srcset="{{avif_url}}" type="image/avif">
{% endif %}
{% if webp_data %}
<source srcset="{{webp_url}}" type="image/webp">
{% endif %}
<source srcset="{{thumb_url}}" type="image/{{thumb_data.format}}">
<img itemprop="thumbnail" src="{{thumb_url}}"
{% if caption %} alt="{{caption | markdown | striptags}}{% endif %}"/>
</picture>
<a href="/{{src_url}}" itemprop="contentUrl"></a>
<picture class="thumb">
{% if avif_thumb_data %}
<source srcset="{{avif_thumb_url}}" type="image/avif">
{% endif %}
<source srcset="{{thumb_url}}" type="image/{{thumb_data.format}}">
<img itemprop="thumbnail" src="{{thumb_url}}"
{% if caption %} alt="{{caption | markdown | striptags}}{% endif %}"/>
</picture>
</a>
{% if caption %}
<figcaption>
{{ caption | markdown | safe }}