You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
# 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
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
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.
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
Then I added a theme
index.css
and added my custom css to it to display a collection of images in a nice way.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.
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 themeindex.ts
file.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.
I can now write something like this in a post:
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.
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
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.
Additional context
No response
Validations
The text was updated successfully, but these errors were encountered: