# How to add image carousel

**URL:** <https://community.hivepress.io/t/how-to-add-image-carousel/6852>\
**Category:** RentalHive\
**Tags:** rentalhive\
**Created:** [August 2, 2023, 10:12am UTC](https://community.hivepress.io/t/how-to-add-image-carousel/6852 "2023-08-02T10:12:56Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![mbm](https://community.hivepress.io/letter_avatar_proxy/v4/letter/m/b9bd4f/32.png) [@mbm](https://community.hivepress.io/u/mbm)\
**Post date:** [August 2, 2023, 10:12am UTC](https://community.hivepress.io/t/how-to-add-image-carousel/6852/1 "2023-08-02T10:12:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![andrii](https://community.hivepress.io/user_avatar/community.hivepress.io/andrii/32/2951_2.png) [@andrii](https://community.hivepress.io/u/andrii)\
**Post date:** [August 3, 2023, 2:21pm UTC](https://community.hivepress.io/t/how-to-add-image-carousel/6852/4 "2023-08-03T14:21:48Z")

</div>

Hi,

This can be done by overwriting the template parts; you can check this doc [How to override template parts - HivePress Help Center](https://help.hivepress.io/article/155-how-to-override-template-parts). 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.

---

<div class="post-metadata">

**Author:** ![mbm](https://community.hivepress.io/letter_avatar_proxy/v4/letter/m/b9bd4f/32.png) [@mbm](https://community.hivepress.io/u/mbm)\
**Post date:** [August 4, 2023, 7:43am UTC](https://community.hivepress.io/t/how-to-add-image-carousel/6852/5 "2023-08-04T07:43:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![andrii](https://community.hivepress.io/user_avatar/community.hivepress.io/andrii/32/2951_2.png) [@andrii](https://community.hivepress.io/u/andrii)\
**Post date:** [August 4, 2023, 1:34pm UTC](https://community.hivepress.io/t/how-to-add-image-carousel/6852/8 "2023-08-04T13:34:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mbm](https://community.hivepress.io/letter_avatar_proxy/v4/letter/m/b9bd4f/32.png) [@mbm](https://community.hivepress.io/u/mbm)\
**Post date:** [August 4, 2023, 1:47pm UTC](https://community.hivepress.io/t/how-to-add-image-carousel/6852/9 "2023-08-04T13:47:56Z")

</div>

Could you be more explicit?

---

<div class="post-metadata">

**Author:** ![andrii](https://community.hivepress.io/user_avatar/community.hivepress.io/andrii/32/2951_2.png) [@andrii](https://community.hivepress.io/u/andrii)\
**Post date:** [August 7, 2023, 1:19pm UTC](https://community.hivepress.io/t/how-to-add-image-carousel/6852/12 "2023-08-07T13:19:16Z")

</div>

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](https://help.hivepress.io/article/155-how-to-override-template-parts). If you require customization and specific information, we suggest considering hiring a professional from Fiverr. Please note that our guide contains only general recommendations.

---

<div class="post-metadata">

**Author:** ![aming4stars](https://community.hivepress.io/user_avatar/community.hivepress.io/aming4stars/32/8939_2.png) [@aming4stars](https://community.hivepress.io/u/aming4stars)\
**Post date:** [August 11, 2023, 10:49pm UTC](https://community.hivepress.io/t/how-to-add-image-carousel/6852/13 "2023-08-11T22:49:06Z")

</div>

@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)??

---

<div class="post-metadata">

**Author:** ![mbm](https://community.hivepress.io/letter_avatar_proxy/v4/letter/m/b9bd4f/32.png) [@mbm](https://community.hivepress.io/u/mbm)\
**Post date:** [August 17, 2023, 2:25pm UTC](https://community.hivepress.io/t/how-to-add-image-carousel/6852/14 "2023-08-17T14:25:28Z")

</div>

Unfortunately no, I don’t master the code.

---

<div class="post-metadata">

**Author:** ![shimazakinori](https://community.hivepress.io/user_avatar/community.hivepress.io/shimazakinori/32/6329_2.png) [@shimazakinori](https://community.hivepress.io/u/shimazakinori)\
**Post date:** [August 17, 2023, 2:58pm UTC](https://community.hivepress.io/t/how-to-add-image-carousel/6852/15 "2023-08-17T14:58:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![aming4stars](https://community.hivepress.io/user_avatar/community.hivepress.io/aming4stars/32/8939_2.png) [@aming4stars](https://community.hivepress.io/u/aming4stars)\
**Post date:** [August 17, 2023, 3:42pm UTC](https://community.hivepress.io/t/how-to-add-image-carousel/6852/16 "2023-08-17T15:42:48Z")

</div>

@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! 😉

---

<div class="post-metadata">

**Author:** ![mbm](https://community.hivepress.io/letter_avatar_proxy/v4/letter/m/b9bd4f/32.png) [@mbm](https://community.hivepress.io/u/mbm)\
**Post date:** [August 18, 2023, 2:38pm UTC](https://community.hivepress.io/t/how-to-add-image-carousel/6852/17 "2023-08-18T14:38:54Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![mbm](https://community.hivepress.io/letter_avatar_proxy/v4/letter/m/b9bd4f/32.png) [@mbm](https://community.hivepress.io/u/mbm)\
**Post date:** [August 18, 2023, 2:40pm UTC](https://community.hivepress.io/t/how-to-add-image-carousel/6852/18 "2023-08-18T14:40:11Z")

</div>

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;

---

<div class="post-metadata">

**Author:** ![system](https://community.hivepress.io/user_avatar/community.hivepress.io/system/32/13990_2.png) [@system](https://community.hivepress.io/u/system)\
**Post date:** [September 17, 2023, 2:40pm UTC](https://community.hivepress.io/t/how-to-add-image-carousel/6852/19 "2023-09-17T14:40:31Z")

</div>

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