prenex/magcms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add support of Open Graph

Browse Source
This commit is contained in:
Adrien Beudin 2016-11-04 12:55:02 +01:00
parent 79c17c54cc
commit a465fdfe69
24 changed files with 709 additions and 694 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
prosopopee/themes/exposure/templates/base.html
View File

@ -1,35 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
{% block css %} {% block css %}
{% endblock %} {% endblock %}
{% if settings.rss -%} {% if settings.rss %}
<link rel="alternate" type="application/rss+xml" title="{{ settings.title }}" href="{{ settings.url }}/feed.xml" /> <link rel="alternate" type="application/rss+xml" title="{{ settings.title }}" href="{{ settings.url }}/feed.xml" />
{% endif -%} {% endif %}
<!--Let browser know website is optimized for mobile--> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{{ settings.title }}</title> <title>{{ settings.title }}</title>
</head> </head>
<body>
<body> <div class="gallery-header">
{% block logo %}
<div class="gallery-header"> {% endblock %}
{% block logo %} <h1>{{ settings.title }}</h1>
{% endblock %} {% if settings.sub_title %}<h4>{{ settings.sub_title }}</h4>{% endif %}
<h1>{{ settings.title }}</h1> <hr>
{% if settings.sub_title -%}<h4>{{ settings.sub_title }}</h4>{% endif -%} {% if settings.menu %}
<hr> {% include 'menu.html' %}
{% if settings.menu -%} {% endif -%}
{% include 'menu.html' %} </div>
{% endif -%} {% block content %}
</div> {% endblock %}
{% include 'footer.html' %}
</body>
{% block content %}
{% endblock %}
{% include 'footer.html' %}
</body>
</html> </html>

110
prosopopee/themes/exposure/templates/example.html
View File

@ -1,74 +1,74 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="../static/css/style.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="../static/css/style.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile--> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head> </head>
<body> <body>
<div class="gallery-header"> <div class="gallery-header">
<img id="logo" src="../static/img/logo.svg" /> <img id="logo" src="../static/img/logo.svg" />
<h1>Gallery Name</h1> <h1>Gallery Name</h1>
<h4>Subtext of the gallery name</h4> <h4>Subtext of the gallery name</h4>
<hr> <hr>
</div> </div>
<div class="galleries-grid"> <div class="galleries-grid">
<div class="galleries-line"> <div class="galleries-line">
<div class="gallery-square"> <div class="gallery-square">
<a href="#"> <a href="#">
<div class="gallery-title"> <div class="gallery-title">
<h2>First Gallery Title</h2> <h2>First Gallery Title</h2>
<h3>Sub gallery title</h3> <h3>Sub gallery title</h3>
<div class="gallery-datetime">3 march 2015</div> <div class="gallery-datetime">3 march 2015</div>
</div> </div>
</a> </a>
<div class="gallery-cover" style="background-image: url('./1.png');"></div> <div class="gallery-cover" style="background-image: url('./1.png');"></div>
</div> </div>
<div class="gallery-square"> <div class="gallery-square">
<a href="#"> <a href="#">
<div class="gallery-title"> <div class="gallery-title">
<h2>Second Gallery Title</h2> <h2>Second Gallery Title</h2>
<h3>Sub gallery title</h3> <h3>Sub gallery title</h3>
<div class="gallery-datetime">3 march 2015</div> <div class="gallery-datetime">3 march 2015</div>
</div> </div>
</a> </a>
<div class="gallery-cover" style="background-image: url('./1.png');"></div> <div class="gallery-cover" style="background-image: url('./1.png');"></div>
</div> </div>
</div> </div>
<div class="galleries-line"> <div class="galleries-line">
<div class="gallery-square"> <div class="gallery-square">
<a href="#"> <a href="#">
<div class="gallery-title"> <div class="gallery-title">
<h2>First Gallery Title</h2> <h2>First Gallery Title</h2>
<h3>Sub gallery title</h3> <h3>Sub gallery title</h3>
<div class="gallery-datetime">3 march 2015</div> <div class="gallery-datetime">3 march 2015</div>
</div> </div>
</a> </a>
<div class="gallery-cover" style="background-image: url('./1.png');"></div> <div class="gallery-cover" style="background-image: url('./1.png');"></div>
</div> </div>
<div class="gallery-square"> <div class="gallery-square">
<a href="#"> <a href="#">
<div class="gallery-title"> <div class="gallery-title">
<h2>Second Gallery Title</h2> <h2>Second Gallery Title</h2>
<h3>Sub gallery title</h3> <h3>Sub gallery title</h3>
<div class="gallery-datetime">3 march 2015</div> <div class="gallery-datetime">3 march 2015</div>
</div> </div>
</a> </a>
<div class="gallery-cover" style="background-image: url('./1.png');"></div> <div class="gallery-cover" style="background-image: url('./1.png');"></div>
</div> </div>
</div> </div>
</div> </div>
<p style="visibility: hidden">.</p> <p style="visibility: hidden">.</p>
<footer> <footer>
<p>Generate using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="CC-BY-SA">CC-BY-SA</a></p> <p>Generate using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="CC-BY-SA">CC-BY-SA</a></p>
</footer> </footer>
</body> </body>
</html> </html>

20
prosopopee/themes/exposure/templates/feed.xml
View File

@ -1,13 +1,13 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel> <channel>
<title>{{ settings.title }}</title> <title>{{ settings.title }}</title>
<description>{{ settings.sub_title }}</description> <description>{{ settings.sub_title }}</description>
<link>{{ settings.url }}</link> <link>{{ settings.url }}</link>
<atom:link href="{{ settings.url }}/feed.xml" rel="self" type="application/rss+xml" /> <atom:link href="{{ settings.url }}/feed.xml" rel="self" type="application/rss+xml" />
{% for gallery in galleries %} {% for gallery in galleries %}
{% set absolute_url = settings.url + "/" %} {% set absolute_url = settings.url + "/" %}
{% include "item.html" %} {% include "item.html" %}
{% endfor %} {% endfor %}
</channel> </channel>
</rss> </rss>

11
prosopopee/themes/exposure/templates/footer.html
View File

