Conflict with the privacy plugin of Material theme

This issue is the continuation of this one: https://github.com/squidfunk/mkdocs-material/issues/6248 where you can find every details and a reproducible example.

In a nutshell:

the Material theme's privacy plugin is meant to avoid requests to external resources
it can't comply with its promise since mkdocs-ghlightbox use the a[href] to link external image (certainly because of underlying lightbox behavior)

See this comment from @squidfunk:

I've investigated and came to the conclusion that it does not make sense to fix this on our side. Here's why:

Problem

The mkdocs-glightbox plugin currently detects img elements during build time (after the site has been rendered as HTML) and wraps them with a anchor elements. As already noted in #6248 (comment), the privacy plugin only considers assets that are actually rendered to be downloaded. However, the glightbox plugin will wrap the image in an anchor and set href to the image. Normally, an a is a link to an external or internal resource – nothing that is rendered or downloaded without the users consent, thus not under GDPR. This is beyond the scope of the privacy plugin.

Why? Because if we would start downloading resources that are referenced in a[href] attributes, we would need another way to tell the plugin what not to download. Otherwise the plugin will try to download all external resources, which will make configuration much more challenging and the final site will probably blow up in size.

Possible solution

IMHO, there's no need for the glightbox plugin to wrap the img elements during build time – glightbox needs JavaScript to function (open the inspector when you click on an image, and you will see that the JavaScript changes several properties, e.g. on the body). As there's no possibility to make it work without JavaScript (correct me if I'm wrong), I think it's a better idea to defer wrapping of image elements into the browser. The glightbox plugin could just mark elements with a specific class or attribute, e.g. data-glightbox, and provide a small JavaScript that wraps the img elements when the page has loaded. This would mean the correct image would be picked up every time.

This would not only solve the problem at hand, but also be easier to extend to other resources to be presented in the ligtbox, because very soon, the optimize plugin will receive the capability to generate multiple variants of images and wrap them in picture tags. The glightbox plugin could the pick the appropriate source in the picture tag.

If you need help getting this to work, @blueswen, let me know. Wrapping an element in JavaScript is quite simple..

Closing as upstream issue.

blueswen / mkdocs-glightbox

Conflict with the privacy plugin of Material theme #25

Problem

Possible solution