[REQ] Insert Multiple Images & Image Gallery Feature #1184

New Issue

OVERLORD · 2026-02-05T00:10:35+03:00

OVERLORD commented

2026-02-05 00:10:35 +03:00

Originally created by @heavydetail on GitHub (May 15, 2019).

Hi,
I've been trying to use BookStack as an internal documentation tool for my (design) studio,
but inserting multiple images to a page is cumbersome and not pretty.

Describe the feature you'd like
It would be really nice to have a simple Image Gallery feature in BookStack.
When you want to upload a bunch of images into a page, you have to go through each one to insert it, its tidious and doesn't look very nice.
A simple gallery grid (maybe with lightbox popup) would be nice to have.
Also there is no possibility to select multiple images in the uploaded files view to insert them all at once.

Describe the benefits this feature would bring to BookStack users
Faster and more convenient inserting and updating of pictures. Possibility of pages with galleries.

TLDR

Select multiple images in "Insert Image" Popup.
Display images as gallery grid or similar.

Is there a way I could integrate lightbox or similar into the page myself?
Thanks!

Originally created by @heavydetail on GitHub (May 15, 2019). Hi, I've been trying to use BookStack as an internal documentation tool for my (design) studio, but inserting multiple images to a page is cumbersome and not pretty. **Describe the feature you'd like** It would be really nice to have a simple Image Gallery feature in BookStack. When you want to upload a bunch of images into a page, you have to go through each one to insert it, its tidious and doesn't look very nice. A simple gallery grid (maybe with lightbox popup) would be nice to have. Also there is no possibility to select multiple images in the uploaded files view to insert them all at once. **Describe the benefits this feature would bring to BookStack users** Faster and more convenient inserting and updating of pictures. Possibility of pages with galleries. **TLDR** - Select multiple images in "Insert Image" Popup. - Display images as gallery grid or similar. Is there a way I could integrate lightbox or similar into the page myself? Thanks!

OVERLORD added the 🔨 Feature Request 💻 Front-End labels 2026-02-05 00:10:35 +03:00

OVERLORD commented

2026-02-05 00:10:44 +03:00

@Wookbert commented on GitHub (Dec 19, 2019):

I absolutely second this, it's a feature I basically would need right now for a „book“ I'm working on.

I mean what do you do, if you need to show someone for instance the current situation of a problem as solved by others/competitors or if you want to present someone what you have in mind through a moodboard? You need a bunch of pictures to do that, and even if you limit yourself to 4-6 pictures it's already space-consuming/breaking the layout. The current workaround is to link a Pinterest or Flickr gallery for instance, which has the disadvantage that you can’t be sure that the reader actually visits the link.

@Wookbert commented on GitHub (Dec 19, 2019): I absolutely second this, it's a feature I basically would need right now for a „book“ I'm working on. I mean what do you do, if you need to show someone for instance the current situation of a problem as solved by others/competitors or if you want to present someone what you have in mind through a moodboard? You need a bunch of pictures to do that, and even if you limit yourself to 4-6 pictures it's already space-consuming/breaking the layout. The current workaround is to link a Pinterest or Flickr gallery for instance, which has the disadvantage that you can’t be sure that the reader actually visits the link.

OVERLORD commented

2026-02-05 00:10:48 +03:00

@fromthecove commented on GitHub (Jul 1, 2021):

@ssddanbrown ,

You and the contributors have built a great application. I'm in the process of migrating from using Google Docs and Zoho Drive for client information to a self-hosted solution and BookStack caught my eye. I was looking at a node-based wiki, but as a PHP dev I'd rather use an open source project I can tweak if need be.

I often have schema diagrams, update demo videos, spec docs, etc... for clients and having to download any attachment to view it is a bit cumbersome for that use case.

I thought through a few possible approaches and landed on this because I think it sticks closely to the data model you have and is therefore more of a UI enhancement than anything else. Since changes to attachments are already saved immediately, it seems a simple solution might be:

