1st take on a simple responsive foto grid that supports being embedded into markdown blog posts via jinja. Needs some more modularisation though.

app.py

@@ -1,12 +1,20 @@
 #!/usr/bin/env python3
 # vim: set sw=4 ts=4 ex
-from flask import Flask, render_template, url_for
+from flask import Flask, render_template, render_template_string, url_for
 from flask_flatpages import FlatPages
+from flask_flatpages.utils import pygmented_markdown
 from flask_fontawesome import FontAwesome
 from datetime import datetime
 
+# directly support jinja within markdown blogposts
+# https://flask-flatpages.readthedocs.io/en/v0.7.1/
+def markdown_with_jinja_renderer(text):
+    prerendered_body = render_template_string(text)
+    return pygmented_markdown(prerendered_body)
+
 app = Flask(__name__)
 app.config['FLATPAGES_EXTENSION'] = '.md'
+app.config['FLATPAGES_HTML_RENDERER'] = markdown_with_jinja_renderer
 app.config['FONTAWESOME_STYLES'] = ['solid', 'brands']
 
 pages = FlatPages(app)
@@ -43,5 +51,30 @@ def index():
     return render_template('index.html', pages=sorted_pages)
 
 
+def fotogrid(image_urls):
+    result = '<div class="fotorow">'
+    cols = 4
+    images = divmod(len(image_urls), cols)
+    images_per_col = images[0]
+    if images[1] > 0:
+        images_per_col += 1
+    nbr = 0
+    for img in image_urls:
+        if (nbr % images_per_col) == 0:
+            if nbr > 0:
+                result += '</div>'  # closing fotocolumn
+            result += '<div class="fotocolumn">'
+        result += '<img src="' + img + '" style="width:100%">'
+        nbr += 1
+
+    result += "</div></div>"  # closing fotocolum, fotorow
+    return result
+
+
+app.jinja_env.globals.update(fotogrid=fotogrid)
+
+#template = Template('Fotogrid')
+#template.globals['fotogrid'] = fotogrid
+
 if __name__ == '__main__':
     app.run(host='0.0.0.0')

pages/wacken2019.md

@@ -103,4 +103,7 @@ Eine weiteres Spektakel steht uns noch mit der _30th Anniversary Show_ bevor, di
 **Parkway Drive**  ziehen mit einem Fackelzug direkt durch die Menge auf die Bühne, eröffnen mit _Wishing Wells_ und _Prey_ und kündigen danach an, dass der Gig beinahe ausfallen musste, da sich der Bassist ein Knie gebrochen hatte. Sänger _Winston McCall_ kündigt daraufhin an: „Please welcome our new and improved bass player on a wheel chair!“ und Bassist _Jia O’Connor_ wird von seiner Mutter (!) im Rollstuhl auf die Bühne geschoben. Diese wiederum nutzt die Gelegenheit und startet zu _Carrion_ in die Menge, um zum ersten Mal in ihrem Leben zu crowdsurfen. Wie die Menge sie feiert!
 
 ## So 04.08.2019, Trennungsschmerz 
-Tja, am Sonntag ist dann wieder alles vorbei. Schade. Es löst sich auf, man verabschiedet sich und fährt wieder heim. Bei der Abfahrt vom Platz begegnen uns nochmal zufällig die Wabers und wir winken uns von Auto zu Auto zu, bevor wir uns in die Abreiseschlange einsortieren, diese aber bald wieder verlassen, da wir noch ein paar Tage an der Ostsee daranhängen werden. Schön war’s!
+Tja, am Sonntag ist dann wieder alles vorbei. Schade. Es löst sich auf, man verabschiedet sich und fährt wieder heim. Bei der Abfahrt vom Platz begegnen uns nochmal zufällig die Wabers und wir winken uns von Auto zu Auto zu, bevor wir uns in die Abreiseschlange einsortieren, diese aber bald wieder verlassen, da wir noch ein paar Tage an der Ostsee daranhängen werden. Schön war’s!
+
+<hr/>
+{{ fotogrid(["static/img/woa2019_01.jpg", "static/img/woa2019_02.jpg", "static/img/woa2019_03.jpg", "static/img/woa2019_04.jpg", "static/img/woa2019_05.jpg", "static/img/woa2019_06.jpg", "static/img/woa2019_07.jpg", "static/img/woa2019_08.jpg", "static/img/woa2019_09.jpg", "static/img/woa2019_10.jpg", "static/img/woa2019_11.jpg", "static/img/woa2019_12.jpg", "static/img/woa2019_13.jpg", "static/img/woa2019_14.jpg"])|safe }}

static/fotogrid.css

@@ -0,0 +1,35 @@
+
+
+.fotorow {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 4px;
+}
+
+/* Create four equal columns that sits next to each other */
+.fotocolumn {
+  flex: 25%;
+  max-width: 25%;
+  padding: 0 4px;
+}
+
+.fotocolumn img {
+  margin-top: 8px;
+  vertical-align: middle;
+}
+
+/* Responsive layout - makes a two column-layout instead of four columns */
+@media (max-width: 1000px) {
+  .fotocolumn {
+    flex: 50%;
+    max-width: 50%;
+  }
+}
+
+/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
+@media (max-width: 800px) {
+  .fotocolumn {
+    flex: 100%;
+    max-width: 100%;
+  }
+}

templates/template.html

@@ -4,6 +4,7 @@
     <!-- CSS -->
     {{ fontawesome_html() }}
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link rel="fotogrid stylesheet" href="{{ url_for('static', filename='fotogrid.css') }}">
     <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
   </head>
   <body class=post>