Joomla4 uses Bootstrap 5. Though I don't like using Bootstrap voor layout, I do like using it's components, such as Accordion, Carousel and Modal. They let me do nifty things without any coding. So to try this out, I wrote a nice piece of html with Bootstrap toggles, in order to show a gallery of images with each image clickable to open a larger image in a "lightbox" or pop-up. This can be done quite easily with the Bootstrap Modal component.
I first made this in a flat HTML file, and it turns out you can connect to a Bootstrap CDN, which delivers all Bootstrap CSS and JS with a minimum of fuss. Nice! My HTML page was rendering beautifully, so I popped the whole thing into a Joomla module (just the HTML, not stuff like <head>, obviously).
The gallery showed, no problem. But nothing happened on click. I was stumped. My feeling was that the necessary Bootstrap JS to catch the data-toggle was missing.
Went to the forum - and there, user Ceford really did a lot of research to help out. Long story short: he found the solution!
Turns out that Joomla 4 introduces a modular approach for interactive components. In other words: not all Bootstrap JS is loaded automatically, you need to call the files you need yourself. Explanation by dgrammatiko on Github. So I added two lines in the PHP section of my index.php:
//Load specific bootstrap js \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.modal', '.selector', ); \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.carousel', '.selector', );
That did the trick. However: editing the template's index.php is not recommended - for one thing, it'll get overridden in the next update.
The way to do this, is to make a template override in a custom module. Ceford has added the information to the Joomla Docs: Using Bootstrap Components.
My clickable dogs have now been added using a custom module.
It is very nice to know I no longer need to use an extension if I want to show a picture in a "lightbox"! 😊