Extend the book view to include some icon indicating if a page has attachments (just a helpful bit of data to have at the shelf level)
On Page view (not editor), have the entire center column be a drag & drop area for attachments, upload async, update list in sidebar.
Add page view Action that can toggle between "Page" and "Attachments" view:
When in "Attachments" view mode, show all attachments above the page as thumbnails (type-specific icons for non-image files):

I wanted to reach out before I think about forking to work on this idea. I would certainly enjoy this feature and may do it just for myself, but if there's a chance you'd want something like this merged in down the road, it would save time on the back end if you have thoughts on at the start (you hate it, like it, would prefer something else, etc...).

@fromthecove commented on GitHub (Jul 1, 2021): @ssddanbrown , You and the contributors have built a great application. I'm in the process of migrating from using Google Docs and Zoho Drive for client information to a self-hosted solution and BookStack caught my eye. I was looking at a node-based wiki, but as a PHP dev I'd rather use an open source project I can tweak if need be. I often have schema diagrams, update demo videos, spec docs, etc... for clients and having to download any attachment to view it is a bit cumbersome for that use case. I thought through a few possible approaches and landed on this because I think it sticks closely to the data model you have and is therefore more of a UI enhancement than anything else. Since changes to attachments are already saved immediately, it seems a simple solution might be: - Extend the book view to include some icon indicating if a page has attachments (just a helpful bit of data to have at the shelf level) - On Page view (not editor), have the entire center column be a drag & drop area for attachments, upload async, update list in sidebar. ![image](https://user-images.githubusercontent.com/796606/124150307-0f61a700-da57-11eb-83c8-c4639154b9b7.png) - Add page view Action that can toggle between "Page" and "Attachments" view: ![image](https://user-images.githubusercontent.com/796606/124149304-1340f980-da56-11eb-9e25-ddacd16f1fc2.png) - When in "Attachments" view mode, show all attachments above the page as thumbnails (type-specific icons for non-image files): ![image](https://user-images.githubusercontent.com/796606/124151944-ae3ad300-da58-11eb-9b00-1f4e91c9fb0a.png) I wanted to reach out before I think about forking to work on this idea. I would certainly enjoy this feature and may do it just for myself, but if there's a chance you'd want something like this merged in down the road, it would save time on the back end if you have thoughts on at the start (you hate it, like it, would prefer something else, etc...).

OVERLORD commented

2026-02-05 00:10:53 +03:00

@WavedirectTel commented on GitHub (Apr 7, 2022):

Have my blessing as well. Also needs a media manager so I can upload all my assets ahead of time to use when writing the documents. But allow them to be shared with other users.

@WavedirectTel commented on GitHub (Apr 7, 2022): Have my blessing as well. Also needs a media manager so I can upload all my assets ahead of time to use when writing the documents. But allow them to be shared with other users.

OVERLORD commented

2026-02-05 00:10:56 +03:00

@ryjogo commented on GitHub (Aug 19, 2022):

Yep, this is really needed.

@ryjogo commented on GitHub (Aug 19, 2022): Yep, this is really needed.

OVERLORD commented

2026-02-05 00:10:59 +03:00

@BRGustavoRibeiro commented on GitHub (Feb 21, 2023):

I agree. BookStack is already amazing, and this would be a feature that would be awesomingly useful in many usecases.

@BRGustavoRibeiro commented on GitHub (Feb 21, 2023): I agree. BookStack is already amazing, and this would be a feature that would be awesomingly useful in many usecases.

OVERLORD commented

2026-02-05 00:11:05 +03:00

@dawnerd commented on GitHub (Aug 2, 2023):

Came looking for a sort of gallery feature and stumbled on this request. Being able to at the very least show a grid of images without having to use a table would be huge.

@dawnerd commented on GitHub (Aug 2, 2023): Came looking for a sort of gallery feature and stumbled on this request. Being able to at the very least show a grid of images without having to use a table would be huge.

OVERLORD commented

2026-02-05 00:11:08 +03:00

@homeztead commented on GitHub (Aug 22, 2023):

Please add a gallery function that will increase our ability to organize and present information. I use bookstack primarily as a knowledge base and a journal. Often I need this function to collect screenshots for my customized how to articles and I need to collect pics of events that I participated in or hosted for others. A picture gallery capable of handling all the standard raster images would be phenomenal. Thank you for considering this request.

@homeztead commented on GitHub (Aug 22, 2023): Please add a gallery function that will increase our ability to organize and present information. I use bookstack primarily as a knowledge base and a journal. Often I need this function to collect screenshots for my customized how to articles and I need to collect pics of events that I participated in or hosted for others. A picture gallery capable of handling all the standard raster images would be phenomenal. Thank you for considering this request.

OVERLORD commented

2026-02-05 00:11:12 +03:00

@BriGuy-Acuity commented on GitHub (Mar 9, 2024):

+1

@BriGuy-Acuity commented on GitHub (Mar 9, 2024): +1

OVERLORD commented

2026-02-05 00:11:14 +03:00

@gometer commented on GitHub (Mar 10, 2024):

looking for this feature too.

@gometer commented on GitHub (Mar 10, 2024): looking for this feature too.

OVERLORD commented

2026-02-05 00:11:19 +03:00

@Utility9298 commented on GitHub (May 7, 2024):

In the meantime I am using a table to display the pictures in a kind of gallery

@Utility9298 commented on GitHub (May 7, 2024): In the meantime I am using a table to display the pictures in a kind of gallery

OVERLORD commented

2026-02-05 00:11:24 +03:00

@Wookbert commented on GitHub (May 8, 2024):

@gamebird92 Unfortunately tables get cropped depending on the device on which you are looking at them.

@Wookbert commented on GitHub (May 8, 2024): @gamebird92 Unfortunately tables get cropped depending on the device on which you are looking at them.

OVERLORD commented

2026-02-05 00:11:29 +03:00

@silverasu commented on GitHub (Sep 20, 2024):

+1

@silverasu commented on GitHub (Sep 20, 2024): +1

OVERLORD commented

2026-02-05 00:11:33 +03:00

@jasonad123 commented on GitHub (Jan 31, 2025):

Also looking for this feature

@jasonad123 commented on GitHub (Jan 31, 2025): Also looking for this feature

OVERLORD commented

2026-02-05 00:11:37 +03:00

@AgentHawk commented on GitHub (Apr 23, 2025):

any News?

@AgentHawk commented on GitHub (Apr 23, 2025): any News?

OVERLORD commented

2026-02-05 00:11:41 +03:00

@PavelDeveloperUa commented on GitHub (May 13, 2025):

Maybe this functionality is already under development?

@PavelDeveloperUa commented on GitHub (May 13, 2025): Maybe this functionality is already under development?

OVERLORD commented

2026-02-05 00:11:46 +03:00

@prohtex commented on GitHub (Jun 18, 2025):

@ssddanbrown ,

You and the contributors have built a great application. I'm in the process of migrating from using Google Docs and Zoho Drive for client information to a self-hosted solution and BookStack caught my eye. I was looking at a node-based wiki, but as a PHP dev I'd rather use an open source project I can tweak if need be.

I have to say, big thumbs down on this one. While I do need an image gallery, I'm planning on simply writing some css to display images in a grid.

The single biggest factor that differentiates BookStack from other selfhosted Wiki solutions is the focus on simplicity and barebones functionality over complexity. As soon as you introduce a feature or paradigm, you bring complexity.

The thing my organization hated most about WikiJS was the file manager. The ability to drag images right into an editor GitHub style is a miracle.

Keep BookStack Simple!

@prohtex commented on GitHub (Jun 18, 2025): > [@ssddanbrown](https://github.com/ssddanbrown) , > > You and the contributors have built a great application. I'm in the process of migrating from using Google Docs and Zoho Drive for client information to a self-hosted solution and BookStack caught my eye. I was looking at a node-based wiki, but as a PHP dev I'd rather use an open source project I can tweak if need be. I have to say, big thumbs down on this one. While I do need an image gallery, I'm planning on simply writing some css to display images in a grid. The single biggest factor that differentiates BookStack from other selfhosted Wiki solutions is the focus on simplicity and barebones functionality over complexity. As soon as you introduce a feature or paradigm, you bring complexity. The thing my organization hated most about WikiJS was the file manager. The ability to drag images right into an editor GitHub style is a miracle. Keep BookStack Simple!

OVERLORD commented

2026-02-05 00:11:52 +03:00

@prohtex commented on GitHub (Jun 18, 2025):

Here's some CSS you can paste into "Custom HTML Head Content" in Admin section. All you need to do is drag your images into markdown editor, and wrap the code in a <div class='image-grid'> and you will get a nice image grid.

<!-- Image grid -->

<style>

.image-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 1em !important;
}

/* Remove the <br> that breaks layout */
.image-grid br {
  display: none !important;
}

/* Allow <a> inside <p> to behave as grid items */
.image-grid > p {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure each anchor is treated as a full grid item */
.image-grid a {
  display: block !important;
}

/* Force images to fit their grid cells */
.image-grid img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}
  
</style>

@prohtex commented on GitHub (Jun 18, 2025): Here's some CSS you can paste into "Custom HTML Head Content" in Admin section. All you need to do is drag your images into markdown editor, and wrap the code in a ```<div class='image-grid'>``` and you will get a nice image grid. ```  <style> .image-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 12px !important; margin-top: 1em !important; } /* Remove the <br> that breaks layout */ .image-grid br { display: none !important; } /* Allow <a> inside <p> to behave as grid items */ .image-grid > p { display: contents !important; margin: 0 !important; padding: 0 !important; } /* Ensure each anchor is treated as a full grid item */ .image-grid a { display: block !important; } /* Force images to fit their grid cells */ .image-grid img { display: block !important; width: 100% !important; height: auto !important; object-fit: cover !important; border-radius: 4px !important; } </style> ```

OVERLORD commented

2026-02-05 00:11:54 +03:00

@prohtex commented on GitHub (Jun 18, 2025):

And if you add this, you get a nice lightweight lightbox-style viewer:

<!-- GLightbox CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">

<!-- GLightbox JS -->
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
  GLightbox({
    selector: '.image-grid a',
    touchNavigation: true,
    loop: true
  });
});
</script>

