How to Change Your Property Details View Quickly and Easily
By Matt Williams
At Placester we work really hard to make the best themes for Real Estate. In fact, we include a large number of page templates in every theme that are designed to cover most of your needs as a realtor. But we can’t think of everything and that’s why we created our Shortcodes.
Placester Shortcodes allow you to quickly build a customized section more tailored to your needs. For instance, I can create a search form that lets you enter an MLS ID, or allows your customer to search in other interesting ways. I can create a page that filters listings by zipcode or agent ID. I can create top picks, or featured listings. For an intro to Shortcodes, check out this post.
One of the often overlooked features of Shortcodes is the Listing Details Template. With a Listing Details Template, you can customize the details view for your listing. This means its up to you to define whether the image is big and at the top or smaller and to the right. You can style the address however you like. You can conform to the style of your existing theme, or come up with something very new.
For this example I thought it might be fun to show the listing details in the form of the standard nutritional information block on every commercial food item in the US. I found a version of this on codepen written by Chris Coyier so decided to use that as a base.
First I copied the HTML to the HTML section of the Listing Details Template. Then I copied the Compiled Preview of the CSS into the CSS section of the Details Template. Next I replaced the different nutritional values with the Template Tags shown on the right side of the Listing Details Template screen.
Most of these fields are fairly obvious: [address] is the street address, [amenities] is a list of the amenities. But others may not be: [locality] is a city. You can also include any other value that is part of your feed but may not be displayed in the Template Tags list. To do this you use the custom tag.
Click on custom on the right side and scroll down to the link at the bottom of the explanation. Click the here link. This brings up a list of all the attributes and what they mean. Lets say I want to include the Agent Name who represents this listing. The explanation for custom does quite a good job of explaining how to fill this in. I can create a custom tag that looks like this:
[custom group=rets attribute=aname]
When everything is included in the right place, click Publish. Now click on the Listing Details Templates link at the top of the page and choose your new template from the dropdown. Finally, visit a property details page to see your new handiwork. You can see my Property Details page below.
Have you built an interesting Property Details page? Share it with the community using the comments below.
Published on December 10, 2013
Written by Matt Williams
I am all about getting developers excited and efficient at using the Placester platform. To achieve this, I write blog posts, film videos, create code samples, and answer all of the more technical questions that come in our our support lines. Before joining the team at Placester, I held similar roles at Yottaa, Open Text, Microsoft, along with consulting roles at Oracle, Sun, Intel, IBM, and many others.