Bullet point tags work, but mobile is broken; without it padding too much (not padding but seem so). Maybe will revert this commit...

prosopopee/prosopopee.py

@@ -465,6 +465,7 @@ def create_cover(gallery_name, gallery_settings, gallery_path):
         "link": gallery_name,
         "sub_title": gallery_settings.get("sub_title", ""),
         "date": gallery_settings.get("date", ""),
+        "tags_as_list": gallery_settings.get("tags_as_list", ""),
         "ord": gallery_settings.get("ord", ""),
         "tags": gallery_settings.get("tags", ""),
         "cover_type": cover_image_type,

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

@@ -34,7 +34,7 @@ a {
     width: 100%;
     height: 100%;
     margin: auto;
-    padding-bottom: 47%;
+    /*padding-bottom: 47%;*/
     position: relative;
 }
 
@@ -42,21 +42,21 @@ a {
     width: 50%;
     height: 100%;
     margin: 0 0 0;
-    padding-bottom: 47%;
+    /*padding-bottom: 47%;*/
     position: relative;
-    display: inline-block;
+    display: inline-grid;
 }
 
 .covers-3 .gallery-square {
     width: 33.333333333%;
     height: 100%;
     margin: 0;
-    padding-bottom: 47%;
+    /*padding-bottom: 47%;*/
     position: relative;
-    display: inline-block;
+    display: inline-grid;
 }
 
-.gallery-square > a {
+.gallery-square a {
     position: absolute;
     top: 0px;
     left: 0px;
@@ -70,7 +70,7 @@ a {
     to {background-color: rgba(0, 0, 0, 0.3);}
 }
 
-.gallery-square > a:hover {
+.gallery-square a:hover {
     animation-name: darken;
     animation-duration: 0.15s;
     animation-iteration-count: 1;
@@ -425,6 +425,21 @@ input:checked + .slider:before {
   border-radius: 50%;
 }
 
+/* Needed height: 100% because if there is an element with non determined */
+/* height on the chain from root to node it fails! gallery-tags_as_list failed for this! */
+.subgal {
+    height: 100%;
+}
+
+.subgaldiv {
+    height: 50vh;
+    position: relative;
+}
+
+.gallery-tags_as_list {
+    text-align: left;
+}
+
 @media only screen and (max-device-width: 700px) {
   .gallery-square {
     width: 100% !important;

prosopopee/themes/exposure/templates/sections/subgal.html

@@ -7,12 +7,17 @@
   <div class="galleries-line covers-{{ galleries_line|length }}">
     {% for gallery in galleries_line|reverse %}<!-- comment tricks against space between inline-block
     --><div class="gallery-square">
+      <div class="subgaldiv">
       <a href="{{ gallery.link }}">
         <div class="gallery-title">
           <h2>{{ gallery.title }}</h2>
           {% if gallery.sub_title %}<h3>{{ gallery.sub_title }}</h3>{% endif %}
           {% if settings.show_date and gallery.date %}<div class="gallery-datetime">{{ gallery.date.strftime("%d %B %Y") }}</div>{% endif %}
-          {% if gallery.tags %}<div class="gallery-tag">IN {% for tag in gallery.tags -%} <span> {{ tag }}</span> {% endfor -%}</div>{% endif %}
+          {% if gallery.tags %}
+          {% if not gallery.tags_as_list %}
+          <div class="gallery-tag">
+            IN {% for tag in gallery.tags -%} <span> {{ tag }}</span> {% endfor -%}
+          </div>{% endif %}{% endif %}
         </div>
       </a>
       {% if gallery.cover_type == "video" %}
@@ -33,6 +38,12 @@
       <div class="gallery-cover" style="background-image: url('{{ cover.generate_thumbnail("x1366") }}'), url('{{ cover.generate_thumbnail("x900") }}');"></div>
       {% endif %}
       {% endif %}
+      </div>
+      {% if gallery.tags %}
+      {% if gallery.tags_as_list %}
+      <div class="gallery-tags_as_list">
+        <ul> {% for tag in gallery.tags %} <li> {{ tag }}</li> {% endfor %} </ul>
+      </div>{% endif %}{% endif %}
     </div><!-- comment tricks against space between inline-block
     -->{% endfor %}
   </div>

prosopopee/themes/light/static/css/style.css

@@ -58,7 +58,7 @@ a {
   display: inline-block;
 }
 
-.gallery-square > a {
+.gallery-square a {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -72,7 +72,7 @@ a {
   to {background-color: rgba(0, 0, 0, 0.3);}
 }
 
-.gallery-square > a:hover {
+.gallery-square a:hover {
   animation-name: darken;
   animation-duration: 0.15s;
   animation-iteration-count: 1;

prosopopee/themes/material/static/css/style.css

@@ -575,7 +575,7 @@ nav .nav-header {
     display: inline-block;
 }
 
-.gallery-square > a {
+.gallery-square a {
     position: absolute;
     top: 0px;
     left: 0px;