'
+ 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 += '
' # closing fotocolumn
+ result += '
'
+ result += ''
+ nbr += 1
+
+ result += "
" # 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')
diff --git a/pages/wacken2019.md b/pages/wacken2019.md
index 167ff28..3538c50 100644
--- a/pages/wacken2019.md
+++ b/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!
\ No newline at end of file
+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!
+
+
+{{ 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 }}
\ No newline at end of file
diff --git a/static/fotogrid.css b/static/fotogrid.css
new file mode 100644
index 0000000..227411d
--- /dev/null
+++ b/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%;
+ }
+}
\ No newline at end of file
diff --git a/templates/template.html b/templates/template.html
index 0333291..e6518aa 100644
--- a/templates/template.html
+++ b/templates/template.html
@@ -4,6 +4,7 @@
{{ fontawesome_html() }}
+