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

Merge pull request #39 from abeudin/master

Browse Source 
Add range of date in full picture and some fix
This commit is contained in:
Laurent Peuch 2016-04-06 01:05:33 +02:00
commit 56c465e982
13 changed files with 234 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG.md
View File

@ -1,6 +1,14 @@
CHANGELOG CHANGELOG
========= =========
0.3 (unreleased)
----------------
* caption support on bordered picture and pictures group https://github.com/Psycojoker/prosopopee#images-caption by beudbeud
* configure licence https://github.com/Psycojoker/prosopopee#licence in footer by beudbeud
* possibility to use a range for the full picture date https://github.com/Psycojoker/prosopopee#full-screen-picture-with-or-without-text-on-it by beudbeud
* Update material theme by beudbeud
0.2 (2016-02-23) 0.2 (2016-02-23)
---------------- ----------------

43
README.md
View File

@ -132,6 +132,17 @@ settings:
theme: material theme: material
``` ```
##### Licence
By default Prosopopée use CC-BY-SA for all the content, if you want use a another licence
you need add key in **root** settings.yaml. For example:
```yaml
licence:
name: WTFPL
url: "http://www.wtfpl.net/txt/copying/"
```
### Gallery settings.yaml ### Gallery settings.yaml
This settings.yaml will describe: This settings.yaml will describe:
@ -211,7 +222,6 @@ image:
auto-orient: False auto-orient: False
``` ```
### Different kind of sections ### Different kind of sections
A gallery is composed of a succession of sections as you can see on this [wonderfully A gallery is composed of a succession of sections as you can see on this [wonderfully
@ -250,6 +260,7 @@ With text:
title: Big picture title title: Big picture title
sub_title: Some text sub_title: Some text
date: 2016-01-15 date: 2016-01-15
date_end: 2016-01-24 (Optional)
``` ```
Without text: Without text:
@ -344,6 +355,36 @@ How to use it:
image: 7.jpg image: 7.jpg
``` ```
### Images caption
Prosopopée has a support of caption in images, you can use it on bordered-picture and pictures-group.
Exemple on bordered-picture :
```yaml
- type: bordered-picture
image: another_picture.jpg
text: This is a caption
```
And on pictures-group
```yaml
- type: pictures-group
images:
-
- name: image1.jpg
text: This is a caption
- image2.jpg
- image3.jpg
-
- image4.jpg
- image5.jpg
```
### Example ### Example
As a recap, here is how the files of the example gallery are organised: As a recap, here is how the files of the example gallery are organised:

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

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
{% block css %} {% block css %}
{% endblock %} {% endblock %}
@ -8,9 +8,9 @@
<!--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"> <div class="gallery-header">
{% block logo %} {% block logo %}
@ -27,8 +27,7 @@
{% block content %} {% block content %}
{% endblock %} {% endblock %}
<footer> {% include 'footer.html' %}
<p>Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</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> </body>
</body>
</html> </html>

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

@ -0,0 +1,11 @@
{% if settings.licence is not defined %}
{% 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 -%}
{% 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>

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

@ -20,7 +20,7 @@
<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> </div>
</a> </a>
{% set cover = Image(gallery.cover) %} {% set cover = Image(gallery.cover) %}

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

@ -6,7 +6,12 @@
<div class="picture-text-column"> <div class="picture-text-column">
<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 %}<div class="datetime">{{ section.text.date.strftime("%d %B %Y") }}</div>{% endif %} {% 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>
</div> </div>
{% endif %} {% endif %}

48
prosopopee/themes/material/static/css/styles.css
View File

@ -61,10 +61,6 @@ main {
transform: translateY(0); transform: translateY(0);
} }
.bordered-picture .caption__overlay {
margin-left: 11.5%;
margin-right: 11.5%;
}
.caption .card-panel { .caption .card-panel {
margin: 0; margin: 0;
@ -72,3 +68,47 @@ main {
text-align: center; text-align: center;
} }
.bordered-picture img {
height: 77%;
width: 77%;
margin-left: 11.5%;
margin-right: 11.5%;
}
.bordered-picture .caption__overlay {
margin-left: 11.5%;
margin-right: 11.5%;
}
.pictures-line {
min-width: 77%;
width: 77%;
margin-left: 11.5%;
margin-right: 11.5%;
display: flex;
margin-bottom: 0.5em;
}
.pictures-line .picture img {
width: 100%;
height: 100%;
}
.small-card {
height: 400px;
}
.chip .tag {
position: absolute;
left: -3px;
font-size: 22px;
line-height: 34px;
}
.image {
position: relative;
}
.card-action .right {
margin-top: -5px;
}

10
prosopopee/themes/material/templates/footer.html
View File

@ -1,7 +1,15 @@
{% if settings.licence is not defined %}
{% 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 -%}
{% endif %}
<footer class="page-footer blue-grey darken-1"> <footer class="page-footer blue-grey darken-1">
<div class="footer-copyright blue-grey darken-2"> <div class="footer-copyright blue-grey darken-2">
<div class="container center"> <div class="container center">
Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</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> Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="{{ licence_url }}">{{ licence_name }}</a>
</div> </div>
</div> </div>
</footer> </footer>

44
prosopopee/themes/material/templates/index.html
View File

@ -9,15 +9,14 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
{% 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 }}">
{% for gallery in galleries_line|reverse %} {% for gallery in galleries_line|reverse %}
{% if loop.length is divisibleby 2 %} {% if loop.length is divisibleby 2 %}
<div class="col m6 l6"> <div class="col s12 m12 l6">
{% else %} {% else %}
{% if loop.last %} {% if loop.last %}
<div class="col m12 l12"> <div class="col s12 m12 l12">
{% else %} {% else %}
<div class="col m6 l6"> <div class="col s12 m12 l6">
{% endif %} {% endif %}
{% endif %} {% endif %}
<a href="{{ gallery.link }}"> <a href="{{ gallery.link }}">
@ -25,16 +24,38 @@
<div class="card-image"> <div class="card-image">
{% set cover = Image(gallery.cover) %} {% set cover = Image(gallery.cover) %}
{{ cover.copy() }} {{ cover.copy() }}
<img class="responsive-img" src="{{ cover.generate_thumbnail("x800") }}"> <img class="responsive-img hide-on-large-only" src="{{ cover.generate_thumbnail("x900") }}">
<span class="card-title truncate">{{ gallery.title }}</span> <img class="small-card hide-on-med-and-down" src="{{ cover.generate_thumbnail("x900") }}">
</div> <span class="card-title truncate">{{ gallery.title }}
<div class="card-content"> {% if gallery.sub_title %} : {{ gallery.sub_title }}{% endif %}
<span class="card-title truncate">{% if gallery.sub_title %}{{ gallery.sub_title }}{% endif %}</span> </span>
{% if gallery.tags %}{% for tag in gallery.tags -%}<div class="chip right"><i class="mdi-action-label"></i> {{ tag }} </div>{% endfor -%}{% endif %}
</div> </div>
<div class="card-action"> <div class="card-action">
<div class="left">
<a href="{{ gallery.link }}">Read more..</a> <a href="{{ gallery.link }}">Read more..</a>
{% if gallery.date %}<div class="right">{{ gallery.date.strftime("%d %B %Y") }}</div>{% endif %} </div>
{% if gallery.tags or gallery.date %}
<div class="right">
{% if gallery.tags %}{% for tag in gallery.tags -%}
<div class="chip">
<div class="image">
<img class="grey">
<div class="tag white-text">
{{ tag[0].capitalize() }}
</div>
</img>
{{ tag }}
</div>
</div>
{% endfor -%}
{% endif %}
{% if gallery.date %}
<div class="chip">
{{ gallery.date.strftime("%d %B %Y") }}
</div>
{% endif %}
</div>
{% endif %}
</div> </div>
</div> </div>
</a> </a>
@ -43,7 +64,6 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </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>
<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>

10
prosopopee/themes/material/templates/sections/bordered-picture.html
View File

@ -1,8 +1,8 @@
<div class="container baguette caption"> {% set image = Image(section.image) %}
{% set image = Image(section.image) %} {% set caption = section.text %}
{% set caption = section.text %} {{ image.copy()}}
{{ image.copy()}} <div class="bordered-picture baguette caption">
<a href="{{ image }} {% if caption %}data-caption="{{ caption }}"{% endif %}> <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
<img class="responsive-img" src="{{ image.generate_thumbnail("x2000") }}"> <img class="responsive-img" src="{{ image.generate_thumbnail("x2000") }}">
{% if caption %} {% if caption %}
<div class="caption__overlay card-panel center"> <div class="caption__overlay card-panel center">

7
prosopopee/themes/material/templates/sections/full-picture.html
View File

@ -6,7 +6,12 @@
<div class="parallax-tittle white-text"> <div class="parallax-tittle white-text">
<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 %}<div class="datetime">{{ section.text.date.strftime("%d %B %Y") }}</div>{% endif %} {% 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 %} {% endif %}
</div> </div>

20
prosopopee/themes/material/templates/sections/pictures-group.html
View File

@ -1,29 +1,27 @@
<div class="container"> <div class="pictures-group baguette">
<div class="row baguette"> <div class="row">
{% for line in section.images %} {% for line in section.images %}
<div class="pictures-line">
{% for image in line %} {% for image in line %}
{% set caption = image.text %} {% set caption = image.text %}
{% set image = Image(image) %} {% set image = Image(image) %}
{{ image.copy() }} {{ image.copy() }}
{% set plop = 12 // loop.length %} <div class="col">
<div class="col m{{ plop }} l{{ plop }}">
<div class="card"> <div class="card">
<div class="card-image caption"> <div class="picture card-image caption">
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}> <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
<img class="responsive-img" src="{{ image.generate_thumbnail("x600") }}"> <img src="{{ image.generate_thumbnail("x600") }}">
{% if caption %} {% if caption %}
<div class="caption__overlay card-panel center"> <div class="caption__overlay center">
<h5 class="black-white">{{ caption }}</h5> <h5 class="caption__overlay__title">{{ caption }}</h5>
</div> </div>
{% endif %} {% endif %}
</a> </a>
</div> </div>
</div> </div>
</div> </div>
{% if not loop.last %}
<div class="separator"></div>
{% endif %}
{% endfor %} {% endfor %}
</div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>