@prohtex commented on GitHub (Jun 18, 2025): And if you add this, you get a nice lightweight lightbox-style viewer: ```  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">  <script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script> <script> document.addEventListener("DOMContentLoaded", function () { GLightbox({ selector: '.image-grid a', touchNavigation: true, loop: true }); }); </script> ```

OVERLORD commented

2026-02-05 00:11:59 +03:00

@tit1 commented on GitHub (Jan 7, 2026):

This works really well, the only issue is that you need to manually edit the HTML for it to work properly since BookStack wraps the images in

tags.

@tit1 commented on GitHub (Jan 7, 2026): This works really well, the only issue is that you need to manually edit the HTML for it to work properly since BookStack wraps the images in <p> tags.

OVERLORD commented

2026-02-05 00:12:02 +03:00

@prohtex commented on GitHub (Jan 7, 2026):

This works really well, the only issue is that you need to manually edit the HTML for it to work properly since BookStack wraps the images in

tags.

Correct. You have to wrap your images in a .image-grid to make it work, or else everything image you upload would be in an image viewer. Honestly, I can't think of a great way for BookStack to do this natively and I'm glad the core functionality has resisted creep.

@prohtex commented on GitHub (Jan 7, 2026): > This works really well, the only issue is that you need to manually edit the HTML for it to work properly since BookStack wraps the images in > > tags. Correct. You have to wrap your images in a .image-grid to make it work, or else everything image you upload would be in an image viewer. Honestly, I can't think of a great way for BookStack to do this natively and I'm glad the core functionality has resisted creep.

