First working version. Without further parameters it uses big polaroid images. Parameters not tested; TODO: likely sizing should be made mandatory when positioning and we should add min-height or height of the link based on the image and text sizes calculated in python jinja2 code.

prosopopee/themes/exposure/static/css/style.css

@@ -553,13 +553,17 @@ nav ul ul ul li {
 /* END: navmenu */
 
 /* START: polaroid-group */
+.polaroid-line {
+    width: 70vw;
+    margin: auto;
+}
+
 a.polaroid {
     display: block;
     padding: 10px 10px 25px 10px;
     border: 2px solid #BFBFBF;
-    /*background-color: white;*/
+    background-color: white;
     z-index: 2;
-    font-size: 0.7em;
     /* Shadows around the box */
     -webkit-box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
     -moz-box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
@@ -571,23 +575,32 @@ a.polaroid {
     -ms-transition: width 1s, height 1s, -ms-transform 1s;
     -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
     -o-transition: width 1s, height 1s,-o-transform 1s;
-
+    text-align: center;
 }
 
 /* Remove rotation and make it visible (z-index) */
 a.polaroid:hover,
 a.polaroid:focus,
 a.polaroid:active {
-        z-index: 100;
+		z-index: 100 !important;
-        -webkit-transform: rotate(0deg);
+		border-color: #BFBFBF;
-        -moz-transform: rotate(0deg);
+		-webkit-box-shadow: 5px 5px 6px rgba(149,150,151,0.3); /* Same as above */
-        -ms-transform: rotate(0deg);
+		-moz-box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
-        transform: rotate(0deg);
+		box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
+        /* The "!important" keywords is needed to override higher preference of generated inline styling! */
+		-webkit-transform: rotate(0deg) !important; /* Removes rotation through a transition */
+		-moz-transform: rotate(0deg) !important;
+		-ms-transform: rotate(0deg) !important;
+		transform: rotate(0deg) !important;
 }
 
 a.polaroid img {
         border: none;
         display: block;
+        min-width: 10vw;
+        max-width: 100%;
+        max-height: 100%;
+        margin: auto; /* Centers wth display: block */
 }
 
 /* END: polaroid-group */

prosopopee/themes/exposure/templates/sections/polaroid-group.html

@@ -2,27 +2,35 @@
 <div class="bg-section" style="background: {{ section.background }};">
 {% endif %}
     <section class="polaroid-group baguette" {% if section.css %}style="{{ section.css }}"{% endif %} >
-    <div class="polaroid-line" style="width: 100%; height: 33vh;">
+    <div class="polaroid-line">
-    {% for image in line %}
+    {% for image in section.images %}
         {% set caption = image.text %}
+        {% set custpos = false %}
         {% if image.angle %}
            {% set angle = image.angle %}
         {% else %}
-            {% set angle = 20 %}
+            {% if (loop.index%2 == 1) %}
+                {% set angle = 15 %}
+            {% else %}
+                {% set angle = -15 %}
+            {% endif %}
         {% endif %}
         {% if image.x %}
             {% set x = image.x %}
+            {% set custpos = true %}
         {% else %}
             {% set x = "0px" %}
+        {% endif %}
         {% if image.y %}
             {% set y = image.y %}
+            {% set custpos = true %}
         {% else %}
             {% set y = "0px" %}
         {% endif %}
         {% if image.z %}
             {% set z = image.z %}
         {% else %}
-            {% set z = 2 %}
+            {% set z = loop.index %}
         {% endif %}
         {% set image = Image(image) %}
         {{ image.copy() }}
@@ -33,7 +41,7 @@
             data-at-1366="{{ image.generate_thumbnail("x1366") }}"
             data-at-1920="{{ image.generate_thumbnail("x1920") }}"
             class="polaroid"
-            style="left: {{ x }}; top: {{ y }}; z-index: {{ z }}; -webkit-transform: rotate({{ angle }}deg); -moz-transform: rotate({{ angle }}deg); transform: rotate({{ angle }}deg);">
+            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);">
                 {% if caption %}
                 <img class="lazy" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt="{{ caption }}">
                 <h5 class="polaroid__title">{{ caption }}</h5>
@@ -41,8 +49,9 @@
                 <img class="lazy" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt="unnamed image">
                 {% endif %}
         </a>
-    </div>
     {% endfor %}
+    </div>
+    </section>
 {% if section.background %}
 </div>
 {% endif %}