add caption on exposure theme

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

@@ -3,7 +3,7 @@
 {{ image.copy()}}
 <section class="bordered-picture baguette">
     <div class="caption">
-        <a href="{{ image }}">
+        <a href="{{ image }} {% if caption %}data-caption="{{ caption }}"{% endif %}">
             <img src="{{ image }}">
             {% if caption %}
             <div class="caption__overlay">

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

@@ -6,7 +6,7 @@
             {% set image = Image(image) %}
             {{ image.copy() }}
             <div class="picture caption">
-                <a href="{{ image }}">
+                <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
                     <img src="{{ image.generate_thumbnail("x600") }}">
                     {% if caption %}
                     <div class="caption__overlay">

prosopopee/themes/material/static/css/styles.css

@@ -31,3 +31,44 @@ main {
   text-align: center;
   width: 100%;
 }
+
+.caption {
+    position: relative;
+    overflow: hidden;
+}
+
+.caption__media {
+    display: block;
+    min-width: 100%;
+    max-width: 100%;
+    height: auto;
+}
+
+
+.caption__overlay {
+    background-color: rgba(0, 0, 0, .4);
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    color: white;
+    transform: translateY(101%);
+    transition: transform .35s ease-out;
+}
+
+.caption:hover .caption__overlay {
+    transform: translateY(0);
+}
+
+.bordered-picture .caption__overlay {
+    margin-left: 11.5%;
+    margin-right: 11.5%;
+}
+
+.caption .card-panel {
+    margin: 0;
+    padding: 1px;
+    text-align: center;
+}
+  

prosopopee/themes/material/templates/index.html

@@ -25,7 +25,7 @@
                     <div class="card-image">
                         {% set cover = Image(gallery.cover) %}
                         {{ cover.copy() }}
-                        <img src="{{ cover.generate_thumbnail("x800") }}">
+                        <img class="responsive-img" src="{{ cover.generate_thumbnail("x800") }}">
                         <span class="card-title truncate">{{ gallery.title }}</span>
                     </div>
                     <div class="card-content">

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

@@ -1,14 +1,13 @@
-<div class="container baguette hide-on-med-and-down">
+<div class="container baguette caption">
     {% set image = Image(section.image) %}
+    {% set caption = section.text %}
     {{ image.copy()}}
-    <a href="{{ image }}">
+    <a href="{{ image }} {% if caption %}data-caption="{{ caption }}"{% endif %}>
         <img class="responsive-img" src="{{ image.generate_thumbnail("x2000") }}">
-    </a>
+        {% if caption %}
-</div>
+        <div class="caption__overlay card-panel center">
-<div class="container baguette hide-on-large-only">
+            <h5 class="black-white">{{ caption }}</h5>
-    {% set image = Image(section.image) %}
+        </div>
-    {{ image.copy()}}
+        {% endif %}
-    <a href="{{ image.generate_thumbnail("x1024") }}">
-        <img class="responsive-img" src="{{ image.generate_thumbnail("x600") }}">
     </a>
 </div>

prosopopee/themes/material/templates/sections/full-picture.html

@@ -1,8 +1,7 @@
 {% set image = Image(section.image) %}
 {{ image.copy() }}
 <div class="parallax-container z-depth-1 valign-wrapper">
-    <div class="parallax hide-on-med-and-down"><img src="{{ image }}"></div>
+    <div class="parallax"><img src="{{ image }}"></div>
-    <div class="parallax hide-on-large-only"><img src="{{ image.generate_thumbnail("x1024") }}"></div>
     {% if section.text %}
     <div class="parallax-tittle white-text">
     <h1>{{ section.text.title }}</h1>

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

@@ -2,19 +2,20 @@
     <div class="row baguette">
         {% for line in section.images %}
         {% for image in line %}
+        {% set caption = image.text %}
         {% set image = Image(image) %}
         {{ image.copy() }}
         {% set plop =  12 // loop.length %}
         <div class="col m{{ plop }} l{{ plop }}">
             <div class="card">
-                <div class="card-image hide-on-med-and-down">
+                <div class="card-image caption">
-                    <a href="{{ image }}">
+                    <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
                         <img class="responsive-img" src="{{ image.generate_thumbnail("x600") }}">
-                    </a>
+                        {% if caption %}
+                        <div class="caption__overlay card-panel center">
+                            <h5 class="black-white">{{ caption }}</h5>
                         </div>
-                <div class="card-image hide-on-large-only">
+                        {% endif %}
-                    <a href="{{ image.generate_thumbnail("x1024") }}">
-                        <img class="responsive-img" src="{{ image.generate_thumbnail("x600") }}">
                     </a>
                 </div>
             </div>