OVERLORD commented

2026-02-05 00:12:05 +03:00

@tit1 commented on GitHub (Jan 7, 2026):

Sorry I should be clearer. (thank you for the quick reply BTW). If you wrap the native HTML in <div class='image-grid'> CONTENT </div> the div tags are removed completely.

On opening the Coure Code editor:

<p id="bkmrk-"><a href="https://URL/uploads/images/gallery/2026-01/MrB90eblrY3CDI2Q-party-trays-general-ideas-20231111135629011.jpg" target="_blank" rel="noopener"><img src="https://URL/uploads/images/gallery/2026-01/scaled-1680-/MrB90eblrY3CDI2Q-party-trays-general-ideas-20231111135629011.jpg" alt="Party Trays - General Ideas-20231111135629011.jpg"></a></p>
<p id="bkmrk--1"><a href="https://URL/uploads/images/gallery/2026-01/HBDgEjg0nm1397Uy-party-trays-general-ideas-20231111135629041.jpg" target="_blank" rel="noopener"><img src="https://URL/uploads/images/gallery/2026-01/scaled-1680-/HBDgEjg0nm1397Uy-party-trays-general-ideas-20231111135629041.jpg" alt="Party Trays - General Ideas-20231111135629041.jpg"></a></p>

I change the html to:

