filter-people.html

{% assign row_counter = 0 %}
{% assign column_counter = 0 %}

{% for group in include.members %}
<!--        Sort the items by the name of the person-->
{% assign sorted_people = group.items | sort: "name" %}

{% for people in sorted_people %}
{% assign empty_name = people.name | strip %}
<!--        The unless block skips the template.md file, which is used as template for the new members-->
{% unless empty_name == '' %}

<!--        Start a new row of people-->
<!--        For large screens, we show 3 members per row, for medium screens we show 2 members per row and for small screens-->
<!--        we show 1 member for row. To accommodate all the changes, we make a row have 6 children, which based on the-->
<!--        screen size will display the correct amount. Therefore, the row_counter will reset at 5.-->
{% if row_counter == 0 %}
<div class="row">
    {% endif %}

    <!--        We keep a column counter to set the animation type, although for medium screens when a row has only 2 members,-->
    <!--        the animations will be chaotic.-->
    {% if column_counter == 0 %}
    <!--        Animation for the first column-->
    {% assign animationType = 'fadeInLeft' %}
    {% endif %}

    {% if column_counter == 1 %}
    <!--        Animation for the second column-->
    {% assign animationType = 'zoomIn' %}
    {% endif %}

    {% if colum_counter == 2 %}
    <!--            Animation for the 3rd column-->
    {% assign animationType = 'fadeInRight' %}
    {% endif %}

    <div class="col-lg-4 col-md-6">
        {% if people.filter < 8 %}
        <a href="{{site.baseurl}}{{people.url}}">
            <div class="blockquote-box blockquote-people animated {{animationType}} clearfix">
                <div class="square pull-left">
                    <img src="{{site.baseurl}}/assets/img/people/{{people.image}}" alt="Feature-img" class="person-image">
                </div>
                <h4>
                    {{people.name}}
                </h4>

                <p>
                    {{people.role}} {% if people.team contains 'cel' %} @ CEL {% endif %}
                </p>

                {% if people.filter < 8 %}
                {% assign empty_twitter = people.twitter | strip %}
                {% unless empty_twitter == '' %}
                <a class="pr-2" href="{{people.twitter}}" target="_blank" title="Twitter">
                    <i class="fa-brands fa-lg fa-twitter"></i>
                </a>
                {% endunless %}

                {% assign empty_linkedin = people.linkedin | strip %}
                {% unless empty_linkedin == '' %}
                <a class="pr-2" href="{{people.linkedin}}"
                   target="_blank" title="LinkedIn">
                    <i class="fa-brands fa-lg fa-linkedin"></i>
                </a>
                {% endunless %}

                {% assign empty_github = people.github | strip %}
                {% unless empty_github == '' %}
                <a class="" href="{{people.github}}" target="_blank" title="GitHub">
                    <i class="fa-brands fa-lg fa-github"></i>
                </a>
                {% endunless %}

                {% assign empty_webpage = people.webpage | strip %}
                {% unless empty_webpage == '' %}
                <a class="pr-2" href="{{people.webpage}}" target="_blank" title="Webpage">
                    <i class="fa-solid fa-lg fa-scroll"></i>
                </a>
                {% endunless %}
                {% endif %}

            </div>
        </a>
        {% else %}
        <div class="blockquote-box blockquote-people animated {{animationType}} clearfix">
            <div class="square pull-left">
                <img src="{{site.baseurl}}/assets/img/people/{{people.image}}" alt="Feature-img" class="person-image">
            </div>
            <h4>
                {{people.name}}
            </h4>

            <p>
                {{people.role}} {% if people.team contains 'cel' %} @ CEL {% endif %}
            </p>

            <p>
                Room - {{people.office}}
            </p>

        </div>
        {% endif %}

    </div>

    <!--        We close the div after 6 columns (0 to 5), although 3, 2 or 1 are displayed in a row. -->
    {% if row_counter == 5 %}
</div>
{% assign row_counter = -1 %}
{% endif %}

<!--        Reset the counter for animations-->
{% if column_counter == 2 %}
{% assign column_counter = -1 %}
{% endif %}

{% assign column_counter = column_counter | plus:1 %}
{% assign row_counter = row_counter | plus:1 %}

{% endunless %}
{% endfor %}

<!--        Sometimes the end of the row is when the for loop finishes and before reaching the last column-->
{% if forloop.last and row_counter != 0%}
</div>
{% endif %}
{% endfor %}