Photoswipe still loads linked image if size parameter is used

[pitbuster]

In the documentation, it is mentioned that you can use the size parameter in the figure 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.

[PanagiotisS]

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