<div class='image-grid'>
<p id="bkmrk-"><a href="https://URL/uploads/images/gallery/2026-01/MrB90eblrY3CDI2Q-party-trays-general-ideas-20231111135629011.jpg" target="_blank" rel="noopener"><img src="https://URL/uploads/images/gallery/2026-01/scaled-1680-/MrB90eblrY3CDI2Q-party-trays-general-ideas-20231111135629011.jpg" alt="Party Trays - General Ideas-20231111135629011.jpg"></a></p>
<p id="bkmrk--1"><a href="https://URL/uploads/images/gallery/2026-01/HBDgEjg0nm1397Uy-party-trays-general-ideas-20231111135629041.jpg" target="_blank" rel="noopener"><img src="https://URL/uploads/images/gallery/2026-01/scaled-1680-/HBDgEjg0nm1397Uy-party-trays-general-ideas-20231111135629041.jpg" alt="Party Trays - General Ideas-20231111135629041.jpg"></a></p>
</div>

If I save and reopen the Source code editor, the source has reverted:

<p id="bkmrk-"><a href="https://URL/uploads/images/gallery/2026-01/MrB90eblrY3CDI2Q-party-trays-general-ideas-20231111135629011.jpg" target="_blank" rel="noopener"><img src="https://URL/uploads/images/gallery/2026-01/scaled-1680-/MrB90eblrY3CDI2Q-party-trays-general-ideas-20231111135629011.jpg" alt="Party Trays - General Ideas-20231111135629011.jpg"></a></p>
<p id="bkmrk--1"><a href="https://URL/uploads/images/gallery/2026-01/HBDgEjg0nm1397Uy-party-trays-general-ideas-20231111135629041.jpg" target="_blank" rel="noopener"><img src="https://URL/uploads/images/gallery/2026-01/scaled-1680-/HBDgEjg0nm1397Uy-party-trays-general-ideas-20231111135629041.jpg" alt="Party Trays - General Ideas-20231111135629041.jpg"></a></p>

The only way I have been able to keep the editor from doing this is by removing the <p> .. </p> tags in the code.

EDIT: This is in the WYSIWYG editors. If i use the markdown editor (Stable content) this issue does not seem to pop-up.

Because i am inserting a ton of images my workflow is currenty:

Add all my images via the WYSIWYG editor.
Save the document
Open the document in edit mode
Switch to the Mark down editor
add the <div> tags and save the document.

