article_detail.html

{% extends "articles/_base_articles.html" %}

{% block page_title %} {{ article.title }} - {{ super() }}{% endblock %}

{% block site_js_extra %}
<script src="{{ MEDIA_URL }}js/jquery.syntaxhighlighter.min.js"></script>
<script type="text/javascript">
    $.SyntaxHighlighter.init();
</script>
{% endblock %}

{% block article_class %}article-detail{% endblock %}
{% block content %}
    {% if article.image %}
        <div class="image-full-width-wrapper">
            <img src="{{ MEDIA_URL }}{{ thumbnail(article.image, "800") }}" alt="{{ article.title }}">
            {% if article.pretty_caption %}<p class="caption">{{ article.pretty_caption }}</p>{% endif %}
        </div>
    {% endif %}

    <h2>{% include "articles/_article_category_and_tags_overline.html" %}{{ article.title }}</h2>
    <h4>{{ article.subhead }}</h4>
    
    <aside>
        <div class="byline">
            <h6 class="date">{{ article.pretty_pubdate }}</h6>
            {% if article.get_live_author_set().exists() %}<h6 class="byline-name">{% with author_list = article.get_live_author_set() %}{% include "articles/_article_author_list.html" %}{% endwith %}</h6>{% endif %}
            <ul class="link-list">
                <li><i class="icon-comments"></i><a href="{{ HTTP_PROTOCOL }}://{{ request.get_host() }}{{ article.get_absolute_url() }}#disqus_thread" data-disqus-identifier="article_detail_{{ article.pk }}">Comments</a></li>
            </ul>
        </div>
        <div class="article-people">
            {% with code_link_list = article.get_live_code_set() %}
            {% include "code/_code_link_list.html" %}{% endwith %}

            {% with person_link_list = article.get_live_people_set() %}
            {% include "people/_person_link_list.html" %}{% endwith %}

            {% with organization_link_list = article.get_live_organization_set() %}
            {% include "people/_organization_link_list.html" %}{% endwith %}
        </div>
    </aside>
    
    {{ article.body|linebreaks|safe }}
    
    {% for articleblock in article.articleblock_set.all() %}
    <div class="page-block">
        <h3 id="{{ articleblock.slug }}">{{ articleblock.title }}</h3>
        {% if articleblock.image and articleblock.image_presentation in ['full-width','inset-left','inset-right'] %}
            {% set _image_width_options = {
                'full-width':'800',
                'inset-left':'300',
                'inset-right':'300',
            } -%}
            {% set _this_image_width = _image_width_options[articleblock.image_presentation] %}
            <div class="image-{{ articleblock.image_presentation }}-wrapper">
                <img src="{{ MEDIA_URL }}{{ thumbnail(articleblock.image, _this_image_width) }}" alt="{{ articleblock.title }}">
                {% if articleblock.pretty_caption %}<p class="caption">{{ articleblock.pretty_caption }}</p>{% endif %}
            </div>
        {% endif %}
        
        {{ articleblock.body|linebreaks|safe }}
        
        {% if articleblock.image and articleblock.image_presentation == 'full-width-below' %}
            <div class="image-full-width-wrapper">
                <img src="{{ MEDIA_URL }}{{ thumbnail(articleblock.image, "800") }}" alt="{{ articleblock.title }}">
                {% if articleblock.pretty_caption %}<p class="caption">{{ articleblock.pretty_caption }}</p>{% endif %}
            </div>
        {% endif %}
    </div>
    {% endfor %}
    
    <aside class="article-people">
        {% with code_link_list = article.get_live_code_set() %}
        {% include "code/_code_link_list.html" %}{% endwith %}

        {% with person_link_list = article.get_live_people_set() %}
        {% include "people/_person_link_list.html" %}{% endwith %}

        {% with organization_link_list = article.get_live_organization_set() %}
        {% include "people/_organization_link_list.html" %}{% endwith %}
    </aside>
    
    <div id="disqus_thread"></div>
    <script type="text/javascript">
        var disqus_shortname = "source-opennews";
        //var disqus_developer = 1; // developer mode is on
        var disqus_identifier = "article_detail_{{ article.pk }}";
        var disqus_url = "{{ HTTP_PROTOCOL }}://{{ request.get_host() }}{{ article.get_absolute_url() }}";
        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '{{ HTTP_PROTOCOL }}://' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
        (function () {
            var s = document.createElement('script'); s.async = true;
            s.type = 'text/javascript';
            s.src = '{{ HTTP_PROTOCOL }}://' + disqus_shortname + '.disqus.com/count.js';
            (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
        }());
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
{% endblock content %}