The Division template

The Division template typically shows a grid of model / talent headshots and names, linking through to individual portfolios within the division context. Headshots commonly have hover overlays with key measurements, attributes or social follower counts.

A division may be password-protected using a password form. When protecting divisions, consider also protecting access to the related models in the Model and Search templates.

Divisions have a limit of 240 models per page, so simple pagination is used to accommodate larger divisions. Alternatively, additional pages of models may be appended to a single page via AJAX, but this approach often has performance issues.

Skeleton example

{% comment %} Set a password if required {% endcomment %}
{% assign passwordValue = 'yourpassword' %} 
{% comment %} Force password on division(s). Use exact division name, comma separated {% endcomment %}
{% assign passwordDivisions = '' | split: ',' %} 

<header class="division-header">
  <h1>{{ division.name }}</h1>
</header>

{% if passwordDivisions contains division.name and password != passwordValue %}

  {% comment %}
  Password restriction
  {% endcomment %}
  <section class="division-password">
    <h2>This division requires a password</h2>
    <p>Please <a href="/pages/contact">contact us</a> for access.</p>
  
    {% form 'password' %}
      <input type="password" name="password" autocomplete="off" placeholder="Enter the password">
      <button type="submit">Submit</button>
    {% endform %}
  </section>

{% else %}

  {% comment %}
  Password matches or not required
  {% endcomment %}
  <section class="division-models">
    {% if division.models %}

      {% for model in division.models %}
        <a href="{{ model.url | within: division }}" 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 %}

    {% else %}

      <p>There are no {{ agency.talent_term_plural }} in this division.</p>

    {% endif %}
  </section>

{% endif %}