@tit1 commented on GitHub (Jan 7, 2026): Sorry I should be clearer. (thank you for the quick reply BTW). If you wrap the native HTML in `<div class='image-grid'>` CONTENT `</div>` the div tags are removed completely. On opening the Coure Code editor: ``` <p id="bkmrk-"><a href="https://URL/uploads/images/gallery/2026-01/MrB90eblrY3CDI2Q-party-trays-general-ideas-20231111135629011.jpg" target="_blank" rel="noopener"><img src="https://URL/uploads/images/gallery/2026-01/scaled-1680-/MrB90eblrY3CDI2Q-party-trays-general-ideas-20231111135629011.jpg" alt="Party Trays - General Ideas-20231111135629011.jpg"></a></p> <p id="bkmrk--1"><a href="https://URL/uploads/images/gallery/2026-01/HBDgEjg0nm1397Uy-party-trays-general-ideas-20231111135629041.jpg" target="_blank" rel="noopener"><img src="https://URL/uploads/images/gallery/2026-01/scaled-1680-/HBDgEjg0nm1397Uy-party-trays-general-ideas-20231111135629041.jpg" alt="Party Trays - General Ideas-20231111135629041.jpg"></a></p> ``` I change the html to: ``` <div class='image-grid'> <p id="bkmrk-"><a href="https://URL/uploads/images/gallery/2026-01/MrB90eblrY3CDI2Q-party-trays-general-ideas-20231111135629011.jpg" target="_blank" rel="noopener"><img src="https://URL/uploads/images/gallery/2026-01/scaled-1680-/MrB90eblrY3CDI2Q-party-trays-general-ideas-20231111135629011.jpg" alt="Party Trays - General Ideas-20231111135629011.jpg"></a></p> <p id="bkmrk--1"><a href="https://URL/uploads/images/gallery/2026-01/HBDgEjg0nm1397Uy-party-trays-general-ideas-20231111135629041.jpg" target="_blank" rel="noopener"><img src="https://URL/uploads/images/gallery/2026-01/scaled-1680-/HBDgEjg0nm1397Uy-party-trays-general-ideas-20231111135629041.jpg" alt="Party Trays - General Ideas-20231111135629041.jpg"></a></p> </div> ``` If I save and reopen the Source code editor, the source has reverted: ``` <p id="bkmrk-"><a href="https://URL/uploads/images/gallery/2026-01/MrB90eblrY3CDI2Q-party-trays-general-ideas-20231111135629011.jpg" target="_blank" rel="noopener"><img src="https://URL/uploads/images/gallery/2026-01/scaled-1680-/MrB90eblrY3CDI2Q-party-trays-general-ideas-20231111135629011.jpg" alt="Party Trays - General Ideas-20231111135629011.jpg"></a></p> <p id="bkmrk--1"><a href="https://URL/uploads/images/gallery/2026-01/HBDgEjg0nm1397Uy-party-trays-general-ideas-20231111135629041.jpg" target="_blank" rel="noopener"><img src="https://URL/uploads/images/gallery/2026-01/scaled-1680-/HBDgEjg0nm1397Uy-party-trays-general-ideas-20231111135629041.jpg" alt="Party Trays - General Ideas-20231111135629041.jpg"></a></p> ``` The only way I have been able to keep the editor from doing this is by removing the `<p> .. </p>` tags in the code. EDIT: This is in the WYSIWYG editors. If i use the markdown editor (Stable content) this issue does not seem to pop-up. Because i am inserting a ton of images my workflow is currenty: - Add all my images via the WYSIWYG editor. - Save the document - Open the document in edit mode - Switch to the Mark down editor - add the `<div>` tags and save the document.

OVERLORD commented

2026-02-05 00:12:07 +03:00

@prohtex commented on GitHub (Jan 8, 2026):

Sorry I should be clearer. (thank you for the quick reply BTW). If you wrap the native HTML in <div class='image-grid'> CONTENT </div> the div tags are removed completely.

Oh, weird. Is that the WYSIWYG editor? I use the markdown editor.

@prohtex commented on GitHub (Jan 8, 2026): > Sorry I should be clearer. (thank you for the quick reply BTW). If you wrap the native HTML in `<div class='image-grid'>` CONTENT `</div>` the div tags are removed completely. Oh, weird. Is that the WYSIWYG editor? I use the markdown editor.

