Accommodation Type Gallery shows images in one column

[Michal]

Hello,

I’m using the MotoPress Hotel Booking plugin and recently created a custom accommodation template based on this tutorial:
https://support.motopress.com/hc/en-us/articles/38715993158292-Create-a-custom-layout-of-the-Accommodation-Page-using-the-Block-Editor

However, I’ve noticed an issue with the Accommodation Type Gallery: the images are always displayed one under another in a single column, instead of forming a proper gallery/grid.

What’s important is that this incorrect layout was happening even before I started using the custom template. So the problem does not seem to be caused by the custom template itself.

I also found and tried the solution mentioned here (2nd post):

Change Photo Gallery on property page, from grid to slideshow

But the gallery still shows images stacked vertically. Screenshot:
https://prnt.sc/AFFveBNQFwuy

Interestingly, the gallery displays correctly on the search results pages, so the issue appears only on individual accommodation type pages.

Could you please advise how to fix this gallery layout?
Is there any CSS, template override, or setting needed to ensure the Accommodation Type Gallery shows images in a grid instead of a single column?

Thank you very much for your assistance!

[J. Davis]

Hi, Perhaps the theme styles override the style of the gallery. You may provide the URL to your site so I can take a closer look at it, inspect the styles, and send you custom CSS styles to override it again.

[Michal]

This reply has been marked as private.

[J. Davis]

Hi Michal,
Thanks for your reply. I’ve found that the style of the Blocksy theme overrides the display parameter from block-inline to block. You can add the style below to Appearance > Customize > Additional CSS to override it again:

.mphb-room-type-gallery-wrapper.mphb-single-room-type-gallery-wrapper .gallery-item {
  display: inline-block;
  padding: 0.5em ;
}

[Michal]

Hello, thanks a lot! This helped.

[Michal]

This reply has been marked as private.

[J. Davis]

Hi Michal,
In the search results view, you can see the gallery, which is built of the bigger preview slider and thumbnails underneath. It is not a featured image + gallery. This type of gallery is used in the listing layouts. As for the single Accommodation Type layout, you can add a static featured image and a gallery (grid or slideshow). You can disable the link for the Accommodation Type Featured Image block to prevent reloading the page on click.

[Michal]

Hello,
thank you, I understand.
But is it somehow possible to use the same preview slider with thumbnails (the one used in the search results layout) on the Single Accommodation Type layout as well?
I would like to use that same gallery style instead of using a static featured image + separate gallery block.

Thank you for your help.

[J. Davis]

Hi Michal, as a workaround, you will need to create separate templates for each accommodation type and add the Single Accommodation Type block/widget. You will need to hide everything (title, excerpt, buttons, details, price) except the gallery.

[Michal]

OK, that would be too complicated.

One more question:
Within the “Accommodation Type Gallery” block, is it possible to display the gallery as a slider and still allow images to open in a lightbox?

Currently, when Display as Slider is enabled, it’s not possible to click on thumbnails to view images in full size. On the other hand, the Lightbox option becomes disabled (greyed out) when the slider is enabled.

Is there any workaround or recommended solution for this?

Thanks.

[Author]

Posts