Blog

How To Integrate 3rd Party Sliders such as RoyalSlider with Placester Property Images

By Matt Williams

Developers

At Placester, we prefer to offer support through email at support@placester.com. But since the plugin is available on WordPress.org, we also provide some support through the plugin page. One of the questions that came up recently was about implementing the RoyalSlider plugin with our property listings. The developer saw that in the version of the plugin currently on WordPress.org, we still have the properties custom post type and want to add a featured image to the post so that the slider would automatically pick it up.

Adding custom anything to the CPT “Property” is always a bad idea. We use this for some basic metadata while generating the property page, but any information added to the post will generally be ignored. In fact in the newest version of the plugin currently on our hosted platform, we have removed the CPT altogether. This has resulted in a huge performance gain in our specialized scenario.

The right way to use this slider, or pretty much any slider, is to use just a tiny bit of PHP on your page to pull out the information you are looking for. Since you are editing the page to add the slider, adding a few more lines of PHP should be pretty easy too.

The key to this solution was the documentation provided by the author of RoyalSlider, Dmitry Semenov. You can find those docs here. Up near the top of the documentation is an example of the format images should be supplied in, slightly modified here:

<div class='royalSlider rsDefault'>
  <img class='rsImg' src='imageurl'/>
  <img class='rsImg' src='imageurl'/>
  <img class='rsImg' src='imageurl'/>
</div>

The only question is how do you get the images in here. Since the original poster wanted the first image of each property shown, we can do that with a few lines of code:

<div class='royalSlider rsDefault'>
<?php
$listings = PL_Listing::get();
	foreach ($listings[listings] as $listing)
		echo "<img class='rsImg' src='" . $listing[images][0][url] . "'/>";
?>
</div>

Now if your feed has a lot of listings, then you are going to want to filter down the listings. To keep things simple, I just want the first 10 images, so I can change the code as follows:

$listings = PL_Listing::get(array('limit' => 10));

Of course to get this to work, I had to pair it up with the actual slider code. I just took the code in the docs and combined it with a few configuration options and I quickly had something that works incredibly well. You can see the results in this Gist I created on GitHub: https://gist.github.com/technovangelist/9117720.

I was really impressed with how easy it was to implement the RoyalSlider using Placester property images. Dmitry has done a great job creating very easy to use docs and I hope you will check it out if you have a need for a slider in your next web project.

Comments

Get our Newsletter
Follow Placester