distorsion.interhacker.space/old-hugo-site/layouts/partials/blog.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>