113 lines
5 KiB
HTML
113 lines
5 KiB
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>
|
||
|
|
|