Tiggles ツ of Speak Creative
11/28/2018 - 5:39 PM

sorting.liquid

Liquid sort into a group based on a dropdown.

full page - http://nimb.ws/ceAyKx Matrix Item settings - https://cl.ly/0o231R3z3V26

matrix.liquid
content_copyfile_download
{% assign administration = List.Items | WhereEquals:'FieldValues.Department','administration' %}
{% if administration.size > 0 -%}
<div class="administration">
    <div class="w-100 mw8 center pv4">
        <h2>Administration</h2>
        <div class="w-100 relative flex flex-row flex-wrap">
        {% assign administrationSorted = administration | OrderBy:'FieldValues.DisplayOrder','asc' %} 
        {% for Item in administrationSorted -%}
              <div class="staff w-25-l w-third-m w-50 relative tc pa2 pa3-ns flex flex-column justify-start">
                {% if Item.FieldValues.Photo %}
                <img src="{{ Item.FieldValues.Photo }}" class="contain center" alt="{{ Item.FieldValues.FirstName }} {{ Item.FieldValues.LastName }}" />
                {% endif %}
                <p class="b f4-l f5 lh-solid-l lh-title mv3">{{ Item.FieldValues.FirstName }} {{ Item.FieldValues.LastName }}<br/>
                <span class="f7 ttu">{{ Item.FieldValues.Title }}</span><br/>
                <a href="mailto:{{ Item.FieldValues.EmailAddress }}"><span class="f7 dn dib-ns" >{{ Item.FieldValues.EmailAddress }}</span><span class="f7 dib dn-ns" ><span class="icon icon-mail"></span> Email</span></a><br />
                <a href="tel:{{ Item.FieldValues.PhoneNumber }}"><span class="f7 ">{{ Item.FieldValues.PhoneNumber }}</span></a></p>
              </div>
        {% endfor -%}
        </div>
    </div>
</div>
{% endif %}

<div class="communications bg-near-white ">
    <div class="w-100 mw8 center pv4">
        {% assign communications = List.Items | WhereEquals:'FieldValues.Department','communications' %}
        <h2>Communications</h2>
        <div class="w-100 relative flex flex-row flex-wrap">
        {% assign communicationsSorted = communications | OrderBy:'FieldValues.DisplayOrder','asc' %} 
        {% for Item in communicationsSorted -%}
              <div class="staff w-25-l w-third-m w-50 relative tc pa2 pa3-ns flex flex-column justify-start">
                {% if Item.FieldValues.Photo %}
                <img src="{{ Item.FieldValues.Photo }}" class="contain center" alt="{{ Item.FieldValues.FirstName }} {{ Item.FieldValues.LastName }}" />
                {% endif %}
                <p class="b f4-l f5 lh-solid-l lh-title mv3">{{ Item.FieldValues.FirstName }} {{ Item.FieldValues.LastName }}<br/>
                <span class="f7 ttu">{{ Item.FieldValues.Title }}</span><br/>
                <a href="mailto:{{ Item.FieldValues.EmailAddress }}"><span class="f7 dn dib-ns" >{{ Item.FieldValues.EmailAddress }}</span><span class="f7 dib dn-ns" ><span class="icon icon-mail"></span> Email</span></a><br />
                <a href="tel:{{ Item.FieldValues.PhoneNumber }}"><span class="f7 ">{{ Item.FieldValues.PhoneNumber }}</span></a></p>
              </div>
        {% endfor -%}
        </div>
    </div>
</div>

<div class="construction">
    <div class="w-100 mw8 center pv4">
        {% assign construction = List.Items | WhereEquals:'FieldValues.Department','construction' %}
        <h2>Construction</h2>
        <div class="w-100 relative flex flex-row flex-wrap">
        {% assign constructionSorted = construction | OrderBy:'FieldValues.DisplayOrder','asc' %} 
        {% for Item in constructionSorted -%}
              <div class="staff w-25-l w-third-m w-50 relative tc pa2 pa3-ns flex flex-column justify-start">
                {% if Item.FieldValues.Photo %}
                <img src="{{ Item.FieldValues.Photo }}" class="contain center" alt="{{ Item.FieldValues.FirstName }} {{ Item.FieldValues.LastName }}" />
                {% endif %}
                <p class="b f4-l f5 lh-solid-l lh-title mv3">{{ Item.FieldValues.FirstName }} {{ Item.FieldValues.LastName }}<br/>
                <span class="f7 ttu">{{ Item.FieldValues.Title }}</span><br/>
                <a href="mailto:{{ Item.FieldValues.EmailAddress }}"><span class="f7 dn dib-ns" >{{ Item.FieldValues.EmailAddress }}</span><span class="f7 dib dn-ns" ><span class="icon icon-mail"></span> Email</span></a><br />
                <a href="tel:{{ Item.FieldValues.PhoneNumber }}"><span class="f7 ">{{ Item.FieldValues.PhoneNumber }}</span></a></p>
              </div>
        {% endfor -%}
        </div>
    </div>