@ -1,11 +1,10 @@
{% if settings.licence is not defined %} {% if settings.licence is not defined %}
{% set licence_url = 'https://creativecommons.org/licenses/by-sa/3.0/' -%} {% set licence_url = 'https://creativecommons.org/licenses/by-sa/3.0/' %}
{% set licence_name = 'CC-BY-SA' -%} {% set licence_name = 'CC-BY-SA' %}
{% else %} {% else %}
{% set licence_url = settings.licence.url -%} {% set licence_url = settings.licence.url %}
{% set licence_name = settings.licence.name -%} {% set licence_name = settings.licence.name %}
{% endif %} {% endif %}
<footer> <footer>
<p>Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="{{ licence_url }}">{{ licence_name }}</a> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p> <p>Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="{{ licence_url }}">{{ licence_name }}</a> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>
</footer> </footer>

203
prosopopee/themes/exposure/templates/gallery-index.html
View File

@ -1,132 +1,127 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8"> <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="../static/css/fonts.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="../static/css/fonts.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="../static/css/style-page.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="../static/css/style-page.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="../static/css/panorama_viewer.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="../static/css/panorama_viewer.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> {% if gallery.description %}
{% if gallery.description %} <meta name="description" content="{{ gallery.description }}" />
<meta name="description" content="{{ gallery.description }}" /> {% endif %}
{% endif %} {% if gallery.lang %}
{% if gallery.lang %} <meta name="language" content="{{ gallery.lang }}" />
<meta name="language" content="{{ gallery.lang }}" /> {% endif %}
{% endif %} {% if settings.settings.og %}
<title>{{ gallery.title }} · {{ settings.title }}</title> {% include "opengraph.html" %}
</head> {% endif %}
<title>{{ gallery.title }} · {{ settings.title }}</title>
<body> </head>
{% for section in gallery.sections %} <body>
{% include "sections/" + section.type + ".html" %} {% for section in gallery.sections %}
{% endfor %} {% include "sections/" + section.type + ".html" %}
{% endfor %}
{% if settings.share %} {% if settings.share %}
{% include "share.html" %} {% include "share.html" %}
{% endif %} {% endif %}
<div class="back-to-home">
<div class="back-to-home"> <hr>
<hr> <a href="../">
<a href="../"> <div id="logo" src="./../static/img/logo.svg">
<div id="logo" src="./../static/img/logo.svg"> HOME
HOME
</div>
</a>
</div> </div>
</a>
<script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script> </div>
<script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script> <script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script> <script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../static/js/jquery.lazyload.min.js" charset="utf-8"></script> <script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../static/js/picturefill.min.js" charset="utf-8"></script> <script type="text/javascript" src="../static/js/jquery.lazyload.min.js" charset="utf-8"></script>
<script type="text/javascript"> <script type="text/javascript" src="../static/js/picturefill.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() { $(function() {
baguetteBox.run(".baguette", {}); baguetteBox.run(".baguette", {});
$(".panorama").panorama_viewer({ $(".panorama").panorama_viewer({
repeat: true, repeat: true,
direction: "horizontal", direction: "horizontal",
animationTime: 150, animationTime: 150,
easing: "linear", easing: "linear",
overlay: true overlay: true
}); });
}); });
var video = $("video.lazy"); var video = $("video.lazy");
video.on('click', function(e){ video.on('click', function(e){
var vid = video[0]; var vid = video[0];
vid.play(); vid.play();
if (vid.requestFullscreen) { if (vid.requestFullscreen) {
vid.requestFullscreen(); vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) { } else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen(); vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) { } else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen(); vid.webkitRequestFullscreen();
} }
}); });
$(function() { $(function() {
$("img.lazy").lazyload({ $("img.lazy").lazyload({
effect : "fadeIn" effect : "fadeIn"
}); });
$("video.lazy").lazyload({ $("video.lazy").lazyload({
effect : "fadeIn" effect : "fadeIn"
}); });
$("section.lazy").lazyload({ $("section.lazy").lazyload({
effect : "fadeIn" effect : "fadeIn"
}); });
}); });
{% if settings.settings.light_mode %} {% if settings.settings.light_mode %}
var slowLoad = window.setTimeout( function() { var slowLoad = window.setTimeout( function() {
var html_node = document.getElementsByTagName('html')[0]; var html_node = document.getElementsByTagName('html')[0];
var div = document.createElement('div'); var div = document.createElement('div');
div.setAttribute('id', 'slow-notice'); div.setAttribute('id', 'slow-notice');
var t1 = document.createTextNode("The website is taking a long time to load."); var t1 = document.createTextNode("The website is taking a long time to load.");
var br = document.createElement('br'); var br = document.createElement('br');
var t2 = document.createTextNode("You can switch to the "); var t2 = document.createTextNode("You can switch to the ");
var a = document.createElement('a'); var a = document.createElement('a');
a.setAttribute('href', './light'); a.setAttribute('href', './light');
a.innerHTML = 'Light Weight Site'; a.innerHTML = 'Light Weight Site';
var dismiss = document.createElement('span'); var dismiss = document.createElement('span');
dismiss.innerHTML = '[x] dismiss'; dismiss.innerHTML = '[x] dismiss';
dismiss.setAttribute('class', 'dismiss'); dismiss.setAttribute('class', 'dismiss');
dismiss.onclick = function() { dismiss.onclick = function() {
html_node.removeChild(div); html_node.removeChild(div);
} }
var dismiss_container = document.createElement('div'); var dismiss_container = document.createElement('div');
dismiss_container.appendChild(dismiss); dismiss_container.appendChild(dismiss);
dismiss_container.setAttribute('class', 'dismiss-container'); dismiss_container.setAttribute('class', 'dismiss-container');
div.appendChild(t1); div.appendChild(t1);
div.appendChild(br); div.appendChild(br);
div.appendChild(t2); div.appendChild(t2);
div.appendChild(a); div.appendChild(a);
div.appendChild(dismiss_container); div.appendChild(dismiss_container);
html_node.appendChild(div); html_node.appendChild(div);
}, 1000 ); }, 1000 );
window.addEventListener( 'load', function() { window.addEventListener( 'load', function() {
try { try {
window.clearTimeout( slowLoad ); window.clearTimeout( slowLoad );
html_node.removeChild(div); html_node.removeChild(div);
} catch (e){ } catch (e){
// that's okay. // that's okay.
} }
}); });
{% endif %} {% endif %}
</script>
</script> {% include "footer.html" %}
</body>
{% include "footer.html" %}
</body>
</html> </html>

