First version of "polariod-group" section - untested!

TODO.txt

@@ -8,3 +8,5 @@
 7. "Polaroid" image galleries alongside the usual ones. Also need to be able to fullscreen the images on click as usual. This should not be a CSS-only change or a custom CSS because we should have these galleries alongside the "usual" ones.
 8. CUSTOM CLASS for the section? This actually might save us from differentiating 7.) and the usual image gallery maybe? (7 alone good too)
 9. Make navmenu configurable in the main settings.yaml file. This is useful in case the navmenu appears at multiple pages and we do not want to duplicate information like blog, rss, email...
+10. Multiple image size generation (not only hi+midres): need really small images for small screens and old machines.
+11. Specify which image to download from the server according to media query. Current way it downloads both I think which is worst. Also on small screens there is no need at all to download 3k images and such because there is no point for it at all!

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

@@ -551,3 +551,43 @@ nav ul ul ul li {
 
 #nav li > a:only-child:after {content: ''; }
 /* END: navmenu */
+
+/* START: polaroid-group */
+a.polaroid {
+    display: block;
+    padding: 10px 10px 25px 10px;
+    border: 2px solid #BFBFBF;
+    /*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);
+    box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
+    /* Transition to lower speed when removing rotation on hover */
+    -webkit-transition: -webkit-transform 0.6s ease-in;
+    transition: width 1s, height 1s, transform 1s;
+    -moz-transition: width 1s, height 1s, -moz-transform 1s;
+    -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;
+
+}
+
+/* Remove rotation and make it visible (z-index) */
+a.polaroid:hover,
+a.polaroid:focus,
+a.polaroid:active {
+        z-index: 100;
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        transform: rotate(0deg);
+}
+
+a.polaroid img {
+        border: none;
+        display: block;
+}
+
+/* END: polaroid-group */

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

@@ -0,0 +1,50 @@
+{% if section.background %}
+<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;">
+    {% for image in line %}
+        {% set caption = image.text %}
+        {% if image.angle %}
+           {% set angle = image.angle %}
+        {% else %}
+            {% set angle = 20 %}
+        {% endif %}
+        {% if image.x %}
+            {% set x = image.x %}
+        {% else %}
+            {% set x = "0px" %}
+        {% if image.y %}
+            {% set y = image.y %}
+        {% else %}
+            {% set y = "0px" %}
+        {% endif %}
+        {% if image.z %}
+            {% set z = image.z %}
+        {% else %}
+            {% set z = 2 %}
+        {% endif %}
+        {% set image = Image(image) %}
+        {{ image.copy() }}
+        {% set ratio = image.ratio %}
+        <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
+            data-at-450="{{ image.generate_thumbnail("x450") }}"
+            data-at-800="{{ image.generate_thumbnail("x800") }}"
+            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);">
+                {% if caption %}
+                <img class="lazy" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt="{{ caption }}">
+                <h5 class="polaroid__title">{{ caption }}</h5>
+                {% else %}
+                <img class="lazy" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt="unnamed image">
+                {% endif %}
+        </a>
+    </div>
+    {% endfor %}
+{% if section.background %}
+</div>
+{% endif %}
+<!-- vim: ts=8 et sw=4 sts=4
+-->