</div>

<div class="development bg-near-white">
    <div class="w-100 mw8 center pv4">
        {% assign development = List.Items | WhereEquals:'FieldValues.Department','development' %}
        <h2>Development</h2>
        <div class="w-100 relative flex flex-row flex-wrap">
        {% assign developmentSorted = development | OrderBy:'FieldValues.DisplayOrder','asc' %} 
        {% for Item in developmentSorted -%}
              <div class="staff w-25-l w-third-m w-50 relative tc pa2 pa3-ns flex flex-column justify-start">
                {% if Item.FieldValues.Photo %}
                <img src="{{ Item.FieldValues.Photo }}" class="contain center" alt="{{ Item.FieldValues.FirstName }} {{ Item.FieldValues.LastName }}" />
                {% endif %}
                <p class="b f4-l f5 lh-solid-l lh-title mv3">{{ Item.FieldValues.FirstName }} {{ Item.FieldValues.LastName }}<br/>
                <span class="f7 ttu">{{ Item.FieldValues.Title }}</span><br/>
                <a href="mailto:{{ Item.FieldValues.EmailAddress }}"><span class="f7 dn dib-ns" >{{ Item.FieldValues.EmailAddress }}</span><span class="f7 dib dn-ns" ><span class="icon icon-mail"></span> Email</span></a><br />
                <a href="tel:{{ Item.FieldValues.PhoneNumber }}"><span class="f7 ">{{ Item.FieldValues.PhoneNumber }}</span></a></p>
              </div>
        {% endfor -%}
        </div>
    </div>
</div>

<div class="family-services  ">
    <div class="w-100 mw8 center pv4">
        {% assign family-services = List.Items | WhereEquals:'FieldValues.Department','family-services' %}
        <h2>Family Services</h2>
        <div class="w-100 relative flex flex-row flex-wrap">
        {% assign family-servicesSorted = family-services | OrderBy:'FieldValues.DisplayOrder','asc' %} 
        {% for Item in family-servicesSorted -%}
              <div class="staff w-25-l w-third-m w-50 relative tc pa2 pa3-ns flex flex-column justify-start">
                {% if Item.FieldValues.Photo %}
                <img src="{{ Item.FieldValues.Photo }}" class="contain center" alt="{{ Item.FieldValues.FirstName }} {{ Item.FieldValues.LastName }}" />
                {% endif %}
                <p class="b f4-l f5 lh-solid-l lh-title mv3">{{ Item.FieldValues.FirstName }} {{ Item.FieldValues.LastName }}<br/>
                <span class="f7 ttu">{{ Item.FieldValues.Title }}</span><br/>
                <a href="mailto:{{ Item.FieldValues.EmailAddress }}"><span class="f7 dn dib-ns" >{{ Item.FieldValues.EmailAddress }}</span><span class="f7 dib dn-ns" ><span class="icon icon-mail"></span> Email</span></a><br />
                <a href="tel:{{ Item.FieldValues.PhoneNumber }}"><span class="f7 ">{{ Item.FieldValues.PhoneNumber }}</span></a></p>
              </div>
        {% endfor -%}
        </div>
    </div>
</div>

