{{ define "main" }}
  {{ partial "header" . }}

  <div class="col-sm-12">
    <div class="card-columns">
      {{ if .Site.Params.portfolio }}
        {{ range .Site.Params.portfolio }}
          <div class="card">
            <a href="{{ .link | relURL }}" data-toggle="lightbox" data-gallery="gallery">
              <img src="{{ .link | relURL }}" class="card-image img-fluid rounded">
            </a>
          </div>
        {{ end }}
      {{ end }}
    </div>
  </div>

  {{ partial "footer" . }}
{{ end }}

{{ define "lightbox" }}
  <script>
    $(document).on("click", '[data-toggle="lightbox"]', function(event) {
      event.preventDefault();
      $(this).ekkoLightbox({
        alwaysShowClose: true
      });
    });
  </script>
{{ end }}