Support » Plugin: Lightbox with PhotoSwipe » Lightbox not working when there is an accent in the name of the photo

  • Resolved Pablo Mayo

    (@pmsanz)


    Hi Arno and many thanks for a great plugin.

    I’ve found a small bug, specially annoying in spanish. When a name in a photo have an accent (like á,é,í,ó,ú) the plugin does not detect it and does not open lightbox.

    I hope it is easy to solve.

    Regards,
    Pablo

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Arno Welzel

    (@awelzel)

    Generally it’s not a good idea using accents as part of file names. However, can you show me an example for this issue (URL)? Thank you.

    Thread Starter Pablo Mayo

    (@pmsanz)

    Hi Arno,

    Here you have it:

    In any other post you can see it working perfectly.

    It also happens with german words like “Piëch”.

    Regards.

    Plugin Author Arno Welzel

    (@awelzel)

    Well – as I said, non-ASCII characters in the filenames are never a good idea.

    For example – from your site:

    https://espirituracer.com/wp-content/uploads/2017/11/Piëch-Mark-Zero-6.jpg

    But there are more problems, see:

    https://validator.w3.org/nu/?doc=https%3A%2F%2Fespirituracer.com%2Fnoticias%2Fpiech-mark-zero-otro-deportivo-electrico-se-une-al-salon-de-ginebra%2F

    And there is also a JavaScript error on your site caused by the theme you are using (TypeError: t is null caused by https://espirituracer.com/wp-content/themes/carnews/js/loader.js).

    I believe, that the encoding of the page is also not done correctly, so PHP does not know how to deal with non-ASCII characters in the image URLs.

    On my demo page non-ASCII characters work fine:

    https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe/

    First you should fix the other errors. But I also recommend to use only ASCII characters in filenames to avoid any problems.

    Thread Starter Pablo Mayo

    (@pmsanz)

    Hi Arno,

    Thanks for the info. I agree there are some errors to fix, but they are not the cause of this. I’ve tested other Lightbox plugins, and there were no issues with non ASCII characters.

    Regards.

    Plugin Author Arno Welzel

    (@awelzel)

    Did you see my working example at https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe/? I even used the exact same filename for one of the images: https://wordpress-demo.arnowelzel.de/wp-content/uploads/2019/01/Piëch-Mark-Zero-6.jpg – and it works without any problem on my server.

    So – I can not reproduce the problem on my server and therefore I don’t know what to do to fix it.

    Lightbox with PhotoSwipe needs to be able to read the image meta data on the server based on the URL in the HTML document to determine the size of the image. However, if the document is not valid or the encoding on the server is not the same as in the document, the image data can’t be read and the required attributes data-width and data-height can not be added to the link element.

    If you can’t fix the other errors and also don’t want to change the image file name, you can add the data-width and data-height attributes manually in the source code, then the picture should be displayed in the lightbox when clicking it:

    <a href="https://espirituracer.com/wp-content/uploads/2017/11/Pi%C3%ABch-Mark-Zero-5.jpg" data-width="1728" data-height="1080">
    ...
    <img class="aligncenter wp-image-67899 size-large lazyloaded" src="https://espirituracer.com/wp-content/uploads/2017/11/Piëch-Mark-Zero-5-825x516.jpg" alt="Piëch Mark Zero 5" srcset="https://espirituracer.com/wp-content/uploads/2017/11/Piëch-Mark-Zero-5-825x516.jpg 825w, https://espirituracer.com/wp-content/uploads/2017/11/Piëch-Mark-Zero-5-271x169.jpg 271w, https://espirituracer.com/wp-content/uploads/2017/11/Piëch-Mark-Zero-5-408x255.jpg 408w, https://espirituracer.com/wp-content/uploads/2017/11/Piëch-Mark-Zero-5-768x480.jpg 768w, https://espirituracer.com/wp-content/uploads/2017/11/Piëch-Mark-Zero-5-490x306.jpg 490w, https://espirituracer.com/wp-content/uploads/2017/11/Piëch-Mark-Zero-5-550x344.jpg 550w" sizes="(max-width: 825px) 100vw, 825px" data-srcset="https://espirituracer.com/wp-content/uploads/2017/11/Piëch-Mark-Zero-5-825x516.jpg 825w, https://espirituracer.com/wp-content/uploads/2017/11/Piëch-Mark-Zero-5-271x169.jpg 271w, https://espirituracer.com/wp-content/uploads/2017/11/Piëch-Mark-Zero-5-408x255.jpg 408w, https://espirituracer.com/wp-content/uploads/2017/11/Piëch-Mark-Zero-5-768x480.jpg 768w, https://espirituracer.com/wp-content/uploads/2017/11/Piëch-Mark-Zero-5-490x306.jpg 490w, https://espirituracer.com/wp-content/uploads/2017/11/Piëch-Mark-Zero-5-550x344.jpg 550w" data-src="https://espirituracer.com/wp-content/uploads/2017/11/Piëch-Mark-Zero-5-825x516.jpg" style="" width="825" height="516">
    </a>
    
    Plugin Author Arno Welzel

    (@awelzel)

    My other comment with a more detailed explanation is held for moderation, maybe because I mentioned the demo URL once again.

    Please have a look at the demo I mentioned on my site – you can see that the very same names work there without any problems. So I don’t know what to change, when it works in my server.

    You can manually add the required data-width/data-height attributes to the image links, if you can’t change the image file names. Just have a look at the HTML source of the working examples how this should be added. For example if the sizes of your picture is 1620×1080 pixels, so it should be data-width="1280" data-height="720" in the `<a …’-elements around the images. Then the lightbox should be visible.

    Plugin Author Arno Welzel

    (@awelzel)

    Ok, the other comment should be visible now as well.

    Thread Starter Pablo Mayo

    (@pmsanz)

    Many thanks Arno. I’ve seen it working in your server, so for sure your plugin is ok. I’ve to look for the one is causing it.

    Regards.

    • This reply was modified 3 years, 8 months ago by Pablo Mayo.
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Lightbox not working when there is an accent in the name of the photo’ is closed to new replies.