How to Modify the Rooms section

Topic Level: Advanced Web Design

Jade Web Design Editor >View >Jade HTML Code

Property pages > Rooms

How the Rooms section is generated

The Room segment represents one row in the Rooms table. The row is laid out as follows.

<td width="20%"class="property_RoomType" valign="top">{property.room field="roomtype"}</td>

<td width="25%" valign="top">{property.room field="dimensions"}</td>

<td width="20%" valign="top">{property.room field="floor"}</td>

<td valign="top">{property.room field="comments"}</td>

</tr>

Room Type

Dimensions

Floor

Comments

The Rooms table itself is in the Category pages template as follows:

<td class="property_sectionheader">Rooms</td>

</tr>

</table>

{property.rooms}

</table>

The Room segment is included in the table by means of {property.rooms}. Jade generates a row for every room in the property record. If a property has no rooms data, this table will not be created.

Example 1: Create a simple bulleted list of rooms

In this example, the only field that is used is the Room Type. The code in the Room segment would look like this:

<li class="property_RoomType">{property.room field="roomtype"}</li>

This will produce output in this format:

•

Kitchen

•	Master Bedroom

•	Living area

Example 2: Create a table layout with fewer fields.

The default design can be quickly edited so that it uses different fields, In this example, the only fields that are used are the Room Type and the Room Comments.

<td width="20%"class="property_RoomType" valign="top">{property.room field="roomtype"}</td>

<td valign="top">{property.room field="comments"}</td>

</tr>

This will produce a layout like this:

Room Type

Comments

Example 3: Create a layout that includes room images

The Property details page can show room images as well as property images. The default design does not include room images and will look well no matter what has been entered on the Rooms tab.

When the room image tag is used, every room entered in the database should always have an image - otherwise the layout is not likely to be attractive. If the agency cannot commit to this, it would be better not to use the room image tag.

To include the room image field, insert this tag in the Room segment:

{property.room.image.url}

Tip:

If you do not like the changes you make, you can revert the entire segment to the default layout (select Tag > Revert to original).