made base colorbox template work
This commit is contained in:
sawall
parent
0c14627592
commit
fb16ebf20d
2 changed files with 13 additions and 166 deletions
|
|
@ -1,7 +1,19 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{#
|
||||||
|
A head block must be defined in the Pelican theme's base.html prior to
|
||||||
|
closing the HTML head tag so that the siglican stylesheets and javascript
|
||||||
|
can be added. simply adding:
|
||||||
|
{% block head %}{% endblock %}
|
||||||
|
just before the head closer is sufficient.
|
||||||
|
#}
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
<link rel="stylesheet" href="{{ SIGAL_THEME_URL }}/css/style.min.css">
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<link rel="stylesheet" href="{{ SIGAL_THEME_URL }}/css/style.min.css"> <!-- this needs to be in head -->
|
|
||||||
<div id="main" role="main" class="twelve columns offset-by-four">
|
<div id="main" role="main" class="twelve columns offset-by-four">
|
||||||
<header>
|
<header>
|
||||||
{% if SIGAL_ALBUM.breadcrumb %}
|
{% if SIGAL_ALBUM.breadcrumb %}
|
||||||
|
|
|
||||||
|
|
@ -1,165 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
|
|
||||||
<title>{{ album.title }}</title>
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="{{ author }}">
|
|
||||||
<meta name="viewport" content="width=device-width">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=PT+Sans">
|
|
||||||
<link rel="stylesheet" href="{{ theme.url }}/css/style.min.css">
|
|
||||||
<!--[if lt IE 9]>
|
|
||||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
||||||
<![endif]-->
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<div class="four columns">
|
|
||||||
<div class="sidebar">
|
|
||||||
<h1><a href="{{ album.index_url }}">{{ index_title }}</a></h1>
|
|
||||||
{% if settings.links %}
|
|
||||||
<nav id="menu">
|
|
||||||
<ul>
|
|
||||||
{% for title, link in settings.links %}
|
|
||||||
<li><a href="{{ link }}">{{ title }}</a></li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
{% endif %}
|
|
||||||
<footer>
|
|
||||||
<p>{% if author %}© {{ author }} - {% endif %}
|
|
||||||
Generated by <a href="{{ sigal_link }}">sigal</a></p>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="main" role="main" class="twelve columns offset-by-four">
|
|
||||||
<header>
|
|
||||||
{% if album.breadcrumb %}
|
|
||||||
<h2>
|
|
||||||
{% for url, title in album.breadcrumb %}
|
|
||||||
<a href="{{ url }}">{{ title }}</a>{% if not loop.last %} » {% endif %}
|
|
||||||
{% endfor -%}
|
|
||||||
</h2>
|
|
||||||
<hr>
|
|
||||||
{% endif %}
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{% set numbers = ["zero", "one", "two", "three", "four", "five", "six",
|
|
||||||
"seven", "eight", "nine", "ten", "eleven", "twelve"] %}
|
|
||||||
{% set column_size = settings.colorbox_column_size %}
|
|
||||||
{% set nb_columns = (12 / column_size)|int %}
|
|
||||||
{% set column_size_t = numbers[column_size] %}
|
|
||||||
|
|
||||||
{% if album.albums %}
|
|
||||||
{% for alb in album.albums %}
|
|
||||||
{% if loop.index % nb_columns == 1 %}
|
|
||||||
<div id="albums" class="row">
|
|
||||||
{% endif%}
|
|
||||||
<div class="{{ column_size_t }} columns thumbnail
|
|
||||||
{% if loop.index % nb_columns == 1 %}alpha{% endif%}
|
|
||||||
{% if loop.index % nb_columns == 0 %}omega{% endif%}">
|
|
||||||
<a href="{{ alb.url }}">
|
|
||||||
<img src="{{ alb.thumbnail }}" class="album_thumb"
|
|
||||||
alt="{{ alb.name }}" title="{{ alb.name }}" /></a>
|
|
||||||
<span class="album_title">{{ alb.title }}</span>
|
|
||||||
</div>
|
|
||||||
{% if loop.last or loop.index % nb_columns == 0 %}
|
|
||||||
</div>
|
|
||||||
{% endif%}
|
|
||||||
{% endfor %}
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if album.medias %}
|
|
||||||
{% macro img_description(media) -%}
|
|
||||||
{% if media.big %} data-big="{{ media.big }}"{% endif %}
|
|
||||||
{% if media.exif %}
|
|
||||||
{% if media.exif.datetime %}
|
|
||||||
data-date=", {{ media.exif.datetime }}"
|
|
||||||
{% endif %}
|
|
||||||
{% endif %}
|
|
||||||
{%- endmacro %}
|
|
||||||
<div id="gallery" class="row">
|
|
||||||
{% for media in album.medias %}
|
|
||||||
{% if media.type == "image" %}
|
|
||||||
<div class="{{ column_size_t }} columns thumbnail
|
|
||||||
{% if loop.index % nb_columns == 1 %}alpha{% endif%}
|
|
||||||
{% if loop.index % nb_columns == 0 %}omega{% endif%}">
|
|
||||||
<a href="{{ media.filename }}" class="gallery" title="{{ media.filename }}" {{ img_description(media) }}>
|
|
||||||
<img src="{{ media.thumbnail }}" alt="{{ media.filename }}"
|
|
||||||
title="{{ media.title if media.title else media.filename }}" /></a>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% if media.type == "video" %}
|
|
||||||
<div class="{{ column_size_t }} columns thumbnail
|
|
||||||
{% if loop.index % nb_columns == 1 %}alpha{% endif%}
|
|
||||||
{% if loop.index % nb_columns == 0 %}omega{% endif%}">
|
|
||||||
<a href="#{{ media.filename|replace('.', '')|replace(' ', '') }}"
|
|
||||||
class="gallery" inline='yes' title="{{ media.filename }}"
|
|
||||||
{% if media.big %} data-big="{{ media.big }}"{% endif %}>
|
|
||||||
<img src="{{ media.thumbnail }}" alt="{{ media.filename }}"
|
|
||||||
title="{{ media.title if media.title else media.filename }}" /></a>
|
|
||||||
</div>
|
|
||||||
<!-- This contains the hidden content for the video -->
|
|
||||||
<div style='display:none'>
|
|
||||||
<div id="{{ media.filename|replace('.', '')|replace(' ', '') }}">
|
|
||||||
<video controls>
|
|
||||||
<source src='{{ media.filename }}' type='video/webm' />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if album.zip %}
|
|
||||||
<div id="additionnal-infos" class="row">
|
|
||||||
<p><a href="{{ album.zip }}"
|
|
||||||
title="Download a zip archive with all images">Download ZIP</a></p>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if album.description %}
|
|
||||||
<div id="description" class="row">
|
|
||||||
{{ album.description }}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% if album.medias %}
|
|
||||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
||||||
<script>!window.jQuery && document.write(unescape('%3Cscript src="{{ theme.url }}/js/jquery-1.10.2.min.js"%3E%3C/script%3E'))</script>
|
|
||||||
<script src="{{ theme.url }}/js/jquery.colorbox.min.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
$(".gallery").colorbox({
|
|
||||||
rel:"gallery",
|
|
||||||
transition:"none",
|
|
||||||
maxWidth: "90%",
|
|
||||||
maxHeight: "90%",
|
|
||||||
scalePhotos: true,
|
|
||||||
current: "{current} / {total}",
|
|
||||||
title: function () {
|
|
||||||
title = this.title;
|
|
||||||
if(this.hasAttribute("data-big")) {
|
|
||||||
title += " (full size)".link(this.getAttribute("data-big"));
|
|
||||||
}
|
|
||||||
if(this.hasAttribute("data-date")) {
|
|
||||||
title += this.getAttribute("data-date");
|
|
||||||
}
|
|
||||||
return title;
|
|
||||||
},
|
|
||||||
inline: function() {
|
|
||||||
return this.hasAttribute("inline");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{% endif %}
|
|
||||||
{% include 'analytics.html' %}
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in a new issue