From 59d5ce18eb40871f5c2c1fc791684dadd0cd7798 Mon Sep 17 00:00:00 2001
From: Richard Thier <u9vata@gmail.com>
Date: Fri, 6 Mar 2020 17:09:40 +0100
Subject: [PATCH] Implemented much of polaroid-group galleries now. By default
 they are centered, image height maxes out at 85% so text should be visible
 practically always; "h" and "w" can be added for height and width (accept
 everything that CSS accepts) and if x, y is provided we use
 position:absolute. There is margin_bottom if all elements are absolute by
 your choice but I prefer making one centered and default (just chaning its
 wdth and height using "w" and "h", and others defined as absolute around it.
 This way the single centered element makes the width of the whole group. I
 just wanted to note somewhere this trick.

---
 prosopopee/themes/exposure/static/css/style.css           | 4 +++-
 .../exposure/templates/sections/polaroid-group.html       | 8 +++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/prosopopee/themes/exposure/static/css/style.css b/prosopopee/themes/exposure/static/css/style.css
index f7b9992..c758378 100644
--- a/prosopopee/themes/exposure/static/css/style.css
+++ b/prosopopee/themes/exposure/static/css/style.css
@@ -556,6 +556,7 @@ nav ul ul ul li {
 .polaroid-line {
     width: 70vw;
     margin: auto;
+    position: relative; /* Needed when cust_pos becomes active and children are absolute positioned for this one */
 }
 
 a.polaroid {
@@ -577,6 +578,7 @@ a.polaroid {
     -o-transition: width 1s, height 1s,-o-transform 1s;
     text-align: center;
     overflow: hidden; /*Bullet-proofing*/
+    margin: auto;
 }
 
 /* Remove rotation and make it visible (z-index) */
@@ -600,7 +602,7 @@ a.polaroid img {
         display: block;
         min-width: 10vw;
         max-width: 100%;
-        max-height: 100%;
+        max-height: 85%; /* Never hide the text this way! */
         margin: auto; /* Centers wth display: block */
 }
 
diff --git a/prosopopee/themes/exposure/templates/sections/polaroid-group.html b/prosopopee/themes/exposure/templates/sections/polaroid-group.html
index a98a647..a19ac9f 100644
--- a/prosopopee/themes/exposure/templates/sections/polaroid-group.html
+++ b/prosopopee/themes/exposure/templates/sections/polaroid-group.html
@@ -36,10 +36,8 @@
             {% set z = loop.index %}
         {% endif %}
 
-        {% if image.w %}
-            {% set w = image.w %}
-        {% else %}
-        {% endif %}
+        {% set w = image.w %}
+        {% set h = image.h %}
 
         {% set image = Image(image) %}
         {{ image.copy() }}
@@ -50,7 +48,7 @@
             data-at-1366="{{ image.generate_thumbnail("x1366") }}"
             data-at-1920="{{ image.generate_thumbnail("x1920") }}"
             class="polaroid"
-            style="{% if custpos %}position:absolute;{% endif %}left: {{ x }}; top: {{ y }}; z-index: {{ z }}; -webkit-transform: rotate({{ angle }}deg); -moz-transform: rotate({{ angle }}deg); transform: rotate({{ angle }}deg);">
+            style="{% if w %}width:{{ w }};{% endif %}{% if h %}height: {{ h }};{% endif %}{% if custpos %}position:absolute;{% endif %}left: {{ x }}; top: {{ y }}; z-index: {{ z }}; -webkit-transform: rotate({{ angle }}deg); -moz-transform: rotate({{ angle }}deg); transform: rotate({{ angle }}deg);">
                 {% if caption %}
                 <img class="lazy" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt="{{ caption }}">
                 <h5 class="polaroid__title">{{ caption }}</h5>