Hi all,
My new project shall be a photo viewer. But I want this completely dynamic by simply reading a folder (selected in a tree view) and add everything inside (live on the page). Do you have any idea where to find information on this topic? What can be a simple strategy to realize this?
Thanks in advance…
Best regards,
Steffen
Hi Steffen,
What you’re asking—having a web page dynamically read a folder on your computer or server and display all the images “live” just by selecting it—is beyond what Bootstrap Studio can do out of the box. Bootstrap Studio is primarily a front-end design tool, which means it’s focused on generating HTML, CSS, and JavaScript that runs in the browser. Browsers cannot directly access local folders for security reasons, so you can’t just point a page at a folder and have it auto-populate with images without some kind of server-side logic.
In practical terms, a solution like this typically requires:
Server-side code: A language like PHP, Python, Node.js, or similar to read the folder on the server and generate a list of image files.
AJAX or dynamic front-end code: JavaScript to request that list from the server and update the page dynamically.
File management/security: Making sure the server only exposes the files you want and doesn’t allow access to sensitive folders.
For someone without programming experience, this can be a steep hill—there isn’t a simple “drag and drop” solution for dynamic folder reading in Bootstrap Studio.
AI tools like ChatGPT, Gemini, Claude, or Grok can assist you in building this system without you having to start completely from scratch:
You can describe your goal (e.g., “I want a web page that shows all images in a folder dynamically”) and ask the AI to generate server-side scripts and matching JavaScript front-end code.
These tools can explain the steps to set up a local or web server, create the folder structure, and integrate the code into a Bootstrap-based design.
You can even iterate with the AI, refining the code until it fits your design and workflow. For instance, you could ask:
“Give me a PHP script that reads a folder and returns JSON with all image URLs.”
“Now give me JavaScript code that fetches this JSON and dynamically creates an image gallery in Bootstrap.”
Using AI doesn’t eliminate the need to host the files on a server or run some basic scripting, but it removes most of the manual coding and teaches you the steps as you go.
In short: Bootstrap Studio alone won’t do this. With some guidance and AI-generated scripts, you can build a dynamic gallery in a manageable way—even if you’re not a programmer.
You could take a look at nanogallery2
Use the builder set to self hosted.
If you are using your own server and not bss hosting then a php solution would be quite simple
Wow… Thank you both!!
I have some experiences in php an Javascript. I was looking for the BS components to address. Thought there is something available. Lightbox looks very nice. I will have a closer look!!
Best regards,
Steffen
I use Nanogallery2 on many of my websites. There are a few minor things that bug me about it, but it’s pretty much still the best gallery app out there.
Thank you all for the information / Links
Think I will need to read a lot. Maybe a faster alternative is to think about a media server solution. which runs on Mac mini. I also have a Synology and “photos” might be an alternative but I’m not very happy with the client side….its ugly 
What about this one?
This looks exactly like what @Wing2005 was looking for, great find!
Hi @parmaster ,
NovaGallery is very nice…. in the Demo. I checked all the comments in the doc and GitHub but did not manage to get it working. I managed to create some folders which are now (after modifying the config an .htaccess-File) visible. Some sample images are visible as well but they are not accessible. Only the file existence is visible (empty box with a question mark, no thumbnail). When I try to open the image, there is a promo with fie not found… Do you have experiences with nova gallery?
I don’t know what you have done.
I extrcted the files to my webspace, edited the config file, uploaded some images and it was ready.
Think we did the same. I’m using Xampp.
I don’t know because I installed it in a subdomain and not in a subfolder so I don’t need to mdify the .htaccess file.
I think you did something wrong with the htaccess file.
If you want you can post it here and we can have a look at it.
I wonder if the image files might have been corrupted while uploading (eg, unwanted binary-to-text translation). Try to download an image from the server and see if it can be viewed.
@Gondwana : Not sure why but I will find out…. I downloaded a file from the demo-project…. tada… working. Thank you very much for this!!
@allall: This is a really good variant. I will test with more pictures but think that’s what I’ve been looking for… Thank you very much!!
Seems like it’s caused by the export method of apple foto. If I chose export originals, it does not work… but when I simply export jpeg…all is fine.
Maybe the “originals” aren’t in a web-standard file or image format that can be displayed by web browsers.
Ah yes, fotos from Apple iPhone are in “Apple RAW” format. If you want to export them you need to chose another format.
You can also check out Astro Build. It can build galleries from folders and generate a website with zero JavaScript.
Here’s an example:
This looks nice, too.
Is this the right URL for Atro Build?
If yes, how did you build the gallery?
And how did you build the other gallery with Web Worker Gallery ?