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 Jomres.net 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.