How to add image carousel

Hello,
In a previous topic, you said that it’s possible to get the listingHive theme for the ad image carousel to replace the Rentalhive theme (RentalHive has full-width slider layout by default. It’s possible to customize it, but this would probably require CSS tweaks or overriding the /listing/page/listing-images.php template part via a child theme (e.g. you can copy this template part from our ListingHive theme if you find its slider layout better).
Can you tell me where to find the php file in ListingHive to put in place of Rentalhive’s listing-images.php. I need to create a series of folders in my child theme as follows: hivepress/listing /page/ and replace the contents of listing-images.php with the contents of the ListingHive php file? Is that correct?
Thank you for this help

1 Like

Hi,

This can be done by overwriting the template parts; you can check this doc How to override template parts - HivePress Help Center. But note that there is no simple setup here. Even if you overwrite these template parts, you may need further customization.

I believe this will be useful to you.

Thank you for your reply,
However, where can I find the .php page corresponding to the carousel on the ListingHive template (on Rentalhive, it’s the listing-images.php page). I can’t find it anywhere on LisitngHive. I then freshen up the adaptation on RentalHive, using the child theme.

Hi,

You need to copy this template part from the HivePress plugin (hivepress\templates\listing\view\page\listing-images.php) because ListingHive does not have such a template part; this theme uses the default one from HivePress.

Could you be more explicit?

Hi,

To properly override the template, kindly follow the instructions we provided earlier. Additionally, you may refer to the documentation for further guidance on the process How to override template parts - HivePress Help Center. If you require customization and specific information, we suggest considering hiring a professional from Fiverr. Please note that our guide contains only general recommendations.

@mbm , did you mange to do this?

I also want to remove the carousel and replace it with the standard image in rentalHive! It’s neet when renting out housing but not for other stuff.

I havn’t had the time to try this out yet. As Andrii mentions in his first reply, further costumizations may be needed. Did you have to do anything else except replacing the hivepress\templates\listing\view\page\listing-images.php in the child-theme (if you succeded)??

Unfortunately no, I don’t master the code.

The only way is to override, it’s not that hard after you watch the videos.

You have to either create a new template from child (there is a tutorial for that).

And/Or you have to write code to override in functions.php.

He cannot be more explicit than that because that’s the answer. More than that would be working your custom case.

@mbm and I also tried to figure it out for the last 40 minutes. But no success.

I created a child theme, as many times before, and I know it works well.
But in this case it is not simply repacling a file with another as in the documentation, there is no file with the same name in the theme folder to replace.

@shimazakinori, that’s why I wouldn’t really say this is working our custom case, it’s rather not understaning how the theme is built. Costumisation is key in every theme! You are welcome to show how easy it is if you want! :wink:

Hello,
Here’s what I’ve done:

  • install the listingHive theme, activate and deactivate it
  • activate the child theme
  • create the listing-images.php file in the child theme (hivepress/listing/view/page)
    Then I pasted the following code:
<?php // Exit if accessed directly. defined( 'ABSPATH' ) || exit; if ( $listing->get_images__id() ) : $image_urls = []; if ( get_option( 'hp_listing_enable_image_zoom' ) ) : $image_urls = $listing->get_images__url( 'large' ); endif; ?>
<div class="hp-listing__images" data-component="carousel-slider" data-width="800">
	<?php
	foreach ( $listing->get_images() as $image_index => $image ) :
		$image_url = hivepress()->helper->get_array_value( $image_urls, $image_index );

		if ( strpos( $image->get_mime_type(), 'video' ) === 0 ) :
			?>
			<video data-src="<?php echo esc_url( $image_url ); ?>" controls>
				<source src="<?php echo esc_url( $image->get_url() ); ?>#t=0.001" type="<?php echo esc_attr( $image->get_mime_type() ); ?>">
			</video>
		<?php else : ?>
			<img src="<?php echo esc_url( $image->get_url( 'hp_landscape_large' ) ); ?>" data-src="<?php echo esc_url( $image_url ); ?>" alt="<?php echo esc_attr( $listing->get_title() ); ?>" loading="lazy">
			<?php
		endif;
	endforeach;
	?>
</div>
<?php

endif;
And that’s all!

code:

<?php // Exit if accessed directly. defined( 'ABSPATH' ) || exit; if ( $listing->get_images__id() ) : $image_urls = []; if ( get_option( 'hp_listing_enable_image_zoom' ) ) : $image_urls = $listing->get_images__url( 'large' ); endif; ?>
<div class="hp-listing__images" data-component="carousel-slider" data-width="800">
	<?php
	foreach ( $listing->get_images() as $image_index => $image ) :
		$image_url = hivepress()->helper->get_array_value( $image_urls, $image_index );

		if ( strpos( $image->get_mime_type(), 'video' ) === 0 ) :
			?>
			<video data-src="<?php echo esc_url( $image_url ); ?>" controls>
				<source src="<?php echo esc_url( $image->get_url() ); ?>#t=0.001" type="<?php echo esc_attr( $image->get_mime_type() ); ?>">
			</video>
		<?php else : ?>
			<img src="<?php echo esc_url( $image->get_url( 'hp_landscape_large' ) ); ?>" data-src="<?php echo esc_url( $image_url ); ?>" alt="<?php echo esc_attr( $listing->get_title() ); ?>" loading="lazy">
			<?php
		endif;
	endforeach;
	?>
</div>
<?php

endif;

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.