90
prosopopee/themes/exposure/templates/index.html
View File

@ -1,57 +1,57 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block css %} {% block css %}
<link type="text/css" rel="stylesheet" href="static/css/fonts.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="static/css/fonts.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="static/css/style.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="static/css/style.css" media="screen,projection"/>
{% endblock %} {% endblock %}
{% block logo %} {% block logo %}
{% if sub_index %} {% if sub_index %}
<div class="back-to-home"> <div class="back-to-home">
<hr> <hr>
<a href="../"> <a href="../">
<div id="logo" src="static/img/logo.svg"> <div id="logo" src="static/img/logo.svg">
Back Back
</div>
</a>
</div> </div>
{% else %} </a>
<img id="logo" src="static/img/logo.svg"/> </div>
{% endif %} {% else %}
<img id="logo" src="static/img/logo.svg"/>
{% endif %}
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="galleries-grid"> <div class="galleries-grid">
{% for galleries_line in galleries|reverse|batch(3)|reverse %} {% for galleries_line in galleries|reverse|batch(3)|reverse %}
<div class="galleries-line covers-{{ galleries_line|length }}"> <div class="galleries-line covers-{{ galleries_line|length }}">
{% for gallery in galleries_line|reverse %}<!-- comment tricks against space between inline-block {% for gallery in galleries_line|reverse %}<!-- comment tricks against space between inline-block
--><div class="gallery-square"> --><div class="gallery-square">
<a href="{{ gallery.link }}"> <a href="{{ gallery.link }}">
<div class="gallery-title"> <div class="gallery-title">
<h2>{{ gallery.title }}</h2> <h2>{{ gallery.title }}</h2>
{% if gallery.sub_title %}<h3>{{ gallery.sub_title }}</h3>{% endif %} {% if gallery.sub_title %}<h3>{{ gallery.sub_title }}</h3>{% endif %}
{% if settings.show_date and gallery.date %}<div class="gallery-datetime">{{ gallery.date.strftime("%d %B %Y") }}</div>{% endif %} {% if settings.show_date and gallery.date %}<div class="gallery-datetime">{{ gallery.date.strftime("%d %B %Y") }}</div>{% endif %}
{% if gallery.tags %}<div class="gallery-tag">IN {% for tag in gallery.tags -%} <span> {{ tag }}</span> {% endfor -%}</div>{% endif %} {% if gallery.tags %}<div class="gallery-tag">IN {% for tag in gallery.tags -%} <span> {{ tag }}</span> {% endfor -%}</div>{% endif %}
</div>
</a>
{% if gallery.cover_type == "video" %}
{% set video = Video(gallery.cover) %}
{{ video.copy() }}
<div class="gallery-cover">
<video autoplay loop muted class="fillWidth">
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
</video>
<img class="fillWidth" alt="" src="{{ video.generate_thumbnail("900") }}">
</div>
{% else %}
{% set cover = Image(gallery.cover) %}
{{ cover.copy() }}
<div class="gallery-cover" style="background-image: url('{{ cover.generate_thumbnail("x900") }}'), url('{{ cover.generate_thumbnail("x150") }}');"></div>
{% endif %}
</div><!-- comment tricks against space between inline-block
-->{% endfor %}
</div> </div>
{% endfor %} </a>
</div> {% if gallery.cover_type == "video" %}
<p style="visibility: hidden">.</p> {% set video = Video(gallery.cover) %}
{{ video.copy() }}
<div class="gallery-cover">
<video autoplay loop muted class="fillWidth">
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
</video>
<img class="fillWidth" alt="" src="{{ video.generate_thumbnail("900") }}">
</div>
{% else %}
{% set cover = Image(gallery.cover) %}
{{ cover.copy() }}
<div class="gallery-cover" style="background-image: url('{{ cover.generate_thumbnail("x900") }}'), url('{{ cover.generate_thumbnail("x150") }}');"></div>
{% endif %}
</div><!-- comment tricks against space between inline-block
-->{% endfor %}
</div>
{% endfor %}
</div>
<p style="visibility: hidden">.</p>
{% endblock %} {% endblock %}

23
prosopopee/themes/exposure/templates/item.html
View File

@ -1,16 +1,15 @@
{% set absolute_url = absolute_url+ gallery.link+"/" -%} {% set absolute_url = absolute_url+ gallery.link+"/" %}
<item> <item>
<title>{{ gallery.title }}</title> <title>{{ gallery.title }}</title>
<link>{{ absolute_url }}</link> <link>{{ absolute_url }}</link>
<guid>{{ gallery.link }}</guid> <guid>{{ gallery.link }}</guid>
{% if gallery.sub_title -%} {% if gallery.sub_title %}
<description>{{ gallery.sub_title }}</description> <description>{{ gallery.sub_title }}</description>
{% endif -%} {% endif -%}
<pubDate>{{ gallery.date }}</pubDate> <pubDate>{{ gallery.date }}</pubDate>
</item> </item>
{% for sub_gallery in gallery.sub_gallery %} {% for sub_gallery in gallery.sub_gallery %}
{% with gallery=sub_gallery %} {% with gallery=sub_gallery %}
{% include "item.html" %} {% include "item.html" %}
{% endwith %} {% endwith %}
{% endfor %} {% endfor %}

14
prosopopee/themes/exposure/templates/menu.html
View File

@ -1,19 +1,19 @@
<nav> <nav>
<div class="nav-wrapper"> <div class="nav-wrapper">
<ul> <ul>
{%- for line in settings.menu -%} {% for line in settings.menu %}
{% set file_name, menu_name = line.items()[0] %} {% set file_name, menu_name = line.items()[0] %}
{% if file_name.startswith('http') %} {% if file_name.startswith('http') %}
{% set file_name = file_name %} {% set file_name = file_name %}
{% elif gallery %} {% elif gallery %}
{% set file_name = "../"+file_name %} {% set file_name = "../"+file_name %}
{%- endif -%} {% endif %}
{%- if loop.first -%} {% if loop.first %}
<li><a href={{ file_name }} class=first-item-menu>{{ menu_name }}</a></li> <li><a href={{ file_name }} class=first-item-menu>{{ menu_name }}</a></li>
{% else %} {% else %}
<li><a href={{ file_name }} class=item-menu>{{ menu_name }}</a></li> <li><a href={{ file_name }} class=item-menu>{{ menu_name }}</a></li>
{%- endif -%} {% endif %}
{%- endfor -%} {% endfor %}
</ul> </ul>
</div> </div>
</nav> </nav>

