Vince's Blog

Keeping you up-to-date (Jim Beam not included)

Joomla 4 Quickstart
Property Details page galleries

It's freezing rain outside and after the effort of releasing the new Joomla 4 Quickstart I'm finding myself struggling to work on more complicated projects, my brain is behaving like treacle. It doesn't help that the new puppy is fidgetting and won't let me work.

I hate not achieving anything in a day, so I thought that I'd do a quick blog post showing you how to use a new feature in Jomres 10.6 where shortcodes can dictate the template file being used somewhere within Jomres.

The Joomla 4 Quickstart doesn't come with a slideshow on the property details page. That's because the Quickstart uses the Jomres BS5 carousel slideshow plugin, which allows us to have small carousels in the module output. At the time I decided to put the question of slideshows to one side and release the Quickstart because I knew that I could do a blog post like this at a later date which will show you how to add one if you want one.

It's super easy, so, here it is.


Firstly, I'll assume that you have a copy of the J4 Quickstart installed, however you don't need to use a Quickstart (see the end of this blog post).

In the downloads section of you'll find a zip file.

In it, you'll find 3 template files.

Upload them to /templates/cassiopeia_sunbearu/html/com_jomres/ just like as in this screenshot.



Each of them produce different gallery layouts for a property.

Respectively they're called Thumbs, Lightbox & Baguette.

The first Thumbs gallery is a fullscreen gallery where clicking the thumbnail will switch to the related image. The second (Lightbox) and third (Baguettebox) will open an image in a popup when the thumbnail is clicked.

Of these three, I liked the baguettebox output in the property_details.html template the best, however your tastes may vary.

These can all be called as a shortcode from within another (Jomres) template file. Here's what it looks like within the property_details.html template file that lives in /templates/cassiopeia_sunbearu/html/com_jomres/

You will need to modify your own copy of property_details.html or property_header.html in the same way.

Don't worry, it'll never be overwritten on update.


If you want to put the gallery into the property_header.html template, use one of these shortcodes :

{jomres_script show_property_slideshow &property_uid={PROPERTY_UID}&image_size=large&slideshow.html=slideshow_thumbs.html}
{jomres_script show_property_slideshow &property_uid={PROPERTY_UID}&image_size=large&slideshow.html=slideshow_lightbox.html}
{jomres_script show_property_slideshow &property_uid={PROPERTY_UID}&image_size=large&slideshow.html=slideshow_baguettebox.html}

To add the gallery to the property_details.html template, use one of these shortcodes :

{jomres_script show_property_slideshow PROPERTY_UID=N&image_size=large&slideshow.html=slideshow_thumbs.html}
{jomres_script show_property_slideshow PROPERTY_UID=N&image_size=large&slideshow.html=slideshow_lightbox.html}
{jomres_script show_property_slideshow PROPERTY_UID=N&image_size=large&slideshow.html=slideshow_baguettebox.html}

If you want to show one of these gallery items somewhere else entirely, eg. in a Joomla module (remember to set Prepare Content to Yes in the module's Options setting tab), you can use the shortcodes

{jomres show_property_slideshow &property_uid=1&image_size=large&slideshow.html=slideshow_thumbs.html}
{jomres show_property_slideshow &property_uid=1&image_size=large&slideshow.html=slideshow_lightbox.html}
{jomres show_property_slideshow &property_uid=1&image_size=large&slideshow.html=slideshow_baguettebox.html}

I have to admit, I was chuffed to bits with how easy it was to build these galleries. It's great to have Jomres to a point where adding things like these galleries is as simple and straightforward as this.


You don't NEED to be running the Quickstart to use these galleries. If you have a Jomres installation but you're using your own template then copy property_details.html into your own template's directory, in a sub directory called /html/com_jomres and put the gallery files in the same directory.

Install the Jomres Core plugin Bootstrap 5 Carousel in the Jomres Plugin Manager, then edit /html/com_jomres/property_details.html as described in this article and you should be good to go.



vince picDeveloped and maintained by Vince Wooll, Jomres was initially conceived in early 2005 as a Mambo based solution to a client’s hotel management needs. While it wasn't originally expected to be an online booking system it quickly morphed into one as users requested more and more features.

As the number of feature requests grew Vince knew that he would need to dedicate more time to the project and in July 2005 Jomres was released as a commercial project. Since then Jomres has become the world's oldest online booking plugin for any PHP CMS. It has been used in Joomla 1.0, 1.5, 2.5, 3 & 4 and WordPress 4, 5 & 6.

Aladar joined the project in 2010 after using Jomres for his own projects. He was active on the forum, helping other members of the community and eventually Vince invited him to join the team. Between 2010 and 2018 he was an integral part of the project and made many significant contributions.

Whilst not formally part of the Jomres project, Rodrigo Rocco and Vince have become firm friends. Rod is a freelancer who specialises in doing custom work for Jomres users and developing custom plugins for the system that take advantage of it's modular design. He has built many useful extensions including his fabulous Valentina Template Override Package.

Jomres and the Jomres Logo is trademarked and can't be used without written consent from the owner. is not affiliated with or endorsed by the Joomla! Project, Open Source Matters or the WordPress project. The Joomla! & WordPress names and logos are used under a limited license granted by Open Source Matters and the WordPress Projects.

© Copyright 2005 - 2022 Vince Wooll