integrations icon indicating copy to clipboard operation
integrations copied to clipboard

`vitepress-plugin-lightbox` plugin does not work with `vitepress-plugin-thumbnail-hash` plugin

Open Teraskull opened this issue 9 months ago • 2 comments

https://github.com/BadgerHobbs/vitepress-plugin-lightbox

The [data-zoomable] attribute gets removed from images.

A quick workaround would be to add :data-zoomable="true" to the image here:

https://github.com/nolebase/integrations/blob/b303325a623cbd512711a9ee961f0a3c447830d6/packages/vitepress-plugin-thumbnail-hash/src/client/components/NolebaseUnlazyImg.vue#L37-L48

But as the attribute is customizable, there should be another way to hook into the images without hardcoding it.

Teraskull avatar Apr 15 '25 16:04 Teraskull

Hi @Teraskull 👋

Thanks for reporting this and providing the workaround — great catch!

You’re absolutely right that hardcoding data-zoomable isn’t ideal, and we’d love to support a more flexible solution.

If you’re interested, we’d be happy to review a PR that makes this behavior configurable — for example, by forwarding additional attributes or enabling a slot-based override. Let us know your thoughts, or feel free to open a PR anytime!

LittleSound avatar Apr 16 '25 04:04 LittleSound

I think in this specific case it's fine to hardcode it, as no one would go out of their way to patch the lightbox plugin with a different attribute name.

I'm just not sure on the performance of the workaround and how reliable it is. There must be a better way to handle preserving the attribute and initializing mediumZoom() in the correct order so that the listeners are guaranteed to attach after the thumbhash preview is hidden.

No idea about which Vue hooks are needed for this though.

Teraskull avatar Apr 16 '25 04:04 Teraskull