13
prosopopee/themes/exposure/templates/opengraph.html Normal file
View File

@ -0,0 +1,13 @@
<meta property="og:title" content="{{ gallery.title }}"/>
<meta property="og:image" content="{{ gallery.cover }}"/>
<meta property="og:site_name" content="{{ settings.title }}"/>
{% if gallery.description %}
<meta property="og:description" content="{{ gallery.description }}"/>
{% endif %}
<meta property="og:type" content="article"/>
<meta property="article:published_time" content="{{ gallery.date }}">
{% if gallery.tags %}
{% for tag in gallery.tags %}
<meta property="article:tag" content="{{ tag }}">
{% endfor %}
{% endif %}

156
prosopopee/themes/exposure/templates/page-example.html
View File

@ -1,103 +1,103 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8"> <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="../static/css/style-page.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="../static/css/style-page.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile--> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head> </head>
<body> <body>
<section class="full-picture" style="background: transparent url('./1.png') no-repeat scroll center top / cover;"> <section class="full-picture" style="background: transparent url('./1.png') no-repeat scroll center top / cover;">
<div class="picture-text"> <div class="picture-text">
<div class="picture-text-column"> <div class="picture-text-column">
<h1>Some title on the picture</h1> <h1>Some title on the picture</h1>
<h2>Some subtitle</h2> <h2>Some subtitle</h2>
<div class="datetime">march 3th 2015</div> <div class="datetime">march 3th 2015</div>
</div>
</div> </div>
</div>
</section> </section>
<section class="full-picture" style="background: transparent url('./1.png') no-repeat scroll center top / cover;"> <section class="full-picture" style="background: transparent url('./1.png') no-repeat scroll center top / cover;">
</section> </section>
<section class="bordered-picture baguette"> <section class="bordered-picture baguette">
<a href="./1.png"> <a href="./1.png">
<img src="./1.png"> <img src="./1.png">
</a> </a>
</section> </section>
<section class="pictures-group baguette"> <section class="pictures-group baguette">
<div class="pictures-line"> <div class="pictures-line">
<div class="picture"> <div class="picture">
<a href="./1.png"> <a href="./1.png">
<img src="./1-small.png"> <img src="./1-small.png">
</a> </a>
</div>
<div class="separator"></div>
<div class="picture">
<a href="./2.png">
<img src="./2-small.png">
</a>
</div>
<div class="separator"></div>
<div class="picture">
<a href="./1.png">
<img src="./1-small.png">
</a>
</div>
</div> </div>
<div class="pictures-line"> <div class="separator"></div>
<div class="picture"> <div class="picture">
<a href="./1.png"> <a href="./2.png">
<img src="./1-small.png"> <img src="./2-small.png">
</a> </a>
</div>
<div class="separator"></div>
<div class="picture">
<a href="./2.png">
<img src="./2-small.png">
</a>
</div>
<div class="separator"></div>
<div class="picture">
<a href="./2.png">
<img src="./2-small.png">
</a>
</div>
<div class="separator"></div>
<div class="picture">
<a href="./2.png">
<img src="./2-small.png">
</a>
</div>
<div class="separator"></div>
<div class="picture">
<a href="./2.png">
<img src="./2-small.png">
</a>
</div>
</div> </div>
<div class="separator"></div>
<div class="picture">
<a href="./1.png">
<img src="./1-small.png">
</a>
</div>
</div>
<div class="pictures-line">
<div class="picture">
<a href="./1.png">
<img src="./1-small.png">
</a>
</div>
<div class="separator"></div>
<div class="picture">
<a href="./2.png">
<img src="./2-small.png">
</a>
</div>
<div class="separator"></div>
<div class="picture">
<a href="./2.png">
<img src="./2-small.png">
</a>
</div>
<div class="separator"></div>
<div class="picture">
<a href="./2.png">
<img src="./2-small.png">
</a>
</div>
<div class="separator"></div>
<div class="picture">
<a href="./2.png">
<img src="./2-small.png">
</a>
</div>
</div>
</section> </section>
<div class="back-to-home"> <div class="back-to-home">
<hr> <hr>
<a href=".."> <a href="..">
<div id="logo" src="./../static/img/logo.svg"/> <div id="logo" src="./../static/img/logo.svg"/>
HOME HOME
</div> </div>
</a> </a>
</div> </div>
<script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script> <script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
baguetteBox.run(".baguette", {}); baguetteBox.run(".baguette", {});
</script> </script>
<footer> <footer>
<p>Generate using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="CC-BY-SA">CC-BY-SA</a></p> <p>Generate using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="CC-BY-SA">CC-BY-SA</a></p>
</footer> </footer>
</body> </body>
</html> </html>

14
prosopopee/themes/exposure/templates/page.html
View File

@ -1,32 +1,26 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block css %} {% block css %}
<link type="text/css" rel="stylesheet" href="../static/css/fonts.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="../static/css/fonts.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="../static/css/style.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="../static/css/style.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="../static/css/style-page.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="../static/css/style-page.css" media="screen,projection"/>
{% endblock %} {% endblock %}
{% block logo %} {% block logo %}
<img id="logo" src="../static/img/logo.svg" /> <img id="logo" src="../static/img/logo.svg" />
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<section class="text"> <section class="text">
<h2>{{ gallery.title }}</h2> <h2>{{ gallery.title }}</h2>
</section> </section>
{% for section in gallery.sections %} {% for section in gallery.sections %}
{% include "sections/" + section.type + ".html" %} {% include "sections/" + section.type + ".html" %}
{% endfor %} {% endfor %}
<div class="back-to-home"> <div class="back-to-home">
<hr> <hr>
<a href="../index.html"> <a href="../index.html">
<div id="logo" src="../static/img/logo.svg"/> <div id="logo" src="../static/img/logo.svg"/>
HOME HOME
</div> </div>
</a> </a>
</div> </div>
<script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script> <script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
{% endblock %} {% endblock %}

58
prosopopee/themes/exposure/templates/sections/author.html
View File