<div class="programs bg-near-white">
    <div class="w-100 mw8 center pv4">
        {% assign programs = List.Items | WhereEquals:'FieldValues.Department','programs' %}
        <h2>Programs &amp; Strategic Alliances</h2>
        <div class="w-100 relative flex flex-row flex-wrap">
        {% assign programsSorted = programs | OrderBy:'FieldValues.DisplayOrder','asc' %} 
        {% for Item in programsSorted -%}
              <div class="staff w-25-l w-third-m w-50 relative tc pa2 pa3-ns flex flex-column justify-start">
                {% if Item.FieldValues.Photo %}
                <img src="{{ Item.FieldValues.Photo }}" class="contain center" alt="{{ Item.FieldValues.FirstName }} {{ Item.FieldValues.LastName }}" />
                {% endif %}
                <p class="b f4-l f5 lh-solid-l lh-title mv3">{{ Item.FieldValues.FirstName }} {{ Item.FieldValues.LastName }}<br/>
                <span class="f7 ttu">{{ Item.FieldValues.Title }}</span><br/>
                <a href="mailto:{{ Item.FieldValues.EmailAddress }}"><span class="f7 dn dib-ns" >{{ Item.FieldValues.EmailAddress }}</span><span class="f7 dib dn-ns" ><span class="icon icon-mail"></span> Email</span></a><br />
                <a href="tel:{{ Item.FieldValues.PhoneNumber }}"><span class="f7 ">{{ Item.FieldValues.PhoneNumber }}</span></a></p>
              </div>
        {% endfor -%}
        </div>
    </div>
</div>

<div class="restore ">
    <div class="w-100 mw8 center pv4">
        {% assign restore = List.Items | WhereEquals:'FieldValues.Department','restore' %}
        <h2>ReStore</h2>
        <div class="w-100 relative flex flex-row flex-wrap">
        {% assign restoreSorted = restore | OrderBy:'FieldValues.DisplayOrder','asc' %} 
        {% for Item in restoreSorted -%}
              <div class="staff w-25-l w-third-m w-50 relative tc pa2 pa3-ns flex flex-column justify-start">
                {% if Item.FieldValues.Photo %}
                <img src="{{ Item.FieldValues.Photo }}" class="contain center" alt="{{ Item.FieldValues.FirstName }} {{ Item.FieldValues.LastName }}" />
                {% endif %}
                <p class="b f4-l f5 lh-solid-l lh-title mv3">{{ Item.FieldValues.FirstName }} {{ Item.FieldValues.LastName }}<br/>
                <span class="f7 ttu">{{ Item.FieldValues.Title }}</span><br/>
                <a href="mailto:{{ Item.FieldValues.EmailAddress }}"><span class="f7 dn dib-ns" >{{ Item.FieldValues.EmailAddress }}</span><span class="f7 dib dn-ns" ><span class="icon icon-mail"></span> Email</span></a><br />
                <a href="tel:{{ Item.FieldValues.PhoneNumber }}"><span class="f7 ">{{ Item.FieldValues.PhoneNumber }}</span></a></p>
              </div>
        {% endfor -%}
        </div>
    </div>
</div>

{% assign board = List.Items | WhereEquals:'FieldValues.Department','board' %}
{% if board.size > 0 -%}
<div class="board bg-near-white">
    <div class="w-100 mw8 center pv4">
        <h2>Board of Directors</h2>
        <div class="w-100 relative flex flex-row flex-wrap">
        {% assign boardSorted = board | OrderBy:'FieldValues.DisplayOrder','asc' %} 
        {% for Item in boardSorted -%}
              <div class="staff w-25-l w-third-m w-50 relative tc pa2 pa3-ns flex flex-column justify-start">
                {% if Item.FieldValues.Photo %}
                <img src="{{ Item.FieldValues.Photo }}" class="contain center" alt="{{ Item.FieldValues.FirstName }} {{ Item.FieldValues.LastName }}" />
                {% endif %}
                <p class="b f4-l f5 lh-solid-l lh-title mv3">{{ Item.FieldValues.FirstName }} {{ Item.FieldValues.LastName }}<br/>
                <span class="f7 ttu">{{ Item.FieldValues.Title }}</span><br/>
                <a href="mailto:{{ Item.FieldValues.EmailAddress }}"><span class="f7 dn dib-ns" >{{ Item.FieldValues.EmailAddress }}</span><span class="f7 dib dn-ns" ><span class="icon icon-mail"></span> Email</span></a><br />
                <a href="tel:{{ Item.FieldValues.PhoneNumber }}"><span class="f7 ">{{ Item.FieldValues.PhoneNumber }}</span></a></p>
              </div>
        {% endfor -%}
        </div>
    </div>
</div>
{% endif %}