110 lines
5 KiB
HTML
110 lines
5 KiB
HTML
<section class="gallery" id="blog">
|
|
|
|
<!--TODO: this margin top should be in the css. This is repeated in the members section-->
|
|
<div class="row center-xs" style="margin-top: 30px;">
|
|
<div class="col-xs-12">
|
|
<h1> Blog </h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<!-- First 4 characters of each gallery page's unique ID -->
|
|
{{ range where .Site.RegularPages "Section" "blog" }}
|
|
<!-- Scratch is used to set page-scoped variable outside of this loop-->
|
|
{{ .Scratch.Set "$modalID" (slicestr .File.UniqueID 0 4) }}
|
|
{{ end }}
|
|
|
|
{{ $blogTotal := len (where .Site.RegularPages "Section" "blog") }}
|
|
{{ $blogReverse := (where .Site.RegularPages "Section" "blog") }}
|
|
|
|
<!-- If gallery is an odd total -->
|
|
{{ if not (modBool $blogTotal 2) }}
|
|
|
|
<!-- If gallery is only one item, display it fully -->
|
|
{{ if eq $blogTotal 1 }}
|
|
{{ range first 3 $blogReverse }}
|
|
<div class="gallery-item col-xs-12" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}>
|
|
<div class= "gallery-img-container">
|
|
<img {{ if .Site.Params.lazyLoading }}data-src="{{ "images/" | relURL }}{{ .Params.image}}" lazyload="on"{{ else }}src="{{ "images/" | relURL }}{{ .Params.image}}"{{ end }} {{ if .Params.alt }}alt="{{ .Params.alt }}"{{ end }}>
|
|
</div>
|
|
<div class="row middle-xs center-xs overlay">
|
|
<a href="{{ .Permalink }}" class="gallery-modal-link"></a>
|
|
<h2>{{ .Title }}</h2>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
<!-- If gallery is greater than 2 items, first 3 items display together on first row -->
|
|
{{ if gt $blogTotal 2 }}
|
|
{{ range first 3 $blogReverse }}
|
|
<div class="gallery-item col-xs-12 col-md-4" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}>
|
|
<div class= "gallery-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="row middle-xs center-xs overlay">
|
|
<a href="{{ .Permalink }}" data-modal="modal-{{ .Scratch.Get "$modal" }}" class="gallery-modal-link"></a>
|
|
<h2>{{ .Title }}</h2>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
<!-- If gallery is greater than 3 items, all items after the first 3 display evenly in grid columns and rows -->
|
|
{{ if gt $blogTotal 3 }}
|
|
{{ range after 3 $blogReverse }}
|
|
|
|
<!-- If gallery items are divisible by 3, they will appear in columns of 3 -->
|
|
{{ $col := (mod $blogTotal 3) }}
|
|
<div class="gallery-item col-xs-12 col-md-6
|
|
{{- if gt $blogTotal 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= "gallery-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="row middle-xs center-xs overlay">
|
|
<a href="{{ .Permalink }}" class="gallery-modal-link"></a>
|
|
<h2>{{ .Title }}</h2>
|
|
</div>
|
|
</div>
|
|
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
{{ end }}
|
|
|
|
<!-- If gallery is an even total, all items display evenly in grid columns and rows -->
|
|
{{ if modBool $blogTotal 2 }}
|
|
{{ range $blogReverse }}
|
|
|
|
<!-- If gallery 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="gallery-item col-xs-12
|
|
{{- if gt $blogTotal 1 }} col-md-6
|
|
{{- if gt $blogTotal 7 }}
|
|
{{- if modBool $blogTotal 4 }} col-lg-3
|
|
{{- else }} col-lg-4
|
|
{{- end }}
|
|
{{- end }}
|
|
{{- end }}" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}>
|
|
<div class= "gallery-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="row middle-xs center-xs overlay">
|
|
<a href="{{ .Permalink }}" class="gallery-modal-link"></a>
|
|
<h2>{{ .Title }}</h2>
|
|
</div>
|
|
</div>
|
|
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
<div class="container">
|
|
<div class="row center-xs">
|
|
<div class="col-xs-12"><h3><a href="{{ "blog/" | relLangURL }}">{{ i18n "viewAll" }}</a></h3></div>
|
|
</div>
|
|
</div>
|
|
</section>
|