add caption on exposure theme

example/first_gallery/settings.yaml

@@ -11,14 +11,20 @@ sections:
       date: 2015-12-08
   - type: bordered-picture
     image: stuff.png
+  - type: bordered-picture
+    image: stuff.png
+    text: "plop"
   - type: text
     text: « voici plein de blabla à rajouter et <b>ceci est du gras</b> et encore plein plein plein plein de text car je veux voir comment ça va wrapper car c'est important et il faut pas que j'oublie de mettre des margins en % sinon ça va pas le faire alala là ça devrait aller »
   - type: pictures-group
     images:
       -
-        - stuff.png
-        - stuff.png
-        - stuff.png
+        - name: stuff.png
+          text: "test"
+        - name: stuff.png
+          text: "test"
+        - name: stuff.png
+          text: "test"
       -
         - stuff.png
         - stuff.png

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

@@ -197,3 +197,59 @@ footer a {
 .gallery-header {
     margin-bottom: 0;
 }
+
+
+
+.caption {
+    position: relative;
+    overflow: hidden;
+}
+
+.caption__media {
+    display: block;
+    min-width: 100%;
+    max-width: 100%;
+    height: auto;
+}
+
+.caption__overlay {
+    height: 20px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 20px 0 30px 0;
+    color: white;
+    transform: translateY(-100%);
+    transition: transform .35s ease-out;
+    background: -moz-linear-gradient(top, rgba(0,0,0,0.85) 0%, transparent 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.85)), color-stop(100%, transparent));
+    background: -webkit-linear-gradient(top, rgba(0,0,0,0.85) 0%, transparent 100%);
+    background: -o-linear-gradient(top, rgba(0,0,0,0.85) 0%, transparent 100%);
+    background: -ms-linear-gradient(top, rgba(0,0,0,0.85) 0%, transparent 100%);
+}
+
+.caption:hover .caption__overlay {
+    transform: translateY(0);
+}
+
+.caption h5 {
+    position: relative;
+    width: auto;
+    display: inline-block;
+    margin: 0 auto 10px auto;
+    font-size: 20px;
+    font-family: "adobe-garamond-pro", serif;
+    font-weight: normal;
+    font-style: italic;
+    padding: 2px 20px;
+    width: 100%;
+    text-align: center;
+}
+
+.bordered-picture .caption__overlay {
+    margin-left: 11.5%;
+    margin-right: 11.5%;
+}
+

prosopopee/themes/exposure/templates/sections/bordered-picture.html

@@ -1,7 +1,15 @@
 {% set image = Image(section.image) %}
+{% set caption = section.text %}
 {{ image.copy()}}
 <section class="bordered-picture baguette">
+    <div class="caption">
         <a href="{{ image }}">
             <img src="{{ image }}">
+            {% if caption %}
+            <div class="caption__overlay">
+                <h5 class="caption__overlay__title">{{ caption }}</h5>
+            </div>
+            {% endif %}
+    </div>
         </a>
 </section>

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

@@ -2,11 +2,17 @@
     {% for line in section.images %}
         <div class="pictures-line">
             {% for image in line %}
+            {% set caption = image.text %}
             {% set image = Image(image) %}
             {{ image.copy() }}
-                <div class="picture">
+            <div class="picture caption">
                 <a href="{{ image }}">
                     <img src="{{ image.generate_thumbnail("x600") }}">
+                    {% if caption %}
+                    <div class="caption__overlay">
+                        <h5 class="caption__overlay__title">{{ caption }}</h5>
+                    </div>
+                    {% endif %}
                 </a>
             </div>
             {% if not loop.last %}