Change Photo Gallery on property page, from grid to slideshow

[Lok Cheung]

Hi,

I set up photo gallery for each accommodation type, when using search function to list rooms, every photo gallery is showing in a nice way, that is a main photo window on top and a thumbnail photo index window on bottom, both windows can slide left and right so I can put as many as photos into a photo gallery. But when going onto the “View Detail” page or pressing “continue reading”, the same photo gallery will be shown in a different way, i.e. tiled mosaic or thumbnail grid, and ALL photos will be listed out! Is it possible to use the main-and-index window style to show photos for all situations? Thanks.

Regards,
-Lok

[Stacy Lind]

Hi Lok,

Copy the file gallery.php from

wp-content\plugins\motopress-hotel-booking\templates\single-room-type\

and paste it to

wp-content\themes\your_theme\hotel-booking\single-room-type\

(you would need to create the folders ‘hotel-booking\single-room-type’ within your theme’s folder).

Then open the file

wp-content\themes\your_theme\hotel-booking\single-room-type\gallery.php and substitute this line:

<?php mphb_tmpl_the_single_room_type_gallery(); ?>
with the following:
<?php mphb_tmpl_the_room_type_flexslider_gallery(); ?>
This will display the slider gallery on the accommodation pages.

If you do not feel comfortable editing the code, we could do it for you with the extended support offer.

[Lok Cheung]

Thanks, Stacy. It works basically as expected except the “< Previous” and “> Next” slider prompts are shown right under the main photo area and the thumbnail index area. They should be shown on both sides inside the photo areas, right? Is it relating to the style sheet or so? Thanks.

Regards,
-Lok

[J. Davis]

Hi Lok,

Yes, it requires to adjust style of link so you can ty using the style below to remove underline:

.flex-direction-nav a{
	text-decoration:none;
}

best regards,
John

[Lok Cheung]

Thanks, John. I put your code into the “Additional CSS” section but it doesn’t take any effect. Any further suggestion?

You could also check out this link https://mpcottages.com/accommodation/the-starfish/. Thanks.

Regards,
-Lok

[J. Davis]

Hi Lok,

In order to apply the proper styles you should also replace the lines below in wp-content\themes\your_theme\hotel-booking\single-room-type\gallery.php file

do_action( 'mphb_render_single_room_type_before_gallery' );

with

do_action( 'mphb_render_loop_room_type_before_gallery' );

and

do_action( 'mphb_render_single_room_type_after_gallery' );

with

do_action( 'mphb_render_loop_room_type_after_gallery' );

best regards,
John

[Lok Cheung]

It works perfectly! Many thanks, John.

Regards,
-Lok

[Giovanni Luigi Mascia]

For me this is almost working well, but the images are very small, is it possible to change to full size? You can check here:

Appartement ‘Basilico’ (Incl. Ontbijt)

[Andre Flores]

Hello Mathijs,

I have checked your page and looks like you have already managed to make the image larger. Let me know if you need further assistance.

Regards,
Andre

[Giovanni Luigi Mascia]

The image should become larger in width. Is this possible?

[Andre Flores]

Hello Mathijs,

Kindly submit your request to our Help Desk providing temporary access to your WordPress dashboard, so we take a closer look at the issue.

Regards,
Andre

[Author]

Posts