@ -1,33 +1,33 @@
{% set image = Image(section.image) %} {% set image = Image(section.image) %}
{{ image.copy() }} {{ image.copy() }}
<div class="author-meta"> <div class="author-meta">
<img src={{ image.generate_thumbnail("80x80") }} alt="" class="circle"> <img src={{ image.generate_thumbnail("80x80") }} alt="" class="circle">
<div> <div>
<span class=author-info>Story by <span class=author-info>Story by
<h4>{{ section.name }}</h4> <h4>{{ section.name }}</h4>
{% if section.text %} {% if section.text %}
<div class=desc>{{ section.text }}</div> <div class=desc>{{ section.text }}</div>
{% endif %} {% endif %}
</span> </span>
</div> </div>
<div class="separator"></div> <div class="separator"></div>
<div> <div>
{% if section.twitter %} {% if section.twitter %}
<span> <span>
<a href="http://twitter.com/{{ section.twitter }}">Twitter</a> <a href="http://twitter.com/{{ section.twitter }}">Twitter</a>
</span> </span>
<span> | </span> <span> | </span>
{% endif %} {% endif %}
{% if section.facebook %} {% if section.facebook %}
<span> <span>
<a href="http://facebook.com/{{ section.facebook }}">Facebook</a> <a href="http://facebook.com/{{ section.facebook }}">Facebook</a>
</span> </span>
<span> | </span> <span> | </span>
{% endif %} {% endif %}
{% if section.website %} {% if section.website %}
<span> <span>
<a href="{{ section.sebsite }}">{{ section.website }}</a> <a href="{{ section.sebsite }}">{{ section.website }}</a>
</span> </span>
{% endif %} {% endif %}
</div> </div>
</div> </div>

98
prosopopee/themes/exposure/templates/sections/bordered-picture.html
View File

@ -1,53 +1,51 @@
{% if section.background %} {% if section.background %}
<div class="bg-section" style="background: {{ section.background }};"> <div class="bg-section" style="background: {{ section.background }};">
{% endif %} {% endif %}
{% if section.image.type == "video" %}
{% if section.image.type == "video" %} {% set video = Video(section.image) %}
{% set video = Video(section.image) %} {% set caption = section.text %}
{% set caption = section.text %} {{ video.copy() }}
{{ video.copy() }} <section class="bordered-picture baguette" style="position: relative;">
<section class="bordered-picture baguette" style="position: relative;"> <div class="caption">
<div class="caption"> <img class="lazy" data-original="{{ video.generate_thumbnail("2000") }}" src="" alt="">
<img class="lazy" data-original="{{ video.generate_thumbnail("2000") }}" src="" alt=""> <video class="lazy" id="video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="none" muted>
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="none" muted> <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm"> </video>
</video> {% if caption %}
{% if caption %} <div class="caption__overlay">
<div class="caption__overlay"> <h5 class="caption__overlay__title">{{ caption }}</h5>
<h5 class="caption__overlay__title">{{ caption }}</h5> </div>
</div> {% endif %}
{% endif %}
</div>
</section>
{% else %}
{% set image = Image(section.image) %}
{% set caption = section.text %}
{{ image.copy() }}
<section class="bordered-picture baguette">
<div class="caption">
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
data-at-450="{{ image.generate_thumbnail("x450") }}"
data-at-800="{{ image.generate_thumbnail("x800") }}"
data-at-1366="{{ image.generate_thumbnail("x1366") }}"
data-at-1920="{{ image.generate_thumbnail("x1920") }}"
>
<picture>
<source srcset="{{ image.generate_thumbnail("x450") }}" media="(max-width: 450px)">
<source srcset="{{ image.generate_thumbnail("x800") }}" media="(max-width: 800px)">
<source srcset="{{ image.generate_thumbnail("x1366") }}" media="(max-width: 1366px)">
<source srcset="{{ image.generate_thumbnail("x1920") }}" media="(max-width: 1920px)">
<img src="{{ image }}" data-original="{{ image }}" alt="">
</picture>
{% if caption %}
<div class="caption__overlay">
<h5 class="caption__overlay__title">{{ caption }}</h5>
</div>
{% endif %}
</a>
</div>
</section>
{% endif %}
{% if section.background %}
</div> </div>
</section>
{% else %}
{% set image = Image(section.image) %}
{% set caption = section.text %}
{{ image.copy() }}
<section class="bordered-picture baguette">
<div class="caption">
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
data-at-450="{{ image.generate_thumbnail("x450") }}"
data-at-800="{{ image.generate_thumbnail("x800") }}"
data-at-1366="{{ image.generate_thumbnail("x1366") }}"
data-at-1920="{{ image.generate_thumbnail("x1920") }}"
>
<picture>
<source srcset="{{ image.generate_thumbnail("x450") }}" media="(max-width: 450px)"/>
<source srcset="{{ image.generate_thumbnail("x800") }}" media="(max-width: 800px)"/>
<source srcset="{{ image.generate_thumbnail("x1366") }}" media="(max-width: 1366px)"/>
<source srcset="{{ image.generate_thumbnail("x1920") }}" media="(max-width: 1920px)"/>
<img src="{{ image }}" data-original="{{ image }}" alt=""/>
</picture>
{% if caption %}
<div class="caption__overlay">
<h5 class="caption__overlay__title">{{ caption }}</h5>
</div>
{% endif %}
</a>
</div>
</section>
{% endif %}
{% if section.background %}
</div>
{% endif %} {% endif %}

90
prosopopee/themes/exposure/templates/sections/full-picture.html
View File

