Wrong path used for images

  • Resolved GermanKiwi

    (@germankiwi)


    2 years, 6 months ago

    Hi @awelzel,

    I’ve just updated the plugin from 4.0.8 to 5.0.6 and I’ve enabled PhotoSwipe v5 in the plugin settings.

    Overall it works fine, but I get the following three errors in my Chrome browser console after I open and close an image in the lightbox:

    Error 1:
    first-sunday-in-the-new-building-14.jpg:1 GET https://www.mysite.com/wp-content/uploads/images/first-sunday-in-the-new-building-14.jpg 404

    Error 2:
    first-sunday-in-the-new-building:1 Uncaught (in promise) DOMException: The source image cannot be decoded.

    Error 3:
    photoswipe-auto-hide-ui.esm.min.js:3 Uncaught TypeError: Cannot read properties of null (reading ‘element’)
    at PhotoSwipeAutoHideUI.showUI (photoswipe-auto-hide-ui.esm.min.js:3:29)
    at PhotoSwipeAutoHideUI.mouseMove (photoswipe-auto-hide-ui.esm.min.js:5:57)
    at document.addEventListener.once (photoswipe-auto-hide-ui.esm.min.js:7:149)

    …Where “first-sunday-in-the-new-building-14.jpg” is the image I clicked on, and “first-sunday-in-the-new-building” is the slug of the post page I’m viewing in the browser.

    There are two separate (related?) problems that I can identify here:

    Problem 1:

    The path shown in the URL, in the first console error above, is incorrect. The URL in the console error says this:

    https://www.mysite.com/wp-content/uploads/images/first-sunday-in-the-new-building-14.jpg

    But the image is actually located here on my server:

    https://www.mysite.com/media/images/first-sunday-in-the-new-building-14.jpg

    This is because I have renamed my “Uploads” directory to “Media” via the following entry in my wpconfig.php file:

    define( 'UPLOADS', 'media' );

    And I’m guessing that your plugin doesn’t recognise this correctly?

    Problem 2:

    The HTML generated for the image after I open it up in the lightbox, looks like this:

    <img class="pswp__img" src="https://www.ibcstuttgart.de/media/images/first-sunday-in-the-new-building-14.jpg" alt="" style="width: 994px; height: 559px;">

    Note that it’s using the correct path in the URL. However, it is missing a srcset variable (and I think it always has – this is not a new issue).

    In comparison, the HTML of the <img> tag for the gallery image thumbnails does contain a correctly formatted srcset attribute.

    The changelog of the plugin says “If possible PhotoSwipe will now be opened with lower resolution preview images for better performance.” But that doesn’t seem to be happening – instead, the HTML generated above shows just the main src attribute, but no srcset attribute needed to show lower resolution versions of the image.

    Could this also be a cause of some of the errors in the browser console? Is there a reason that the srcset attribute is not used in the lightbox HTML?

    Thanks for your support!

    • This topic was modified 2 years, 6 months ago by GermanKiwi.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Arno Welzel

    (@awelzel)

    First about paths:

    The plugin uses wp_upload_dir() to get the path which should return the correct folder always and worked in the past without any problem.

    But indeed the recent update starting with release 4.0 which uses the smaller images if available, is buggy, because that part does not use wp_upload_dir() but assumes the path is always /wp-content/uploads which is of course not always the case. I just did not realize this since I never changed the upload folder on any of my own sites and so far nobody had an issue with that.

    Release 5.0.7 should fix this.

    The change in detail: https://github.com/arnowelzel/lightbox-photoswipe/commit/4f2576d5934f931f41844f5db0193626758969b9#diff-fd09a683aeef52643be8f9f01c942fcd2c73d2b86cfe9d8fcdd29a036235040e

    About image sizes:

    No, the srcset attribute has no meaning at all for the plugin or PhotoSwipe.

    The one and only thing what matters is the URL of the image in the link and never any visible image in the page. The plugin tries to get smaller image sizes from the WordPress core itself which depend on the sizes registered by your theme and what sizes are really available (by using wp_get_additional_image_sizes() and get_intermediate_image_sizes() and additional logic to determine which is the smallest usable uncropped and available size). If there is a smaller size available and the image file exists on your server, then this is added as data-lbwps-srcsmall attribute to the link which is then passed to PhotoSwipe to be used for the opening transition (and only for that, nothing else!).

    Also see https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-5-overlay-caption/ as example.

    With the fix to get the correct image URL for the smaller preview size the error messages should also disappear.

    Thread Starter GermanKiwi

    (@germankiwi)

    Wow, thanks for giving such a quick reply, and the world’s fastest patch! ?? I’ve just installed 5.0.7 and I can confirm the problem is solved. No more console errors!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Wrong path used for images’ is closed to new replies.