Support for lightbox image galleries

[David-Siebert]

Is your feature request related to a problem? Please describe.

I would like to use vitepress for my blog, which contains a lot of images.
Currently I use a lightbox library to visualise the images.
The following changes I made to integerate a lightbox library. It works, but I'm not 100% happy with it.

Describe the solution you'd like

First, I installed a new markdown-it plugin.

npm i -D markdown-it-div

Configured it to suit my needs

<!-- .vitepress\config.mts -->

import markdownItDiv from 'markdown-it-div'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(markdownItDiv, { marker: '=' });
    }
  }
})

Then I added a theme index.css and added my custom css to it to display a collection of images in a nice way.

<!-- .vitepress\theme\index.css -->

div.gallery p {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: row;
    
}

div.gallery p a img {
  margin: 10px;
  border: 0px solid #000;
  box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3); 
  max-width: 23vw;
}

I chose the plain javascript fslightbox library. I downloaded the fslightbox.js and put it in public\libs\fslightbox.js

Then I registered this *.js file at the top of each page by modifying the config.mdx file.

<!-- .vitepress\config.mts -->

export default defineConfig({
  head: [
    [
        'script',
      { src: '/libs/fslightbox.js' }
    ]    
  ],
})

In order for the fslightbox library to load images as lightboxes, I need to call refreshFsLightbox(); after a page is loaded or changed. I did this by modifying the theme index.ts file.

<!-- .vitepress\theme\index.ts -->

import DefaultTheme from 'vitepress/theme';
import { onMounted, watch, nextTick } from 'vue';
import { useRoute } from 'vitepress';

import './index.css';

export default {
  ...DefaultTheme,  
  setup() {
    const route = useRoute();
    const initLightbox = () => {
      console.log('Log from Theme onMounted before fsLightboxInstances', window.fsLightboxInstances)
      refreshFsLightbox();
      console.log('Log from Theme onMounted after fsLightboxInstances', window.fsLightboxInstances)
    };
    onMounted(() => {
      initLightbox();
    });
    watch(
      () => route.path,
      () => nextTick(() => initLightbox())
    );
  },
};

Now I'm ready to use it. To do this, I need to put my full-size pictures in the \public\ folder and my thumbnails in the post folder.

.
└── simple-blog/
    ├── .vitepress
    ├── blog/
    │   └── post-01/
    │       ├── img_1-thumb.jpg
    │       ├── img_2-thumb.jpg
    │       ├── img_3-thumb.jpg
    │       └── index.md
    └── public/
        └── post-01/
            ├── img_1.jpg
            ├── img_2.jpg
            └── img_3.jpg

I can now write something like this in a post:

# My First Post

=== .gallery
[![](IMG_1-thumb.jpg)](/blog/post-01/IMG_1.jpg){data-fslightbox="gallery"}
[![](IMG_2-thumb.jpg)](/blog/post-01/IMG_2.jpg){data-fslightbox="gallery"}
[![](IMG_3-thumb.jpg)](/blog/post-01/IMG_3.jpg){data-fslightbox="gallery"}
[![](IMG-4-thumb.jpg)](/blog/post-01/IMG-4.jpg){data-fslightbox="gallery"}
===

The part

=== .gallery

is converted by the markdown-it plugin "markdown-it-div" to html like

<div class="gallery"></div>

and styled nicely by my adjustments to the css.

A link with an image is described by

[![](IMG_1-thumb.jpg)](/blog/post-01/IMG_1.jpg){data-fslightbox="gallery"}

and would be converted to

<a href="/blog/post-01/IMG_1.jpg" data-fslightbox="gallery"><img src="/blog/post-01/IMG_1-thumb.jpg" alt=""></a>

html out of the box.

Describe alternatives you've considered

As I mentioned previously it works as expected but I'm not happy with it.

• Are there any plans to integrate a feature like lightbox directly into vitepress?
• I would like to have all post-released files in a separate folder.
  • With my solution I have to put the full images in the \public\ folder.
    • This is because they are linked with an a-tag and are not automatically copied to the dist folder.
    • The thumbnail images I can have in the post-release folder because they are reverenced as images with an img-tag and therefore its automatically copied to the dist folder.
  • In this day and age of fast internet is it even necessary to separate thumbnails and full size images?
  • Is there a better solution that I'm not getting?

It would be really nice if I could just reference the full image and have the thumbnail generated automatically during build.
Then I would just have to write

img-group(IMG_1.jpg)
img-group(IMG_2.jpg)
img-group(IMG_3.jpg)
img-group(IMG_4.jpg)

and it would automatically be wrapped in a nicely styled div with image links that would be opened by a lightbox library and display automatically generated thumbnails.

Or is there even a way to wrap this functionally into a plugin? I have not found any information on how to write a plugin.

• The plugin system would need some hook for the build to create thumbnail images.
• Also there are some special markdown rules that need to be added to the plugin.
• Also some custom css and javascript is necessary to add via plugin.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.