@ -1,53 +1,45 @@
{% if section.image.type == "video" %} {% if section.image.type == "video" %}
{% set video = Video(section.image) %} {% set video = Video(section.image) %}
{{ video.copy() }} {{ video.copy() }}
<section class="full-picture">
<section class="full-picture"> <div class="video-container">
<div class="video-container">
{% if section.text %}
<div class="title-container">
<div class="headline">
<h1>{{ section.text.title }}</h1>
<h2>{{ section.text.sub_title }}</h2>
{% if section.text.date_end %}
<div class="datetime">{{ section.text.date.strftime("%d %B %Y") }} to {{ section.text.date_end.strftime("%d %B %Y") }}</div>
{% else %}
{% if section.text.date %}
<div class="datetime">{{ section.text.date.strftime("%d %B %Y") }}</div>{% endif %}
{% endif %}
</div>
</div>
{% endif %}
<video autoplay loop muted class="fillWidth">
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
</video>
<img class="lazy full-picture" src="{{ video.generate_thumbnail("2000") }}">
</div>
</section>
{% else %}
{% set image = Image(section.image) %}
{{ image.copy() }}
<section class="full-picture" style="background: url('{{ image.generate_thumbnail("x2000") }}') no-repeat fixed center top / cover, url('{{ image.generate_thumbnail("x450") }}') no-repeat fixed center top / cover transparent;">
{% if section.text %} {% if section.text %}
<div class="picture-text"> <div class="title-container">
<div class="picture-text-column"> <div class="headline">
<h1>{{ section.text.title }}</h1> <h1>{{ section.text.title }}</h1>
<h2>{{ section.text.sub_title }}</h2> <h2>{{ section.text.sub_title }}</h2>
{% if section.text.date_end %} {% if section.text.date_end %}
<div class="datetime">{{ section.text.date.strftime("%d %B %Y") }} to {{ section.text.date_end.strftime("%d %B %Y") }}</div> <div class="datetime">{{ section.text.date.strftime("%d %B %Y") }} to {{ section.text.date_end.strftime("%d %B %Y") }}</div>
{% else %} {% else %}
{% if section.text.date %} {% if section.text.date %}
<div class="datetime">{{ section.text.date.strftime("%d %B %Y") }}</div>{% endif %} <div class="datetime">{{ section.text.date.strftime("%d %B %Y") }}</div>{% endif %}
{% endif %} {% endif %}
</div> </div>
</div> </div>
{% endif %} {% endif %}
<video autoplay loop muted class="fillWidth">
</section> <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
</video>
<img class="lazy full-picture" src="{{ video.generate_thumbnail("2000") }}">
</div>
</section>
{% else %}
{% set image = Image(section.image) %}
{{ image.copy() }}
<section class="full-picture" style="background: url('{{ image.generate_thumbnail("x2000") }}') no-repeat fixed center top / cover, url('{{ image.generate_thumbnail("x450") }}') no-repeat fixed center top / cover transparent;">
{% if section.text %}
<div class="picture-text">
<div class="picture-text-column">
<h1>{{ section.text.title }}</h1>
<h2>{{ section.text.sub_title }}</h2>
{% if section.text.date_end %}
<div class="datetime">{{ section.text.date.strftime("%d %B %Y") }} to {{ section.text.date_end.strftime("%d %B %Y") }}</div>
{% else %}
{% if section.text.date %}
<div class="datetime">{{ section.text.date.strftime("%d %B %Y") }}</div>{% endif %}
{% endif %}
</div>
</div>
{% endif %}
</section>
{% endif %} {% endif %}

12
prosopopee/themes/exposure/templates/sections/html.html
View File

@ -1,11 +1,11 @@
{% if section.background or section.color %} {% if section.background or section.color %}
<div class="bg-section" style="{% if section.background -%};background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}"> <div class="bg-section" style="{% if section.background %};background: {{ section.background }};{% endif %}{% if section.color %}color: {{ section.color }};{% endif %}">
{% endif %} {% endif %}
<section class="html"> <section class="html">
<center> <center>
{{ section.html }} {{ section.html }}
</center> </center>
</section> </section>
{% if section.background or section.color %} {% if section.background or section.color %}
</div> </div>
{% endif %} {% endif %}

2
prosopopee/themes/exposure/templates/sections/panorama.html
View File

@ -1,5 +1,5 @@
{% set image = Image(section.image) %} {% set image = Image(section.image) %}
{{ image.copy() }} {{ image.copy() }}
<section class="panorama"> <section class="panorama">
<img src="{{ image.generate_thumbnail("x800") }}"> <img src="{{ image.generate_thumbnail("x800") }}">
</section> </section>

20
prosopopee/themes/exposure/templates/sections/paragraph.html
View File

@ -1,18 +1,14 @@
{% if section.background or section.color %} {% if section.background or section.color %}
<div class="bg-section" style="{% if section.background -%}background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}"> <div class="bg-section" style="{% if section.background %}background: {{ section.background }};{% endif %}{% if section.color %}color: {{ section.color }};{% endif %}">
{% endif %} {% endif %}
<section class="paragraph">
<section class="paragraph">
{% if section.title %} {% if section.title %}
<h2>{{ section.title }}</h2> <h2>{{ section.title }}</h2>
{% else %} {% else %}
<div class="separator"></div> <div class="separator"></div>
{% endif %} {% endif %}
<p>{{ section.text }}</p> <p>{{ section.text }}</p>
</section> </section>
{% if section.background or section.color %}
{% if section.background or section.color %} </div>
</div>
{% endif %} {% endif %}

95
prosopopee/themes/exposure/templates/sections/pictures-group.html
View File

@ -1,59 +1,50 @@
{% if section.background %} {% if section.background %}
<div class="bg-section" style="background: {{ section.background }};"> <div class="bg-section" style="background: {{ section.background }};">
{% endif %} {% endif %}
<section class="pictures-group baguette">
<section class="pictures-group baguette"> {% for line in section.images %}
{% for line in section.images %}
<div class="pictures-line"> <div class="pictures-line">
{% for image in line %} {% for image in line %}
<div class="picture caption"> <div class="picture caption">
{% if image.type == "video" %} {% if image.type == "video" %}
{% set caption = image.text %} {% set caption = image.text %}
{% set video = Video(image) %} {% set video = Video(image) %}
{{ video.copy() }} {{ video.copy() }}
<img class="lazy" data-original="{{ video.generate_thumbnail("600") }}" src="" alt="">
<img class="lazy" data-original="{{ video.generate_thumbnail("600") }}" src="" alt=""> <video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted> <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm"> </video>
</video> {% if caption %}
{% if caption %} <div class="caption__overlay">
<div class="caption__overlay"> <h5 class="caption__overlay__title">{{ caption }}</h5>
<h5 class="caption__overlay__title">{{ caption }}</h5>
</div>
{% endif %}
{% else %}
{% set caption = image.text %}
{% set image = Image(image) %}
{{ image.copy() }}
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
data-at-450="{{ image.generate_thumbnail("x450") }}"
data-at-800="{{ image.generate_thumbnail("x800") }}"
data-at-1366="{{ image.generate_thumbnail("x1366") }}"
data-at-1920="{{ image.generate_thumbnail("x1920") }}"
>
<img class="lazy" src="" data-original="{{ image.generate_thumbnail("x600") }}" alt="">
{% if caption %}
<div class="caption__overlay">
<h5 class="caption__overlay__title">{{ caption }}</h5>
</div>
{% endif %}
</a>
{% endif %}
</div> </div>
{% if not loop.last %}
<div class="separator"></div>
{% endif %} {% endif %}
{% else %}
{% set caption = image.text %}
{% set image = Image(image) %}
{{ image.copy() }}
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
data-at-450="{{ image.generate_thumbnail("x450") }}"
data-at-800="{{ image.generate_thumbnail("x800") }}"
data-at-1366="{{ image.generate_thumbnail("x1366") }}"
data-at-1920="{{ image.generate_thumbnail("x1920") }}"
>
<img class="lazy" src="" data-original="{{ image.generate_thumbnail("x600") }}" alt="">
{% if caption %}
<div class="caption__overlay">
<h5 class="caption__overlay__title">{{ caption }}</h5>
</div>
{% endif %}
</a>
{% endif %}
</div>
{% if not loop.last %}
<div class="separator"></div>
{% endif %}
{% endfor %}
</div>
{% endfor %} {% endfor %}
</div> </section>
{% if section.background %}
{% endfor %} </div>
</section>
{% if section.background %}
</div>
{% endif %} {% endif %}

