--- a/default/file/overview.html	Wed Mar 14 08:43:30 2018 +0100
+++ b/default/file/overview.html	Sun Mar 18 11:31:36 2018 +0100
@@ -1,7 +1,7 @@
 {% extends 'base/base.html' %}
 
 {% block body %}
-{{ icon_defs('level-up', 'doc','folder-open-empty') }}
+{{ icon_defs('level-up', 'doc','folder-open-empty', 'comment-empty') }}
 <ul id="files">
     {% if parent_url is defined  %}
         <li class="file">

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/photo/album.html	Sun Mar 18 11:31:36 2018 +0100
@@ -0,0 +1,33 @@
+{% extends 'base/base.html' %}
+{% import 'input/textbox.html' as textbox with context %}
+{% import 'blog/macros.html' as blog with context %}
+
+{% block body %}
+{{ icon_defs('comment-empty') }}
+<div class="album">
+    {% for file in files_data %}
+        {% if file.type == C.FILE_TYPE_FILE %}
+            <div class="album__item">
+                <div class="album__vignette">
+                    <img src="{{file.thumb_url}}" class="album__thumbnail" alt="{{file.name}}">
+                </div>
+                {% if file.comments_url is defined %}
+                    <span class='album__comments-bar' onclick="clicked_mh_fix('{{'comments_panel'|next_gidx}}')">
+                        {% trans %}comments{% endtrans %}
+                        {% if file.comments_count %}
+                            <span class='comments__count'>({{file.comments_count}})</span>
+                        {% endif %}
+                        {{ icon('comment-empty', cls='icon--small') }}
+                    </span>
+                    <div id='{{'comments_panel'|cur_gidx}}' class="panel-drawer">
+                        {{ blog.show_items(file.comments, expanded=true, dates_fmt='relative') }}
+                        <div class="comment_post">
+                            {{- textbox.comment_or_login(service=file.comments_service, node=file.comments_node) -}}
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
+        {% endif %}
+    {% endfor %}
+</div>
+{% endblock body %}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/static/photo.css	Sun Mar 18 11:31:36 2018 +0100
@@ -0,0 +1,55 @@
+@import 'blog.css'; /* needed for comments */
+
+.album {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.album__item {
+    width: 400px;
+	margin: 0 0.1em 2em 0.1em;
+}
+
+.album__vignette {
+    background-color: #444;
+    height: 300px;
+    position: relative;
+}
+
+.album__thumbnail {
+    height: 100%;
+    display: block;
+    margin: 0 auto;
+}
+
+.album__comments-bar {
+    display: block;
+    font-size: 0.8em;
+    color: black;
+    text-align: right;
+    cursor: pointer;
+}
+
+.album__comments-bar:hover {
+    background-color: #ddd;
+    font-weight: bold;
+}
+
+.icon--small {
+    height: 1em;
+}
+
+.comments__count {
+    font-weight: bold;
+}
+
+.panel-drawer {
+    max-height: 0;
+    opacity: 0;
+    transition: max-height 1s, opacity 2s;
+    overflow: hidden;
+}
+
+.panel-drawer.clicked {
+    opacity: 1;
+}