OVERLORD commented

2026-02-05 00:12:09 +03:00

@tit1 commented on GitHub (Jan 8, 2026):

It is. I tried both the standard WYSIWYG editor and the new WYSIWYG editor and they both cause the same issue.

@tit1 commented on GitHub (Jan 8, 2026): It is. I tried both the standard WYSIWYG editor and the new WYSIWYG editor and they both cause the same issue.

OVERLORD commented

2026-02-05 00:12:11 +03:00

@prohtex commented on GitHub (Jan 8, 2026):

It is. I tried both the standard WYSIWYG editor and the new WYSIWYG editor and they both cause the same issue.

Ah. I could see maybe making a request for a button in the WYSIWYG editor that adds an "image gallery" element that you can add stuff to. For me, I just use markdown.

@prohtex commented on GitHub (Jan 8, 2026): > It is. I tried both the standard WYSIWYG editor and the new WYSIWYG editor and they both cause the same issue. Ah. I could see maybe making a request for a button in the WYSIWYG editor that adds an "image gallery" element that you can add stuff to. For me, I just use markdown.

OVERLORD commented

2026-02-05 00:12:13 +03:00

@hotyp commented on GitHub (Jan 28, 2026):

Hello,

Thank you very much @prohtex. I have found your code snippet, which unfortunately does not work very well with a WYSIWYG editor. After some time, with the huge help of AI, I think I have found a perfect solution for a gallery inside the BookStack.

It's a combination of your code and custom button hack - https://www.bookstackapp.com/hacks/wysiwyg-custom-buttons/.

The code below adds a new button to the toolbar - Image gallery. This button inserts the table with only one cell, and a given class that is formatted by CSS. Then you just insert an image, or even drag&drop multiple images to this element. And the magic happens automatically.

Grid is created automatically - up to 4 pictures in a row. You can use multiple "galleries" on the one page. When you click on the image, the glightbox gallery opens, and you can navigate through all pictures merged from the galleries.

@ssddanbrown - As a quite simple and straightforward solution, it would be nice to integrate this somehow or at least please add this to the Hacks.

Long live the BookStack!

@tit1 - this should help you :)
@heavydetail - maybe it's interesting even for OP

Code:

<!-- Image grid -->

<style>
/* Table stays real */
.gal-tab {
  width: 100%;
  min-height: 50px;
  border-collapse: collapse;
}

/* Turn the TD into the grid container */
.image-gal td {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 12px !important;
  padding: 0 !important;
}

/* Each <p> becomes a draggable grid item */
.image-gal td > p {
  margin: 0 !important;
}

/* Anchor fills the grid cell */
.image-gal td > p > a {
  display: block !important;
}

/* Image sizing */
.image-gal img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}
</style>

<!-- GLightbox CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">

<!-- GLightbox JS -->
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
  GLightbox({
    selector: '.gal-tab a',
    touchNavigation: true,
    loop: true
  });
});
</script>

<script>
    // Listen to the BookStack pre-init TinyMCE editor event to tweak the TinyMCE config.
    window.addEventListener('editor-tinymce::pre-init', event => {
        // Gain a reference to the config object that will be used for TinyMCE.
        const mceConfig = event.detail.config;

        // Here we tweak the main toolbar, which is a long string of toolbar buttons or groups.
        // In this example, we add a custom dropdown section as defined below.
        mceConfig.toolbar += ' insert-gallery'
    });

    // Listen to the BookStack setup TinyMCE editor event to run custom actions against the editor instance.
    window.addEventListener('editor-tinymce::setup', event => {
        // Gain a reference to the TinyMCE editor instance.
        const editor = event.detail.editor;

        // Define our custom button
        editor.ui.registry.addButton('insert-gallery', {
            tooltip: 'Insert Gallery',
            // https://www.tiny.cloud/docs/advanced/editor-icon-identifiers/
            icon: 'gallery',
            onAction() {
                // The action to run when clicked.
                // Here we add a one call of the table to the editor
                // it's styled by css class image-gal aboveå
                editor.insertContent('<div class="image-gal"><table class="gal-tab"><colgroup><col style="width: 99.881%;"></colgroup><tbody><tr><td><br></td></tr></tbody></table></div>')
            }
        });
    });
