{{ with .Site.GetPage "section" "projects" }} <div class="section" id="projects"> <!-- Begin Projects container --> <div class="container"> <h2 class="title is-2 has-text-centered"> {{ .Title }} </h2> <div class="section is-small"> <div class="columns is-multiline"> {{ $totalProjects := (len (.Site.GetPage "section" "projects").Pages) }} {{ $numberOfProjectsToShow := .Site.Params.numberOfProjectsToShow | default $totalProjects }} {{ range (.Site.GetPage "section" "projects").Pages | first $numberOfProjectsToShow }} {{ if eq (mod $numberOfProjectsToShow 2) 0 }} <div class="column is-half"> {{ else }} <div class="column is-one-third"> {{ end }} <div {{ if not .Params.external_link }} id="project{{ $card := .Title | urlize }}{{ replace $card "%" " "}}" {{ end }} class="card"> <div class="card-image"> <figure class="image is-3by2"> <a {{ if .Params.external_link }} href="{{ .Params.external_link }}" {{ end }}> <img src="{{ if .Params.image }}{{ .Params.image | relURL }}{{ else }}{{ (.Site.Params.placeHolderimg | default "/img/workday.jpg") | relURL }}{{ end }}"> </a> </figure> </div> <div class="card-content has-text-centered top-pad"> <a {{ if .Params.external_link }} href="{{ .Params.external_link }}" {{ end }}> {{ .Title }} </a> </div> </div> </div> {{ end }} </div> </div> </div> {{ if lt $numberOfProjectsToShow $totalProjects }} <div class="container has-text-centered top-pad"> <a href="{{ "/projects" | relURL }}">ALL PROJECTS</a> </div> {{ end }} </div> <!-- End Projects container --> <!-- Projects modals --> {{ range (.Site.GetPage "section" "projects").Pages | first $numberOfProjectsToShow }} {{ if not .Params.external_link }} <div class="modal" id="modal{{ $card := .Title | urlize }}{{ replace $card "%" " "}}"> <div class="modal-background"></div> <div class="modal-card"> {{ with .Title }} <header class="modal-card-header bottom-pad"> <p class="modal-card-title has-text-centered">{{ . }}</p> </header> {{ end }} {{ if .Params.image }} <img src="{{ .Params.image | relURL }}" class="img-responsive img-centered"> {{ end }} {{ if .Content }} <section class="modal-card-body markdown"> {{ .Content }} </section> {{ end }} </div> <button class="modal-close is-large" aria-label="close" id="close{{ $card := .Title | urlize }}{{ replace $card "%" ""}}"></button> </div> <script> $('#project{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').click(function () { $('#modal{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').addClass('is-active'); }); $('#close{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').click(function () { $('#modal{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').removeClass('is-active'); }); </script> {{ end }} {{ end }} {{ partial "top-icon.html" . }} </div> <!-- End Projects section --> <div class="container"><hr></div> {{ end }}