From 31b0da1a2e2af15c6722c0d04afba9c26342dfde Mon Sep 17 00:00:00 2001 From: Adrien Beudin Date: Fri, 1 Apr 2016 19:40:28 +0200 Subject: [PATCH] fix some stuff on material theme --- README.md | 32 +++++++- .../themes/exposure/templates/index.html | 2 +- .../themes/material/static/css/styles.css | 41 +++++++++- .../material/templates/gallery-index.html | 2 +- .../themes/material/templates/index.html | 78 ++++++++++++------- .../templates/sections/pictures-group.html | 42 +++++----- 6 files changed, 139 insertions(+), 58 deletions(-) diff --git a/README.md b/README.md index 4f40c00..dc15b46 100644 --- a/README.md +++ b/README.md @@ -211,7 +211,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 +249,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 +344,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: diff --git a/prosopopee/themes/exposure/templates/index.html b/prosopopee/themes/exposure/templates/index.html index 70f0ec7..7aee826 100644 --- a/prosopopee/themes/exposure/templates/index.html +++ b/prosopopee/themes/exposure/templates/index.html @@ -20,7 +20,7 @@

{{ gallery.title }}

{% if gallery.sub_title %}

{{ gallery.sub_title }}

{% endif %} {% if settings.show_date and gallery.date %}
{{ gallery.date.strftime("%d %B %Y") }}
{% endif %} - {% if gallery.tags %}
IN {% for tag in gallery.tags -%} {{ tag }} {% endfor -%}
{% endif %} + {% if gallery.tags %}
IN {% for tag in gallery.tags -%} {{ tag }} {% endfor -%}
{% endif %} {% set cover = Image(gallery.cover) %} diff --git a/prosopopee/themes/material/static/css/styles.css b/prosopopee/themes/material/static/css/styles.css index c2bf495..4cec8a8 100644 --- a/prosopopee/themes/material/static/css/styles.css +++ b/prosopopee/themes/material/static/css/styles.css @@ -61,10 +61,6 @@ main { transform: translateY(0); } -.bordered-picture .caption__overlay { - margin-left: 11.5% !important; - margin-right: 11.5% !important; -} .caption .card-panel { margin: 0; @@ -79,3 +75,40 @@ main { 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; +} diff --git a/prosopopee/themes/material/templates/gallery-index.html b/prosopopee/themes/material/templates/gallery-index.html index 6af5a77..70784f5 100644 --- a/prosopopee/themes/material/templates/gallery-index.html +++ b/prosopopee/themes/material/templates/gallery-index.html @@ -23,7 +23,7 @@
- +
diff --git a/prosopopee/themes/material/templates/index.html b/prosopopee/themes/material/templates/index.html index b34d361..b0f665e 100644 --- a/prosopopee/themes/material/templates/index.html +++ b/prosopopee/themes/material/templates/index.html @@ -9,40 +9,60 @@
{% for galleries_line in galleries|reverse|batch(3)|reverse %} -
- {% for gallery in galleries_line|reverse %} - {% if loop.length is divisibleby 2 %} -
+ {% for gallery in galleries_line|reverse %} + {% if loop.length is divisibleby 2 %} +
{% else %} {% if loop.last %} -
- {% else %} -
- {% endif %} - {% endif %} - -
-
- {% set cover = Image(gallery.cover) %} - {{ cover.copy() }} - - {{ gallery.title }} -
-
- {% if gallery.sub_title %}{{ gallery.sub_title }}{% endif %} - {% if gallery.tags %}{% for tag in gallery.tags -%}
{{ tag }}
{% endfor -%}{% endif %} -
-
- Read more.. - {% if gallery.date %}
{{ gallery.date.strftime("%d %B %Y") }}
{% endif %} -
+
+ {% else %} +
+ {% endif %} + {% endif %} + +
+
+ {% set cover = Image(gallery.cover) %} + {{ cover.copy() }} + + + {{ gallery.title }} + {% if gallery.sub_title %} : {{ gallery.sub_title }}{% endif %} + +
+
+
+ Read more.. +
+ {% if gallery.tags or gallery.date %} +
+ {% if gallery.tags %}{% for tag in gallery.tags -%} +
+
+ +
+ {{ tag[0].capitalize() }} +
+ + {{ tag }} +
+
+ {% endfor -%} + {% endif %} + {% if gallery.date %} +
+ {{ gallery.date.strftime("%d %B %Y") }} +
+ {% endif %} +
+ {% endif %} +
+
+
- + {% endfor %}
{% endfor %} -
- {% endfor %} -
diff --git a/prosopopee/themes/material/templates/sections/pictures-group.html b/prosopopee/themes/material/templates/sections/pictures-group.html index e515099..d912ab1 100644 --- a/prosopopee/themes/material/templates/sections/pictures-group.html +++ b/prosopopee/themes/material/templates/sections/pictures-group.html @@ -1,29 +1,27 @@ -
-
+
+
{% for line in section.images %} - {% for image in line %} - {% set caption = image.text %} - {% set image = Image(image) %} - {{ image.copy() }} - {% set plop = 12 // loop.length %} -
-
-
- - - {% if caption %} -
-
{{ caption }}
-
- {% endif %} - +
+ {% for image in line %} + {% set caption = image.text %} + {% set image = Image(image) %} + {{ image.copy() }} +
+
+
+ + + {% if caption %} +
+
{{ caption }}
+
+ {% endif %} + +
+ {% endfor %}
- {% if not loop.last %} -
- {% endif %} - {% endfor %} {% endfor %}