h0v1n8-web/website/knowledgebase/templates/knowledgebase/article.html

{% extends "base.html" %}
{% block content %}
  <h1>{{ article.title }}</h1>
  {% if perms.knowledgebase.change_article %}
    <a href="{% url 'knowledgebase:edit-article' article_slug=article.slug %}" class="ui inverted right floated button">Edit</a>
  {% endif %}
  {{ article.description }}
  <div class="segment">
  Category: {{ category }} | Created: {{ article.created }} {% if article.created != article.updated %}| Updated: {{ article.updated }} {% endif %}
  </div>
  <div class="ui inverted divider"></div>
  {% autoescape off %}{{ article.content }}{% endautoescape %}
{% endblock content %}





<section class="ui stackable cards">
    <figure class="PhotoCard ui card">
        <img src="http://via.placeholder.com/300x250" class="ui fluid image">
        <figcaption class="content">
            Cool pics
        </figcaption>
    </figure>
</section>
<script>
    function deleteModal() {
        $('.ui.basic.modal').each(function() {
            $(this).remove();
        });
    }
    $('.PhotoCard').click(function() {
        // Delete any modals hanging around
        deleteModal();
        var image = $(this).children('img').attr('src');
        $('body').append('<div class="ui basic modal"><div class="content"><img src="'+image+'" width="100%" /></div></div>');
        $('.ui.basic.modal')
            .modal('show');
    })
</script>