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
=========
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)
----------------

43
README.md
View File

@ -132,6 +132,17 @@ settings:
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
This settings.yaml will describe:
@ -211,7 +222,6 @@ image:
auto-orient: False
```
### Different kind of sections
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
sub_title: Some text
date: 2016-01-15
date_end: 2016-01-24 (Optional)
```
Without text:
@ -344,6 +355,36 @@ How to use it:
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
As a recap, here is how the files of the example gallery are organised:

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

@ -1,34 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
{% block css %}
{% endblock %}
<head>
<meta charset="UTF-8">
{% block css %}
{% endblock %}
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{{ settings.title }}</title>
</head>
<!--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>
<body>
<div class="gallery-header">
{% block logo %}
{% endblock %}
<h1>{{ settings.title }}</h1>
{% if settings.sub_title -%}<h4>{{ settings.sub_title }}</h4>{% endif -%}
<hr>
{% if settings.menu -%}
{% include 'menu.html' %}
{% endif -%}
</div>
<div class="gallery-header">
{% block logo %}
{% endblock %}
<h1>{{ settings.title }}</h1>
{% if settings.sub_title -%}<h4>{{ settings.sub_title }}</h4>{% endif -%}
<hr>
{% if settings.menu -%}
{% include 'menu.html' %}
{% endif -%}
</div>
{% block content %}
{% endblock %}
{% block content %}
{% endblock %}
<footer>
<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>
{% include 'footer.html' %}
</body>
</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>
{% 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 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>
{% set cover = Image(gallery.cover) %}

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

@ -2,12 +2,17 @@
{{ image.copy() }}
<section class="full-picture" style="background: transparent url('{{ image }}') no-repeat scroll center top / cover;">
{% 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 %}<div class="datetime">{{ section.text.date.strftime("%d %B %Y") }}</div>{% endif %}
</div>
<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>

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

@ -61,14 +61,54 @@ main {
transform: translateY(0);
}
.bordered-picture .caption__overlay {
margin-left: 11.5%;
margin-right: 11.5%;
}
.caption .card-panel {
margin: 0;
padding: 1px;
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">
<div class="footer-copyright blue-grey darken-2">
<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>
</footer>

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

@ -23,7 +23,7 @@
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a href="../" class="btn-floating btn-large red">
<i class="mdi-action-home"></i>
<i class="mdi-action-home"></i>
</a>
</div>

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

@ -9,40 +9,60 @@
<div class="container">
<div class="row">
{% for galleries_line in galleries|reverse|batch(3)|reverse %}
<div class="galleries-line covers-{{ galleries_line|length }}">
{% for gallery in galleries_line|reverse %}
{% if loop.length is divisibleby 2 %}
<div class="col m6 l6">
{% for gallery in galleries_line|reverse %}
{% if loop.length is divisibleby 2 %}
<div class="col s12 m12 l6">
{% else %}
{% if loop.last %}
<div class="col m12 l12">
{% else %}
<div class="col m6 l6">
{% endif %}
{% endif %}
<a href="{{ gallery.link }}">
<div class="card hoverable blue-grey lighten-5">
<div class="card-image">
{% set cover = Image(gallery.cover) %}
{{ cover.copy() }}
<img class="responsive-img" src="{{ cover.generate_thumbnail("x800") }}">
<span class="card-title truncate">{{ gallery.title }}</span>
</div>
<div class="card-content">
<span class="card-title truncate">{% if gallery.sub_title %}{{ gallery.sub_title }}{% endif %}</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 class="card-action">
<a href="{{ gallery.link }}">Read more..</a>
{% if gallery.date %}<div class="right">{{ gallery.date.strftime("%d %B %Y") }}</div>{% endif %}
</div>
<div class="col s12 m12 l12">
{% else %}
<div class="col s12 m12 l6">
{% endif %}
{% endif %}
<a href="{{ gallery.link }}">
<div class="card hoverable blue-grey lighten-5">
<div class="card-image">
{% set cover = Image(gallery.cover) %}
{{ cover.copy() }}
<img class="responsive-img hide-on-large-only" src="{{ cover.generate_thumbnail("x900") }}">
<img class="small-card hide-on-med-and-down" src="{{ cover.generate_thumbnail("x900") }}">
<span class="card-title truncate">{{ gallery.title }}
{% if gallery.sub_title %} : {{ gallery.sub_title }}{% endif %}
</span>
</div>
<div class="card-action">
<div class="left">
<a href="{{ gallery.link }}">Read more..</a>
</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>
</a>
</div>
</a>
{% endfor %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
<script type="text/javascript" src="static/js/jquery-2.1.4.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 caption = section.text %}
{{ image.copy()}}
<a href="{{ image }} {% if caption %}data-caption="{{ caption }}"{% endif %}>
{% set image = Image(section.image) %}
{% set caption = section.text %}
{{ image.copy()}}
<div class="bordered-picture baguette caption">
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
<img class="responsive-img" src="{{ image.generate_thumbnail("x2000") }}">
{% if caption %}
<div class="caption__overlay card-panel center">

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

@ -4,9 +4,14 @@
<div class="parallax"><img src="{{ image }}"></div>
{% if section.text %}
<div class="parallax-tittle white-text">
<h1>{{ section.text.title }}</h1>
<h2>{{ section.text.sub_title }}</h2>
{% if section.text.date %}<div class="datetime">{{ section.text.date.strftime("%d %B %Y") }}</div>{% endif %}
<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>
{% endif %}
</div>

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

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