Magnific popup gets in the way of Wikimedia links

[p3palazzo]

This is a follow-up to #1975, which was closed by its author without a real solution.

Environment

• Minimal Mistakes version: 4.24.0
• Ruby gem or remote theme version: 4.24.0
• Jekyll version: 4.2.0
• Git repository URL:
  • main branch with markdown source: https://github.com/p3palazzo/tau0005/
  • gh-pages branch with generated website: https://github.com/p3palazzo/tau0005/tree/gh-pages
• GitHub Pages hosted (if yes provide URL to site): YES https://palazzo.arq.br/tau0005/ (redirects from https://p3palazzo.github.io/tau0005/)
• Operating system:
  • Built by Github actions on ubuntu:latest using:
  • this Makefile and
  • this workflow
  • Uses jekyll-pandoc to process markdown instead of kramdown.

Expected behavior

Links to Wikimedia commons pages should open as any regular link does. Instead, because the URL ends with '.jpg' or '.png', Minimal Mistakes tries to load them as a Magnific Popup lightbox.

Steps to reproduce the behavior

1. Add a link to a Wikimedia Commons page such as: [Harvey Barrison, 2012](https://commons.wikimedia.org/wiki/Image:Balloon_Safari_2012_06_01_3128_(7522677448).jpg) (from line 72 of this file in the above-mentioned repository)
2. When generating the website, everyting looks fine: <a href="https://commons.wikimedia.org/wiki/Image:Balloon_Safari_2012_06_01_3128_(7522677448).jpg">Harvey Barrison, 2012</a> (line 285 on the corresponding generated HTML file)
3. When loading the web page, JavaScript adds the popup class: <a href="https://commons.wikimedia.org/wiki/Image:Balloon_Safari_2012_06_01_3128_(7522677448).jpg" class="image-popup">Harvey Barrison, 2012</a> (can be seen here)
4. However, the link does not point to an image but to a web page, which causes the lightbox to fail with Image#1 could not be loaded

Other

As pointed out by @mmistakes here, the lightbox can be disabled by editing l. 85-87 of the assets/js/_main.js file. However, having to checkout and the rebuild the whole theme Javascript seems like overkill.

I suppose a regex similar to the one that activates the popup could be used to detect wikimedia URLs and disable the lightbox on them, but it would introduce other problems, e.g. what if someone actually points a link to the image itself that is hosted on Wikimedia?

[iBug]

Surely there's a better way to fix this: Check if the <a href> tag actually contains an <img>.