image gallery for sculpin with rokka.io and bootstrap. example for the article at https://www.liip.ch/en/blog/integrating-rokka-io-with-the-sculpin-static-site-generator

2021-04-04-pictures.md.raw

# the file is markdown, but gist renders markdown. remove ".raw" and this line
---
title: Pictures example post
images:
    -
        file: TestImage.jpg
        caption: This is a test
        note: Additional stuff to print next to the image
    -
        file: TestImage2.jpg
        caption: This is a test
        note: Additional stuff to print next to the image
---

Some additional text of this post.

app.scss

/**
 * Change the bootstrap carousel and modal to leave as much room for the image as possible, while retaining functionality.
 *
 * I really am no frontend dev, please don't hang me ;-)
 */

#gallery {
    margin-top: 40px;
    a:hover {
        text-decoration: none;
    }
    .row {
        text-align: center;
    }
    .col {
        margin: 16px;
    }
    h2 {
        margin-top: 6px;
        margin-bottom: 2px;
        font-size: 16px;
        color: black;
        font-weight: bold;
        text-transform: none;
    }
    h3 {
        font-size: 12px;
        color: #333;
        font-weight: normal;
    }
}


.modal-content {
    a:hover {
        text-decoration: none;
    }
    .close {
        position: absolute;
        top: 0;
        right: 0;
    }
    .carousel-control-next {
        margin-top: 30px;
    }
}
.modal-body {
    text-align: center;
}

img {
    max-width: 98vw;
}

.carousel {
    h2 {
        font-size: 18px;
        color: black;
        font-weight: bold;
        text-transform: none;
        margin-top: 2px;
        margin-bottom: 0;
    }
    h3 {
        font-size: 12px;
        color: #333;
        font-weight: normal;
        margin-bottom: 0;
    }
    img {
        max-height: 91vh;
        max-width: 100vw;
    }
}
.carousel-control-next, .carousel-control-prev {
    filter: drop-shadow( 2px 2px 2px #000 );
    opacity: 0;
}

@media (max-width: 575px) {
    .modal-dialog {
        margin: 0;
    }
    .modal-body {
        padding: 0;
    }
}

@media (min-width: 576px) {
    .carousel {
        h2 {
            margin-top: 6px;
            margin-bottom: 2px;
            font-size: 24px;
            color: black;
            font-weight: bold;
        }
        h3 {
            font-size: 18px;
        }
        img {
            max-height: 80vh;
            max-width: 95vw;
        }
    }
}

gallery.html

{% extends "default" %}
  
{% block head_meta %}
    <meta name="robots" content="index, follow">
{% endblock %}

{% block content_wrapper %}
    <article>
        <header>
            <h2>{{ page.title }}</h2>
        </header>
        <div>
            {{ page.blocks.content|raw }}

            <div class="container" id="gallery" data-toggle="modal" data-target="#imageBrowser">
                <div class="row">
                {% for image in page.images %}
                    <div class="col">
                        <a href="{{ image.file | rokka_stack_url('original') }}" onclick="return false;">
                            <img data-target="#carousel" data-slide-to="{{ loop.index0 }}" class="active" {% if image.caption %}title="{{ image.caption }}"{% endif %} src="{{ image.file | rokka_stack_url('preview') }}"/>
                            {% if image.caption %}
                            <h2>{{ image.caption }}</h2>
                            {% endif %}
                            {% if image.note %}
                            <h3>{{ image.note }}</h3>
                            {% endif %}
                        </a>
                    </div>
                {% endfor %}
                </div>
           </div>
        </div>

        <div class="modal fade" id="imageBrowser" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <div id="carousel" class="carousel slide" data-interval="false">
                            <div class="carousel-inner">
                                {% for image in page.images %}
                                <div class="carousel-item{% if 1 == loop.index %} active{% endif %}">
                                    <a href="{{ image.file | rokka_stack_url('original') }}">
                                        <img {% if image.caption %}title="{{ image.caption }}"{% endif %} src="{{ image.file | rokka_stack_url('large') }}"/>
                                        {% if image.caption %}
                                        <h2>{{ image.caption }}</h2>
                                        {% endif %}
                                        {% if image.method %}
                                        <h3>{{ image.note }}</h3>
                                        {% endif %}
                                    </a>
                                </div>
                                {% endfor %}
                            </div>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>

{% endblock %}