Download raw (6.5 KB)
{% load i18n thumbnails %}
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="http://bessst.be/static/images/favicon.png" />
<link rel="shortcut icon" type="image/x-icon" href="http://bessst.be/static/images/favicon.ico" />
{% load compress %}
{% if COMPRESS_ENABLED %}
{% compress css %}
<link rel="stylesheet" type="text/less" media="all" href="{{ STATIC_URL }}less/style.less">
{% endcompress %}
{% else %}
<link rel="stylesheet/less" type="text/css" media="all" href="{{ STATIC_URL }}less/style.less">
<script src="{{ STATIC_URL }}less-1.3.0.min.js"></script>
{% endif%}
<script src="{{ STATIC_URL }}jquery.min.js"></script>
<script src="{{ STATIC_URL }}/js/jquery.masonry.min.js"></script>
<script src="{{ STATIC_URL }}js/jquery-ui-1.8.23.custom.min.js"></script>
<script src="{{ STATIC_URL }}js/jquery.tailing.js"></script>
<title>{% trans "BESSST - Brussels, Heritage and Silence" %} - {% block title %}{% endblock %}</title>
</head>
<body class="{% block slug %}base{% endblock %}">
{% block nav %}
<nav>
<ul id="logo">
<li><a href="/"><img src="{{ STATIC_URL }}images/logo-plain.png" /></a></li>
</ul>
<ul id="navi">
<li><a id="menu-projects" href="{% url projects %}">{% trans "Projects" %}</a></li>
<li><a id="menu-agenda" href="{% url agenda %}">{% trans "Calendar" %}</a></li>
<li><a id="menu-community" href="{% url community %}">{% trans "Community" %}</a></li>
<li><a id="menu-inspiratie" href="{% url inspiration %}">{% trans "Inspiration" %}</a></li>
<li><a id="menu-over" href="{% url flatpage-detail slug="over" %}">{% trans "About" %}</a></li>
<li><a id="menu-inspiratie" href="{% url atlas %}">{% trans "Atlas" %}</a></li>
</ul>
<form action="/i18n/setlang/" method="post">
{% csrf_token %}
<input name="next" type="hidden" value="{{ request.session.no_lang_path }}" />
{% get_language_info_list for LANGUAGES as languages %}
<ul id="lan">
{% for language in languages %}
<li class='{% if LANGUAGE_CODE == language.code %}selected{% endif %}'><button name="language" value="{{ language.code }}">{{ language.code }}</button></li>
{% endfor %}
</ul>
</form>
</nav>
{% endblock %}
<div id="container">
<header>
{% block header %}
{% endblock %}
</header>
{% block content %}
<section id="main">
</section>
{% endblock %}
</div>
<figure id="background">
{% block background %}
{% if object.axis %}
<div id="background-gradient" style="background-image: url('{{ STATIC_URL }}axis/{{ object.axis.pictogram }}-gradient.png');"></div>
{% if object.image_set.all.0.image %}
<img class="background-image" src="{{ object.image_set.all.0.image|thumbnail:'1200w' }}" style="width: 100%;"/>
{% endif %}
{% else %}
<div id="background-gradient" style="background-image: url('{{ STATIC_URL }}axis/all-gradient.png');"></div>
<!--<img class="background-image" src="{{ MEDIA_URL }}images/Waerbeke_vlinder_s.jpg" style="width: 100%;"/>-->
{% endif %}
{% endblock %}
</figure>
<footer>
{% block footer %}
<div id='caption-block'>
{% if object.image_set.all %}
{% if object.image_set.count > 1 %}
<div class="prev">
<a href="#" style="text-decoration: none;"><img src="{{ STATIC_URL }}axis/arrow-left.png"/></a>
</div>
{% endif %}
<div id="caption-list">
{% for img in object.image_set.all %}
<div class="caption {% if forloop.first %}visible{% endif %}" title={{ img.image.url }}>
{{ img }}
</div>
{% endfor %}
</div>
{% if object.image_set.count > 1 %}
<div class="next">
<a href="#" style="text-decoration: none;"><img src="{{ STATIC_URL }}axis/arrow-right.png"/></a>
</div>
{% endif %}
{% endif %}
</div>
{% endblock %}
</footer>
<script>
$(window).load(function(){
// hover on logo
$('#logo').hover(function(){
$('img', $(this)).attr('src', '{{ STATIC_URL }}images/logo.png');
}, function(){
$('img', $(this)).attr('src', '{{ STATIC_URL }}images/logo-plain.png');
});
// show where we are
$("#navi li a").each(function() {
if ( $(this).attr('href') == document.location.pathname ) {
$(this).addClass("selected");
};
});
// Toggle boxes when hovering caption box
$("footer div#caption-list").hover(function(){
$("section").css("visibility", "hidden");
$("header").hide();
$("#background-gradient").hide();
}, function(){
$("section").css("visibility", "visible");
$("header").show();
$("#background-gradient").show();
});
// Navigate through images
$("footer div.prev").click(function(){
current = $("div.caption.visible");
current.removeClass("visible")
if (current.prev().hasClass("caption")){
current.prev().addClass("visible");
$(".background-image").attr("src", current.prev().attr("title"));
} else {
last = $("div#caption-list div.caption:last-child").addClass("visible");
last.addClass("visible");
$(".background-image").attr("src", last.attr("title"));
}
});
$("footer div.next").click(function(){
current = $("div.caption.visible");
current.removeClass("visible")
if (current.next().hasClass("caption")){
current.next().addClass("visible");
$(".background-image").attr("src", current.next().attr("title"));
} else {
first = $("div#caption-list div.caption:first-child")
first.addClass("visible");
$(".background-image").attr("src", first.attr("title"));
}
});
// applies "Tailing/Queue de lampe" filter
$(".tail").tailing();
});
$(window).resize(function(){
if ($('.tail-space').length > 0) {
$('.tail-space').delete();
}
$(".tail").tailing();
});
</script>
{% block extra_js %}
{% endblock %}
{% include "analytics-partial.html" %}
</body>
</html>