hugo-theme-introduction/layouts/partials/projects.html

<div class="container">
    <!-- Begin Projects container -->
    <h2 class="title is-2 has-text-centered">Projects</h2>

    <div class="section is-small">
        <div class="columns is-multiline">
            {{ range sort .Pages }} {{ if eq .Section "projects" }}
            {{ if eq .Site.Params.projectColumns "2" }}
            <div class="column is-half"> {{ else if eq .Site.Params.projectColumns "3" }}
            <div class="column is-one-third"> {{ end }}
                <!-- Hey Vicky, show half column if number is even. -->
                <div class="card">
                        <div class="card-image">
                            <figure class="image is-3by2">
                                <a {{ if .Params.external_link }}
                                    href="{{ .Params.external_link }}"
                                    {{ else }}
                                    id="project{{.Title | urlize}}"
                                    {{ end }}>
                                    <img src="{{ if .Params.image }}{{ .Params.image }}{{ else }}{{ .Site.Params.placeHolderimg }}{{ end }}">
                                </a>
                            </figure>
                        </div>
                        <div class="card-content has-text-centered top-pad">
                                <a {{ if .Params.external_link }}
                                    href="{{ .Params.external_link }}"
                                    {{ else }}
                                    id="project{{.Title | urlize}}"
                                    {{ end }}>
                                    {{ .Title }}
                                </a>
                        </div>
                </div>
            </div>
            {{ end }} {{ end }}
    </div>
</div>
</div>
<!-- End Projects container -->

<!-- Projects modals -->
{{ range sort .Pages }} {{ if eq .Section "projects" }}
<div class="modal" id="modal{{.Title | urlize}}">
    <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 }}" 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{{.Title | urlize}}"></button>
</div>
<script>
    $('#project{{.Title | urlize}}').click(function() {
        $('#modal{{.Title | urlize}}').addClass('is-active');
    });
    $('#close{{.Title | urlize}}').click(function() {
        $('#modal{{.Title | urlize}}').removeClass('is-active');
    });
</script>
{{ end }} {{ end }}


<div class="container has-text-centered top-pad">
    <a href="#top">
        <i class="fa fa-arrow-up"></i>
    </a>
</div>