{% extends 'base.html' %}

{% block head %}
    <title>{{ album.title }}</title>
    <link rel="stylesheet" href="../assets/vendor/style.css">
    <link rel="stylesheet" href="../assets/kaleidoscope.css">
    <script src="../assets/vendor/scripts.js"></script>
    <script src="../assets/kaleidoscope.js"></script>
{% endblock %}

{% block nav %}
        <a href="..">{{ gallery.title }}</a>
        <h1 class="nav__title">{{ album.title }}</h1>
{% endblock %}

{% block content %}
    <div class="main">
        <div class="album">
        {% for photo in album.photos %}
            <a href="{{ photo.large.url }}" class="thumbnail">
                <img src="{{ photo.thumb.url }}"
                     alt="{{ photo.caption }}" title="{{ photo.title }}"
                     width="{{ photo.thumb.size[0] }}" height="{{ photo.thumb.size[1] }}"
                     data-full-width="{{ photo.large.size[0] }}" data-full-height="{{ photo.large.size[1] }}">
            </a>
        {% endfor %}
        </div>
    </div>
{% endblock %}

{% extends 'base.html' %}

{% block head %}
    <title>{{ album.title }}</title>
    <link rel="stylesheet" href="../assets/vendor/style.css">
    <link rel="stylesheet" href="../assets/kaleidoscope.css">
    <script src="../assets/vendor/scripts.js"></script>
    <script src="../assets/kaleidoscope.js"></script>
{% endblock %}

{% block nav %}
        <a href="..">{{ gallery.title }}</a>
        <h1 class="nav__title">{{ album.title }}</h1>
{% endblock %}

{% block content %}
    <div class="main">
        <div class="album justified-gallery">
        {% for photo in album.photos %}
            <a href="{{ photo.large.url }}" class="thumbnail">
                <img src="{{ photo.thumb.url }}"
                     alt="{{ photo.caption }}" title="{{ photo.title }}"
                     width="{{ photo.thumb.size[0] }}" height="{{ photo.thumb.size[1] }}"
                     data-full-width="{{ photo.large.size[0] }}" data-full-height="{{ photo.large.size[1] }}">
            </a>
        {% endfor %}
        </div>
    </div>
{% endblock %}

Use justified-gallery class for photos
Use justified-gallery class for photos

It hides unstyled images before justified gallery script is loaded.
