Open pitbuster opened 5 years ago
The input from the markdown file
{{< load-photoswipe >}}
{{< gallery caption-effect="fade" >}}
{{< figure thumb="-thumb" link="/images/about_us/1.webp" size="1239x826" caption="Figure caption text." >}}
{{< /gallery >}}
The resulting html part
<div class="gallery caption-position-bottom caption-effect-fade hover-effect-zoom hover-transition" itemscope itemtype="http://schema.org/ImageGallery">
<div class="box" >
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<div class="img" style="background-image: url('/images/about_us/1-thumb.webp');" data-size="1239x826">
<img itemprop="thumbnail" src="/images/about_us/1-thumb.webp" alt="Figure caption text."/>
</div>
<a href="/images/about_us/1.webp" itemprop="contentUrl"></a>
<figcaption>
<p>Figure caption text.</p>
</figcaption>
</figure>
</div>
</div>
Using #34 for javascript the following change may I suggest
$figure.querySelector('.img').dataset.size.split('x')
--- load-photoswipe.js
+++load-photoswipe.js
@@ -16,13 +16,14 @@ document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('figure').forEach(function($figure, index) {
if ($figure.className == 'no-photoswipe') return true; // ignore any figures where class="no-photoswipe"
var $a = $figure.querySelector('a'),
- $img = $figure.querySelector('img'),
+ $img = $figure.querySelector('img'), // This one selects the <img itemprop ..
+ $cimg = $figure.querySelector('.img'), // This one select the <div class="img" ...
$src = $a.href,
$title = $img.alt,
$msrc = $img.src;
// if data-size on <a> tag is set, read it and create an item
- if ($a.dataset.size) {
- var $size = $a.dataset.size.split('x');
+ if ($cimg.dataset.size) {
+ var $size = $cimg.dataset.size.split('x');
var item = {
src : $src,
w : $size[0],
I guess with jQuery would that be?
- $img = $figure.find('img'),
+ $img = $figure.find('img'), // This one selects the <img itemprop ..
+ $cimg = $figure.find('.img'), // This one select the <div class="img" ...
Kind regards, Panagiotis
In the documentation, it is mentioned that you can use the
size
parameter in thefigure
shortcode to avoid loading the linked image to calculate its size.After a bit of debugging, I noticed that the javascript code that reads the manual size value expects the data size info on the
<a>
tag, but the partial puts that info on the<div>
that contains the thumbnail.I can send a PR with the fix if needed.