distorsion.interhacker.space/old-hugo-site/layouts/partials/members.html

<section class="members" id="members">

    <div class="row center-xs" style="margin-top: 30px;">
      <div class="col-xs-12">
        <h1> Members </h1>
      </div>
    </div>
    <div class="row">
  
      <!-- First 4 characters of each  page's unique ID -->
      {{ range where .Site.RegularPages "Section" "members" }}
        <!-- Scratch is used to set page-scoped variable outside of this loop-->
        {{ .Scratch.Set "$modalID" (slicestr .File.UniqueID 0 4) }}
      {{ end }}
  
      {{ $membersTotal := len (where .Site.RegularPages "Section" "members") }}
      {{ $membersReverse := (where .Site.RegularPages.ByWeight "Section" "members") }}
  
      <!-- If  is an odd total -->
      {{ if not (modBool $membersTotal 2) }}
  
        <!-- If  is only one item, display it fully -->
        {{ if eq $membersTotal 1 }}
          {{ range first 3 $membersReverse }}
            <div class="members-item col-xs-12" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}>
              <div class= "members-img-container">
                <img {{ if .Site.Params.lazyLoading }}data-src="{{ "images/" | relURL }}{{ .Params.image}}" class="lazyload" lazyload="on"{{ else }}src="{{ "images/" | relURL }}{{ .Params.image}}"{{ end }} {{ if .Params.alt }}alt="{{ .Params.alt }}"{{ end }}>
              </div>
              <div class="middle-xs center-xs">
                <h2>{{ .Title }}</h2>
                {{ .Description }}
                <br>
                <a href="{{ .Params.Link }}" target="_blank"> {{ .Params.Link }}</a>
              </div>
            </div>
          {{ end }}
        {{ end }}
  
        <!-- If  is greater than 2 items, first 3 items display together on first row -->
        {{ if gt $membersTotal 2 }}
          {{ range first 3 $membersReverse }}
            <div class="members-item col-xs-12 col-md-4" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}>
              <div class= "members-img-container">
                <img {{ if .Site.Params.lazyLoading }}data-src="{{ "images/" | relURL }}{{ .Params.image}}" class="lazyload" lazyload="on"{{ else }}src="{{ "images/" | relURL }}{{ .Params.image}}"{{ end }} {{ if .Params.alt }}alt="{{ .Params.alt }}"{{ end }}>
              </div>
              <div class="middle-xs center-xs">
                <h2>{{ .Title }}</h2>
                {{ .Description }}
                <br>
                <a href="{{ .Params.Link }}" target="_blank"> {{ .Params.Link }}</a>
              </div>
            </div>
          {{ end }}
        {{ end }}
  
        <!-- If members is greater than 3 items, all items after the first 3 display evenly in grid columns and rows -->
        {{ if gt $membersTotal 3 }}
          {{ range after 3 $membersReverse }}
  
            <!-- If  items are divisible by 3, they will appear in columns of 3 -->
            {{ $col := (mod $membersTotal 3) }}
            <div class="members-item col-xs-12 col-md-6
            {{- if gt $membersTotal 5 }}
              {{- if eq $col 0 }} col-lg-4
              {{- else }} col-lg-3
              {{- end }}
            {{- end }}" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}>
            <div class= "members-img-container">
              <img {{ if .Site.Params.lazyLoading }}data-src="{{ "images/" | relURL }}{{ .Params.image}}" class="lazyload" lazyload="on"{{ else }}src="{{ "images/" | relURL }}{{ .Params.image}}"{{ end }} {{ if .Params.alt }}alt="{{ .Params.alt }}"{{ end }}>
            </div>
            <div class="middle-xs center-xs">
              <h2>{{ .Title }}</h2>
              {{ .Description }}
              <br>
              <a href="{{ .Params.Link }}" target="_blank"> {{ .Params.Link }}</a>
            </div>
            </div>
  
          {{ end }}
        {{ end }}
  
      {{ end }}
  
      <!-- If members is an even total, all items display evenly in grid columns and rows -->
      {{ if modBool $membersTotal 2 }}
        {{ range $membersReverse }}
  
          <!-- If members items are great than 7 and are divisible by 4, they will appear in columns of 4, else in columns of 2 or 3 -->
          <div class="members-item col-xs-12
          {{- if gt $membersTotal 1 }} col-md-6
            {{- if gt $membersTotal 7 }}
              {{- if modBool $membersTotal 4 }} col-lg-3
              {{- else }} col-lg-4
              {{- end }}
            {{- end }}
          {{- end }}">
          <div class= "members-img-container">
            <img {{ if .Site.Params.lazyLoading }}data-src="{{ "images/" | relURL }}{{ .Params.image}}" class="lazyload" lazyload="on"{{ else }}src="{{ "images/" | relURL }}{{ .Params.image}}"{{ end }} {{ if .Params.alt }}alt="{{ .Params.alt }}"{{ end }}>
          </div>
          <div class="middle-xs center-xs">
            <h2>{{ .Title }}</h2>
            {{ .Description }}
            <br>
            <a href="{{ .Params.Link }}" target="_blank"> {{ .Params.Link }}</a>
          </div>
          </div>
  
        {{ end }}
      {{ end }}
  
    </div>
  </section>