The Search template

The Search template is used to present a search form which may return any published model matching the search criteria. Note that search results do not require the published model to be a member of a published division.

A simple search form may be a single q input, which matches against a model display name. Alternatively, complex search structure can be built using the same named fields from Models > Search Models.

TIP

Run a search in Models > Search Models and use the resulting URL querystring to show the available field names and the expected values / structure.

Skeleton example

<header class="search-header">
  <h1 class="page-heading">Search</h1>
  {% if querystring.q %}
    <p>Your search: {{ querystring.q | url_decode }}</p>
  {% endif %}
  {% if search.results_count %}
    <p>Results: {{ search.results_count }}
  {% endif %}
</header>

<form action="/search" method="get" class="search-form">
  <input type="text" name="q" value="{{ form.values.q }}">
  <button type="submit">Search {{ agency.talent_term_plural }}</button>
</form>

{% if search.results %}
<section class="search-results">
  {% for model in search.results %}
    {% assign modelDivision = model.divisions[0] %}

    <a href="{{ model.url | within: modelDivision }}" class="model">
      <div class="headshot">
        <div class="headshot-image">
          <img src="{{ model.headshot_url }}" alt="{{ model.display_name }} | {{ division.name }} | {{ agency.name }}">
        </div>
        <div class="overlay">
          <!-- Your hover overlay content -->
        </div>
      </div>
      <h3 class="model-name">{{ model.display_name }}</h3>
    </a>
  {% endfor %}

  {% if paginate.next or paginate.previous %}

    <div class="pagination">
      <p>Page {{ paginate.current_page }} of {{ paginate.pages }}</p>
      <nav class="pagination-nav" aria-label="Page navigation">
        {% if paginate.previous %}
          <a class="previous" href="{{ paginate.previous.url }}">
            Page {{ paginate.current_page | minus: 1 }}
          </a>
        {% endif %}
        {% if paginate.next %}
          <a class="next" href="{{ paginate.next.url }}">
            Page {{ paginate.current_page | plus: 1 }}
          </a>
        {% endif %}
      </nav>
    </div>

  {% endif %}
</section>
{% endif %}