Working With Staff

The Homeflow API allows you to add and query all manner of agency staff information and output it to your site wherever you choose.

Add/query basic information

Your first port of call before we can query any of the staff information is to add some. The Homeflow platform has hundreds if not thousands of profiles already loaded, so you might find we already have staff on record. That aside, log on to your agency admin and navigate to: /configure/business/staff. From here follow the links to add/modify/remove staff as required.

note: Staff members will not appear in the live data until they have both and avatar and either sales/lettings enabled.

Let’s start with the staff index - the entry point that lists all staff members. This index.liquid file should live within a staff folder in your repository. A simple loop to retrieve all staff could be:

{% for profile in agency.staff_profiles %}
 <img src="{{ profile.avatar | url_for_staff_profile_avatar : "x97" }}"
 alt="{{ profile.name }}" width="97">
 <div>
  <h1>{{ profile.name }}, {{ profile.job_title }}</h1>
  <p>{{ profile.short_bio }}</p>
  <a href="{{profile | url_for_staff_member}}">Contact {{ profile.name }}</a>
 </div>
{% endfor %}

The next page you will want to create is the staff show page - show.liquid. This page does not require any kind of loop and instead you can simply use the staff_member drop to access the information you require. Here’s a typical construct you might come across:

<div class="span6">
 <h4>{{staff_member.name}}</h4>
 {% if staff_member.long_bio %}
  <p>
   {{staff_member.long_bio}}
  </p>
 {% endif %}
 <div class="social">
  {% if staff_member.facebook_uri %}
   <p>
    <a href="{{ staff_member.facebook_uri }}">
     <img src="{{ "facebook_50x50.png" | theme_image_url }}" width="21" height="21">
    </a>
   </p>
  {% endif %}
  {% if staff_member.twitter_uri %}
   <p>
    <a href="{{ staff_member.twitter_uri }}">
     <img src="{{ "twitter_50x50.png" | theme_image_url }}" width="21" height="21">
    </a>
   </p>
  {% endif %}
  {% if staff_member.linkedin_uri %}
   <p>
    <a href="{{ staff_member.linkedin_uri }}">
     <img src="{{ "linkedin_50x50.png" | theme_image_url }}" width="21" height="21">
    </a>
   </p>
  {% endif %}
 </div>
</div>
<div class="span6">
 {% if staff_member.avatar %}
  <img src="{{ staff_member.avatar | url_for_staff_profile_avatar : "300x_" }}" />
 {% else %}
  <img src="{{ 'silhouette.png' | theme_image_url}}">
 {% endif %}
</div>

Checkout the staff drop section for more available methods.

Staff by channel

Say you want to extract some or all sales staff on sales properties and the same for lettings. Here’s how you can do just that:

{% if current_channel.name == 'sales' %}
    {% assign staff_profiles = branch.sales_staff_profiles %}
{% endif %}

{% if current_channel.name == 'lettings' %}
    {% assign staff_profiles = branch.lettings_staff_profiles %}
{% endif %}

Then to test and output our newly created staff array:

{% if staff_profiles %}
 <h3>Meet the team</h3>  
 <ul class="thumbnails">
  {% for staff in staff_profiles limit: 3 %}
   <li>
    <a href="{{ staff | url_for_staff_member }}">
     <img src="{{staff.avatar | url_for_generic_image }}" alt="{{staff.name}}" />
    </a>
    <h4>{{staff.name}}</h4>
    <p>{{staff.short_bio | truncate : 125}}</p>
    <a href="{{ staff | url_for_staff_member }}">Full profile</a>
   </li>
  {% endfor %}
 </ul>
 <a href="/staff" class="button">Meet the whole team</a>
{% endif %}

Tip

The selected_by code seen above can be used to filter an array based on an attribute of an object. contactable_for_sales is a true or false attribute we can use to filter staff, depending on the property’s channel.

  {% assign staff_by_team = branch.staff_profiles | selected_by: 'team', 'My funky team' %}