fel_website/themes/felicie/templates/article.html

{% extends 'base.html' %}

{% block title%}
{{ SITENAME }} | {{ article.title }}
{% endblock title %}

{% block content %}
    <script src="{{ SITE_URL }}/theme/js/slideshow.js"></script>
    <h1 class='article-title'>{{ article.title }}</h1>

    {% if article.category == 'gallery' %}
        <div class="gallery">
        <!-- If there are only images, print them full-width. -->
            {% for i in [1, 2, 3, 4, 5] %}
            <img class= "gallery-img" alt="" onclick="showSlide('img-{{ i }}')" src="{{ SITE_URL }}/images/{{article.title}}/{{ article.title }}-{{ i }}.jpg">
            <br>
            {% endfor %}
            </div>
    {% else %}
        <!-- If there is a text, print two columns -->
        <div class="article">
            <div class='article-img column'>
                {% for i in [1, 2, 3, 4, 5] %}
                    <img alt="" onclick="showSlide('img-{{ i }}')" src="{{ SITE_URL }}/images/{{article.title}}/{{ article.title }}-{{ i }}.jpg">
                {% endfor %}
            </div>
            <div class='article-content column'> {{ article.content }}</div> 
        </div>
    {% endif%}

    <!-- Slides used for slideshow -->
    <div id="slide-container">
        <div id="close-modal" onclick="closeModal()">X</div>
        <div id="slides" class="modal">
            {% for i in [1, 2, 3, 4, 5] %}
                <img class="slide" id="img-{{ i }}" alt="" src="{{ SITE_URL }}/images/{{article.title}}/{{ article.title }}-{{ i }}.jpg">
            {% endfor %}
        </div>
    </div> 
{% endblock content %}