Photo Gallery turns a property’s photos into an Airbnb-style browsing experience, a hero grid, a full-screen photo browser, and a swipeable mobile carousel, so guests can explore a listing the way they already expect to.
What it does #
Guests judge a rental heavily on its photos, and a plain photo strip or single slideshow undersells a property that actually looks great in person. Photo Gallery presents your property’s photos the way major booking sites do: one large photo up front, a handful more sitting alongside it, and a “Show all photos” button that opens everything in a full-screen browser.
Here is what a guest experiences on a property page:
- The property’s first photo appears large and prominent, with up to four more shown beside it.
- A Show all photos button opens every photo in a full-screen browser, laid out in an easy-to-scan mix of full-width and paired rows.
- Clicking any photo, in the grid or the full-screen browser, opens it at full size in a dark, Airbnb-style single-photo view, with a Close button and a “2 / 14” counter in the header, and arrow buttons (or the left and right arrow keys) to step through the rest.
- Opening and closing the full-screen browser plays a short, smooth fade, and stepping between photos in the single-photo view fades the incoming photo in. Guests who have reduced motion turned on in their device skip the animation entirely.
- On phones, the hero area itself becomes a swipeable carousel, with a small counter (for example, “2 / 14”) that always shows the guest where they are in the set.
Photo Gallery does not resize, crop, or reorder anything on its own. It shows your property’s photos in the order they are already saved, and whichever photo is first becomes the large hero image. If a property has fewer than five photos, the grid simply shows however many are available, with the “Show all photos” button on the last one. If a property has no photos saved at all, the gallery area shows a plain note, “No photos found for this property,” instead of leaving a broken or empty gap.
Every photo loads at a size matched to the visitor’s screen, and the hero photo is prioritized so it appears quickly, so pages load fast without sacrificing image quality.
Photo Gallery displays still photos only. Video is not currently supported.
How to turn it on #
- In the HomeRunner Toolkit Hub, switch on Photo Gallery.
- In your page builder, add the shortcode
[hrtk_photo_gallery]to the property page template, or to any specific page where you want the gallery to appear. Or, if your property page already uses the default photo slider, turn on Replace the photo slider section below and skip the shortcode entirely. - That is the whole setup. There is no separate photo upload step, the gallery reads directly from the photos already saved on each property listing.
If your site was already using the older Property Gallery shortcode from a WPCode snippet, [property_photo_gallery], you do not need to change anything. That tag still works exactly the same way, so existing templates keep rendering as-is.
By default, the gallery shows the photos of whichever property page it is placed on. To point it at a specific listing instead, for example, featuring one property’s photos on a different page, add that property’s ID: [hrtk_photo_gallery id="123"].
By default, the hero grid stretches to the full width of its container. To cap and center it instead, turn off Full width gallery below and set a Maximum width. You can also override the width for one placement of the shortcode without touching the Hub setting, for example [hrtk_photo_gallery max_width="900"], or [hrtk_photo_gallery max_width="0"] to force that one placement full width regardless of the Hub setting.
Settings #
| Setting | What it controls |
|---|---|
| Replace the photo slider section | On single property pages, automatically swaps the default photo slider for Photo Gallery, no template editing or shortcode placement needed. If your page template already places [hrtk_photo_gallery] directly, or a property has no photos, the page is left untouched. Off by default. |
| Full width gallery | The hero grid stretches to the full width of its container. Turn off to cap the gallery at a maximum width and center it. On by default. |
| Maximum width | Pixel cap applied when Full width gallery is off, between 320 and 3000. Default: 1200px. The [hrtk_photo_gallery] shortcode can override it per placement with max_width="…" (use 0 for full width). |
Tips #
- Photo Gallery is commonly placed as one section of a property page alongside other single-property elements. See Single Property Homepage for how those pages are typically laid out, and Property Section Nav if your property pages use section navigation.
- If the gallery shows “No photos found for this property,” the listing itself does not have photos saved yet. Add photos to the property record, not just the page, and the gallery picks them up automatically.
- Only one Photo Gallery can appear on a page at a time. If the shortcode has been added more than once (for example, in both a template and the page content), only the first one renders, remove the extra one. Replace the photo slider section stands down automatically if the shortcode is already present, so the two options do not conflict.
- Captions saved on individual photos double as the descriptive text screen readers announce for that photo, so it is worth keeping them accurate and specific.