camp/content/templates/photologue/gallery_detail.html

{% extends "photologue/gallery_detail.html" %}
{% load i18n %}

{% block title %}{{ gallery.title }}{% endblock %}

{% block content %}
<div class="row">
    <div class="medium-9 columns">
        {% if gallery.content.exists %}
        <h6 class="page-header"><a href="{{ gallery.content.all.0.get_absolute_url }}">Back to {{ gallery.content.all.0.title }}</a></h6>
        {% endif %}
        <h5>{{ gallery.title }}</h5>
        {% with gallery.public.0 as photo %}
        <div class="gallery-main-stage">
            <div class="photo-container">
                <div class="image">
                    <img src="{{ photo.get_display_url }}" alt="{{ photo.title }}" class="main-image" alt="{{ photo.title }}">
                </div>
                <button class="prev nav-btn">❮ Prev</button>
                <button class="next nav-btn">Next ❯</button>
                <a class="download disabled" target="_blank" download title="download original">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 304 384"><path fill="currentColor" d="M299 128L149 277L0 128h85V0h128v128h86zM0 320h299v43H0v-43z"/></svg>
                </a>
            </div>
            <div class="caption">{{ photo.caption_html }}</div>
        </div>
        {% endwith %}
    </div>
    <div class="medium-3 columns">
        <br>
        <p>{% trans "Other photos" %}:</p>
        <div class="inline-gallery">
                {% for photo in gallery.public %}
                <div style="float: left; padding: 4px">
                    <a href="{{ gallery.get_absolute_url }}#{{forloop.counter}}">
                        <img src="{{ photo.get_thumbnail_url }}" class="thumbnail photo" alt="{{ photo.title }}" data-caption="{{ photo.caption_html }}"{% if request.user.is_staff %} data-orig="{{ photo.image.url }}"{% endif %}>
                    </a>
                </div>
                {% endfor %}
        </div>
    </div>
</div>
{% endblock %}