</script>

@hotyp commented on GitHub (Jan 28, 2026): Hello, Thank you very much @prohtex. I have found your code snippet, which unfortunately does not work very well with a WYSIWYG editor. After some time, with the huge help of AI, I think I have found a perfect solution for a gallery inside the BookStack. It's a combination of your code and custom button hack - https://www.bookstackapp.com/hacks/wysiwyg-custom-buttons/. The code below adds a new button to the toolbar - Image gallery. This button inserts the table with only one cell, and a given class that is formatted by CSS. Then you just insert an image, or even drag&drop multiple images to this element. And the magic happens automatically. Grid is created automatically - up to 4 pictures in a row. You can use multiple "galleries" on the one page. When you click on the image, the glightbox gallery opens, and you can navigate through all pictures merged from the galleries. @ssddanbrown - As a quite simple and straightforward solution, it would be nice to integrate this somehow or at least please add this to the Hacks. Long live the BookStack! @tit1 - this should help you :) @heavydetail - maybe it's interesting even for OP <img width="1700" height="641" alt="Image" src="https://github.com/user-attachments/assets/195b3bfc-4088-4711-9c02-d24231aa3532" /> <img width="1692" height="613" alt="Image" src="https://github.com/user-attachments/assets/4fd0c0b4-ff6a-4510-814e-074a2fb94a3a" /> <img width="1704" height="1036" alt="Image" src="https://github.com/user-attachments/assets/d489ce05-f8f2-43e3-887d-64e3ea416024" /> <img width="1706" height="1314" alt="Image" src="https://github.com/user-attachments/assets/1109b020-2bf1-486b-a009-b1d8149cfd5c" /> Code: ```  <style> /* Table stays real */ .gal-tab { width: 100%; min-height: 50px; border-collapse: collapse; } /* Turn the TD into the grid container */ .image-gal td { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 12px !important; padding: 0 !important; } /* Each <p> becomes a draggable grid item */ .image-gal td > p { margin: 0 !important; } /* Anchor fills the grid cell */ .image-gal td > p > a { display: block !important; } /* Image sizing */ .image-gal img { display: block !important; width: 100% !important; height: auto !important; object-fit: cover !important; border-radius: 4px !important; } </style>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">  <script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script> <script> document.addEventListener("DOMContentLoaded", function () { GLightbox({ selector: '.gal-tab a', touchNavigation: true, loop: true }); }); </script> <script> // Listen to the BookStack pre-init TinyMCE editor event to tweak the TinyMCE config. window.addEventListener('editor-tinymce::pre-init', event => { // Gain a reference to the config object that will be used for TinyMCE. const mceConfig = event.detail.config; // Here we tweak the main toolbar, which is a long string of toolbar buttons or groups. // In this example, we add a custom dropdown section as defined below. mceConfig.toolbar += ' insert-gallery' }); // Listen to the BookStack setup TinyMCE editor event to run custom actions against the editor instance. window.addEventListener('editor-tinymce::setup', event => { // Gain a reference to the TinyMCE editor instance. const editor = event.detail.editor; // Define our custom button editor.ui.registry.addButton('insert-gallery', { tooltip: 'Insert Gallery', // https://www.tiny.cloud/docs/advanced/editor-icon-identifiers/ icon: 'gallery', onAction() { // The action to run when clicked. // Here we add a one call of the table to the editor // it's styled by css class image-gal aboveå editor.insertContent('<div class="image-gal"><table class="gal-tab"><colgroup><col style="width: 99.881%;"></colgroup><tbody><tr><td><br></td></tr></tbody></table></div>') } }); }); </script> ```

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#1184