14
prosopopee/themes/exposure/templates/sections/text.html
View File

@ -1,11 +1,9 @@
{% if section.background or section.color %} {% if section.background or section.color %}
<div class="bg-section" style="{% if section.background -%}background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}"> <div class="bg-section" style="{% if section.background -%}background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
{% endif %} {% endif %}
<section class="text">
<section class="text">
{{ section.text }} {{ section.text }}
</section> </section>
{% if section.background or section.color %}
{% if section.background or section.color %} </div>
</div>
{% endif %} {% endif %}

16
prosopopee/themes/exposure/templates/share.html
View File

@ -1,18 +1,18 @@
{% set absolute_url = settings.url + "/" + link -%} {% set absolute_url = settings.url + "/" + link %}
<div class=share> <div class=share>
<h5>Share this story</h5> <h5>Share this story</h5>
<ul class="icon"> <ul class="icon">
<li> <li>
<a class="twitter" href="https://twitter.com/share?text={{ gallery.name }}&url={{absolute_url}}{%if gallery.tags %}&hashtags={% for tag in gallery.tags -%}{{ tag }}{% if not loop.lirst and not loop.last %},{% endif %}{% endfor -%}{% endif -%}" target="_blank">Twitter</a> <a class="twitter" href="https://twitter.com/share?text={{ gallery.name }}&url={{absolute_url}}{%if gallery.tags %}&hashtags={% for tag in gallery.tags %}{{ tag }}{% if not loop.lirst and not loop.last %},{% endif %}{% endfor %}{% endif %}" target="_blank">Twitter</a>
</li> </li>
<li> <li>
<a class="facebook" href="http://www.facebook.com/share.php?u={{absolute_url}}" target="_blank">Facebook</a> <a class="facebook" href="http://www.facebook.com/share.php?u={{absolute_url}}" target="_blank">Facebook</a>
</li> </li>
<li> <li>
<a class="pinterest" href="http://www.pinterest.com/pin/create/button/?url={{absolute_url}}" target="_blank">Pinterest</a> <a class="pinterest" href="http://www.pinterest.com/pin/create/button/?url={{absolute_url}}" target="_blank">Pinterest</a>
</li> </li>
<li> <li>
<a class="google" href="https://plus.google.com/share?url={{absolute_url}}" target="_blank">Google +</a> <a class="google" href="https://plus.google.com/share?url={{absolute_url}}" target="_blank">Google +</a>
</li> </li>
</ul> </ul>
</div> </div>

66
prosopopee/themes/light/templates/gallery-index.html
View File

@ -5,36 +5,46 @@
{% endif %} {% endif %}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8"> <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="{{ pathstatic }}/static/css/fonts.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="{{ pathstatic }}/static/css/fonts.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="{{ pathstatic }}/static/css/style-page.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="{{ pathstatic }}/static/css/style-page.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile--> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{{ gallery.title }} · {{ settings.title }}</title> {% if gallery.description %}
</head> <meta name="description" content="{{ gallery.description }}" />
{% endif %}
{% if gallery.lang %}
<meta name="language" content="{{ gallery.lang }}" />
{% endif %}
{% if settings.settings.og %}
{% include "opengraph.html" %}
{% endif %}
<body> <title>{{ gallery.title }} · {{ settings.title }}</title>
<div id="wrapper"> </head>
{% for section in gallery.sections %}
{% include "sections/" + section.type + ".html" %}
{% endfor %}
{% if settings.share %} <body>
{% include "share.html" %} <div id="wrapper">
{% endif %} {% for section in gallery.sections %}
{% include "sections/" + section.type + ".html" %}
{% endfor %}
<div class="back-to-home"> {% if settings.share %}
<hr> {% include "share.html" %}
<a href="../../"> {% endif %}
<div id="logo" src="./static/img/logo.svg">
HOME <div class="back-to-home">
</div> <hr>
</a> <a href="../../">
</div> <div id="logo" src="./static/img/logo.svg">
</div> HOME
{% include "footer.html" %} </div>
</body> </a>
</div>
</div>
{% include "footer.html" %}
</body>
</html> </html>

13
prosopopee/themes/light/templates/opengraph.html Normal file
View File

@ -0,0 +1,13 @@
<meta property="og:title" content="{{ gallery.title }}"/>
<meta property="og:image" content="{{ gallery.cover }}"/>
<meta property="og:site_name" content="{{ settings.title }}"/>
{% if gallery.description %}
<meta property="og:description" content="{{ gallery.description }}"/>
{% endif %}
<meta property="og:type" content="article"/>
<meta property="article:published_time" content="{{ gallery.date }}">
{% if gallery.tags %}
{% for tag in gallery.tags %}
<meta property="article:tag" content="{{ tag }}">
{% endfor %}
{% endif %}

194
prosopopee/themes/material/templates/gallery-index.html
View File

