add support of Open Graph

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

View File

@ -4,32 +4,26 @@
<meta charset="UTF-8">
{% block css %}
{% endblock %}
{% if settings.rss -%}
{% if settings.rss %}
<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-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{{ settings.title }}</title>
</head>
<body>
<div class="gallery-header">
{% block logo %}
{% endblock %}
<h1>{{ settings.title }}</h1>
{% if settings.sub_title -%}<h4>{{ settings.sub_title }}</h4>{% endif -%}
{% if settings.sub_title %}<h4>{{ settings.sub_title }}</h4>{% endif %}
<hr>
{% if settings.menu -%}
{% if settings.menu %}
{% include 'menu.html' %}
{% endif -%}
</div>
{% block content %}
{% endblock %}
{% include 'footer.html' %}
</body>
</html>

View File

@ -1,14 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="../static/css/style.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</head>
<body>
<body>
<div class="gallery-header">
<img id="logo" src="../static/img/logo.svg" />
@ -70,5 +70,5 @@
<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>
</footer>
</body>
</body>
</html>

View File

@ -1,11 +1,10 @@
{% if settings.licence is not defined %}
{% set licence_url = 'https://creativecommons.org/licenses/by-sa/3.0/' -%}
{% set licence_name = 'CC-BY-SA' -%}
{% set licence_url = 'https://creativecommons.org/licenses/by-sa/3.0/' %}
{% set licence_name = 'CC-BY-SA' %}
{% else %}
{% set licence_url = settings.licence.url -%}
{% set licence_name = settings.licence.name -%}
{% set licence_url = settings.licence.url %}
{% set licence_name = settings.licence.name %}
{% endif %}
<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>
</footer>

View File

@ -7,7 +7,6 @@
<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/panorama_viewer.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
{% if gallery.description %}
@ -16,18 +15,18 @@
{% if gallery.lang %}
<meta name="language" content="{{ gallery.lang }}" />
{% endif %}
{% if settings.settings.og %}
{% include "opengraph.html" %}
{% endif %}
<title>{{ gallery.title }} · {{ settings.title }}</title>
</head>
<body>
{% for section in gallery.sections %}
{% include "sections/" + section.type + ".html" %}
{% endfor %}
{% if settings.share %}
{% include "share.html" %}
{% endif %}
<div class="back-to-home">
<hr>
<a href="../">
@ -36,7 +35,6 @@
</div>
</a>
</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/baguetteBox.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script>
@ -123,10 +121,7 @@ window.addEventListener( 'load', function() {
});
{% endif %}
</script>
{% include "footer.html" %}
</body>
</html>

View File

@ -1,27 +1,27 @@
{% extends "base.html" %}
{% 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/style.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"/>
{% endblock %}
{% block logo %}
{% if sub_index %}
<div class="back-to-home">
{% if sub_index %}
<div class="back-to-home">
<hr>
<a href="../">
<div id="logo" src="static/img/logo.svg">
Back
</div>
</a>
</div>
{% else %}
<img id="logo" src="static/img/logo.svg"/>
{% endif %}
</div>
{% else %}
<img id="logo" src="static/img/logo.svg"/>
{% endif %}
{% endblock %}
{% block content %}
<div class="galleries-grid">
<div class="galleries-grid">
{% for galleries_line in galleries|reverse|batch(3)|reverse %}
<div class="galleries-line covers-{{ galleries_line|length }}">
{% for gallery in galleries_line|reverse %}<!-- comment tricks against space between inline-block
@ -52,6 +52,6 @@
-->{% endfor %}
</div>
{% endfor %}
</div>
<p style="visibility: hidden">.</p>
</div>
<p style="visibility: hidden">.</p>
{% endblock %}

View File

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

View File

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

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 %}

View File

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="../static/css/style-page.css" media="screen,projection"/>
@ -8,9 +8,9 @@
<!--Let browser know website is optimized for mobile-->
<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;">
<div class="picture-text">
<div class="picture-text-column">
@ -94,10 +94,10 @@
<script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
baguetteBox.run(".baguette", {});
baguetteBox.run(".baguette", {});
</script>
<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>
</footer>
</body>
</body>
</html>

View File

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

View File

@ -1,8 +1,7 @@
{% if section.background %}
<div class="bg-section" style="background: {{ section.background }};">
{% endif %}
{% if section.image.type == "video" %}
<div class="bg-section" style="background: {{ section.background }};">
{% endif %}
{% if section.image.type == "video" %}
{% set video = Video(section.image) %}
{% set caption = section.text %}
{{ video.copy() }}
@ -19,7 +18,7 @@
{% endif %}
</div>
</section>
{% else %}
{% else %}
{% set image = Image(section.image) %}
{% set caption = section.text %}
{{ image.copy() }}
@ -32,11 +31,11 @@
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="">
<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">
@ -46,8 +45,7 @@
</a>
</div>
</section>
{% endif %}
{% if section.background %}
</div>
{% endif %}
{% if section.background %}
</div>
{% endif %}

View File

@ -1,8 +1,7 @@
{% if section.image.type == "video" %}
{% set video = Video(section.image) %}
{{ video.copy() }}
<section class="full-picture">
{% set video = Video(section.image) %}
{{ video.copy() }}
<section class="full-picture">
<div class="video-container">
{% if section.text %}
<div class="title-container">
@ -18,22 +17,16 @@
</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>
</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;">
{% 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">
@ -48,6 +41,5 @@
</div>
</div>
{% endif %}
</section>
</section>
{% endif %}

View File

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

View File

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

View File

@ -1,9 +1,8 @@
{% if section.background %}
<div class="bg-section" style="background: {{ section.background }};">
{% endif %}
<section class="pictures-group baguette">
{% for line in section.images %}
<div class="bg-section" style="background: {{ section.background }};">
{% endif %}
<section class="pictures-group baguette">
{% for line in section.images %}
<div class="pictures-line">
{% for image in line %}
<div class="picture caption">
@ -11,7 +10,6 @@
{% set caption = image.text %}
{% set video = Video(image) %}
{{ video.copy() }}
<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>
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
@ -21,7 +19,6 @@
<h5 class="caption__overlay__title">{{ caption }}</h5>
</div>
{% endif %}
{% else %}
{% set caption = image.text %}
{% set image = Image(image) %}
@ -39,21 +36,15 @@
</div>
{% endif %}
</a>
{% endif %}
</div>
{% if not loop.last %}
<div class="separator"></div>
{% endif %}
{% endfor %}
</div>
{% endfor %}
</section>
{% if section.background %}
</div>
{% endfor %}
</section>
{% if section.background %}
</div>
{% endif %}

View File

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

View File

@ -1,9 +1,9 @@
{% set absolute_url = settings.url + "/" + link -%}
{% set absolute_url = settings.url + "/" + link %}
<div class=share>
<h5>Share this story</h5>
<ul class="icon">
<h5>Share this story</h5>
<ul class="icon">
<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>
<a class="facebook" href="http://www.facebook.com/share.php?u={{absolute_url}}" target="_blank">Facebook</a>
@ -14,5 +14,5 @@
<li>
<a class="google" href="https://plus.google.com/share?url={{absolute_url}}" target="_blank">Google +</a>
</li>
</ul>
</ul>
</div>

View File

@ -13,6 +13,16 @@
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
{% if gallery.description %}
<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 %}
<title>{{ gallery.title }} · {{ settings.title }}</title>
</head>

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 %}

View File

@ -13,6 +13,16 @@
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
{% if gallery.description %}
<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 %}
<title>{{ gallery.title }} · {{ settings.title }}</title>
</head>

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 %}