@ -1,128 +1,138 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="../static/css/materialize.css"/> <link rel="stylesheet" href="../static/css/materialize.css"/>
<link rel="stylesheet" href="../static/css/styles.css"> <link rel="stylesheet" href="../static/css/styles.css">
<link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="../static/css/panorama_viewer.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="../static/css/panorama_viewer.css" media="screen,projection"/>
{% if settings.share %} {% if settings.share %}
<link rel="stylesheet" href="../static/css/font-awesome.css"> <link rel="stylesheet" href="../static/css/font-awesome.css">
{% endif %} {% endif %}
<!--Let browser know website is optimized for mobile--> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{{ gallery.title }} · {{ settings.title }}</title> {% if gallery.description %}
</head> <meta name="description" content="{{ gallery.description }}" />
{% endif %}
{% if gallery.lang %}
<meta name="language" content="{{ gallery.lang }}" />
{% endif %}
{% if settings.settings.og %}
{% include "opengraph.html" %}
{% endif %}
<body> <title>{{ gallery.title }} · {{ settings.title }}</title>
<main> </head>
{% for section in gallery.sections %} <body>
{% include "sections/" + section.type + ".html" %} <main>
{% endfor %}
{% for section in gallery.sections %}
{% include "sections/" + section.type + ".html" %}
{% endfor %}
{% if settings.share %} {% if settings.share %}
{% include 'share.html' -%} {% include 'share.html' -%}
{% else -%} {% else -%}
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;"> <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a href="../" class="btn-floating btn-large red"> <a href="../" class="btn-floating btn-large red">
<i class="mdi-action-home"></i> <i class="mdi-action-home"></i>
</a> </a>
</div> </div>
{% endif %} {% endif %}
<script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script> <script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../static/js/materialize.min.js" charset="utf-8"></script> <script type="text/javascript" src="../static/js/materialize.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script> <script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script> <script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../static/js/jquery.lazyload.min.js" charset="utf-8"></script> <script type="text/javascript" src="../static/js/jquery.lazyload.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
$(document).ready(function(){ $(document).ready(function(){
$('.parallax').parallax(); $('.parallax').parallax();
}); });
var video = $("video.lazy"); var video = $("video.lazy");
video.on('click', function(e){ video.on('click', function(e){
var vid = video[0]; var vid = video[0];
vid.play(); vid.play();
if (vid.requestFullscreen) { if (vid.requestFullscreen) {
vid.requestFullscreen(); vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) { } else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen(); vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) { } else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen(); vid.webkitRequestFullscreen();
} }
}); });
$(function() { $(function() {
$("img.lazy").lazyload({ $("img.lazy").lazyload({
effect : "fadeIn" effect : "fadeIn"
}); });
$("video.lazy").lazyload({ $("video.lazy").lazyload({
effect : "fadeIn" effect : "fadeIn"
}); });
}); });
$(function() { $(function() {
baguetteBox.run(".baguette", {}); baguetteBox.run(".baguette", {});
$(".panorama").panorama_viewer({ $(".panorama").panorama_viewer({
repeat: true, repeat: true,
direction: "horizontal", direction: "horizontal",
animationTime: 150, animationTime: 150,
easing: "linear", easing: "linear",
overlay: true overlay: true
}); });
}); });
{% if settings.settings.light_mode %} {% if settings.settings.light_mode %}
var slowLoad = window.setTimeout( function() { var slowLoad = window.setTimeout( function() {
var html_node = document.getElementsByTagName('html')[0]; var html_node = document.getElementsByTagName('html')[0];
var div = document.createElement('div'); var div = document.createElement('div');
div.setAttribute('id', 'slow-notice'); div.setAttribute('id', 'slow-notice');
var t1 = document.createTextNode("The website is taking a long time to load."); var t1 = document.createTextNode("The website is taking a long time to load.");
var br = document.createElement('br'); var br = document.createElement('br');
var t2 = document.createTextNode("You can switch to the "); var t2 = document.createTextNode("You can switch to the ");
var a = document.createElement('a'); var a = document.createElement('a');
a.setAttribute('href', './light'); a.setAttribute('href', './light');
a.innerHTML = 'Light Weight Site'; a.innerHTML = 'Light Weight Site';
var dismiss = document.createElement('span'); var dismiss = document.createElement('span');
dismiss.innerHTML = '[x] dismiss'; dismiss.innerHTML = '[x] dismiss';
dismiss.setAttribute('class', 'dismiss'); dismiss.setAttribute('class', 'dismiss');
dismiss.onclick = function() { dismiss.onclick = function() {
html_node.removeChild(div); html_node.removeChild(div);
} }
var dismiss_container = document.createElement('div'); var dismiss_container = document.createElement('div');
dismiss_container.appendChild(dismiss); dismiss_container.appendChild(dismiss);
dismiss_container.setAttribute('class', 'dismiss-container'); dismiss_container.setAttribute('class', 'dismiss-container');
div.appendChild(t1); div.appendChild(t1);
div.appendChild(br); div.appendChild(br);
div.appendChild(t2); div.appendChild(t2);
div.appendChild(a); div.appendChild(a);
div.appendChild(dismiss_container); div.appendChild(dismiss_container);
html_node.appendChild(div); html_node.appendChild(div);
}, 1000 ); }, 1000 );
window.addEventListener( 'load', function() { window.addEventListener( 'load', function() {
try { try {
window.clearTimeout( slowLoad ); window.clearTimeout( slowLoad );
html_node.removeChild(div); html_node.removeChild(div);
} catch (e){ } catch (e){
// that's okay. // that's okay.
} }
}); });
{% endif %} {% endif %}
$(".button-collapse").sideNav(); $(".button-collapse").sideNav();
</script> </script>
</main> </main>
{% include 'footer.html'%} {% include 'footer.html'%}
</body> </body>
</html> </html>

13
prosopopee/themes/material/templates/opengraph.html Normal file
View File

@ -0,0 +1,13 @@
<meta property="og:title" content="{{ gallery.title }}"/>
<meta property="og:image" content="{{ gallery.cover }}"/>
<meta property="og:site_name" content="{{ settings.title }}"/>
{% if gallery.description %}
<meta property="og:description" content="{{ gallery.description }}"/>
{% endif %}
<meta property="og:type" content="article"/>
<meta property="article:published_time" content="{{ gallery.date }}">
{% if gallery.tags %}
{% for tag in gallery.tags %}
<meta property="article:tag" content="{{ tag }}">
{% endfor %}
{% endif %}