Better media page

_includes/layouts/default.njk

@@ -59,7 +59,7 @@ article: null
         {% endfor %}
       {% endif %}
 
-      {% if media %}
+      {% if mediaProjects %}
         {% include "media.njk" %}
       {% endif %}
 

_includes/media.njk

@@ -1,26 +1,33 @@
-<section
-  id="media"
-  class="media"
->
-  {% for medium in media %}
-    <h2>{{ medium.title }}</h2>
+{% for project in mediaProjects %}
+  <h1>{{ project.title }}</h1>
 
-    {% if medium.id %}
-      <figure class="media-iframe-parent">
-        <iframe
-          class="media-iframe"
-          src="https://www.youtube.com/embed/{{ medium.id }}"
-          title="YouTube video player"
-          frameborder="0"
-          allow="autoplay; clipboard-write; encrypted-media; picture-in-picture"
-          allowfullscreen
-        ></iframe>
-      </figure>
-    {% elif medium.src %}
-      <video class="media-video" controls>
-        <source src="{{ medium.src }}" type="video/mp4">
-        Dein Browser unterstützt leider keine Videos
-      </video>
-    {% endif %}
-  {% endfor %}
-</section>
+  {{ project.article | md | safe }}
+
+  <section
+    id="media"
+    class="media"
+  >
+    {% for medium in project.media %}
+      <h2>{{ medium.title }}</h2>
+
+      {% if medium.id %}
+        <figure class="media-iframe-parent">
+          <iframe
+            class="media-iframe"
+            src="https://www.youtube.com/embed/{{ medium.id }}"
+            title="YouTube video player"
+            frameborder="0"
+            allow="autoplay; clipboard-write; encrypted-media; picture-in-picture"
+            allowfullscreen
+          ></iframe>
+        </figure>
+      {% elif medium.src %}
+        <video class="media-video" controls>
+          <source src="{{ medium.src }}" type="video/mp4">
+          Dein Browser unterstützt leider keine Videos
+        </video>
+      {% endif %}
+    {% endfor %}
+  </section>
+
+{% endfor %}

medien/index.yml

@@ -9,38 +9,38 @@ pageImage:
   src: kino
   description: Italienisch-türkisches Kino im Kölner Eigelstein/Weidengasse, 1982, Guenay Ulutuncok / DOMiD-Archiv, Köln
 
-article: "
-## Benim Müzem – Mein Museum
-
+mediaProjects:
+  - title: Benim Müzem – Mein Museum
+    article: "
 Ein Videoprojekt von Museumsdienst Köln und dem Amt für Integration und Vielfalt
 
 
 In drei Kurzfilmen gibt das Videoprojekt einen Einblick in den Arbeitsalltag von drei Menschen, die in den oder für die städtischen Museen in Köln arbeiten. Sie berichten von ihrer Beziehung zum Museum oder seinen Objekten und sprechen darüber, wie sie ihre Mehrsprachigkeit in der Arbeit einsetzen.
+    "
 
+    media:
+      - title: Ertan Özcan
+        src: /videos/Ertan_MD_25.10.21.mp4
+      - title: Ipek Sirena Krutsch
+        src: /videos/Ipek_MD_25.20.21.mp4
+      - title: Kezban Tursun
+        src: /videos/Kezban_MD_25.10.21.mp4
 
-## Der Geschichte Ein Gesicht Geben – Und Namen
-
+  - title: Der Geschichte Ein Gesicht Geben – Und Namen
+    article: "
 Ein Videoprojekt von In-Haus e.V. und der AWO Mittelrhein
 
 
 60 Jahre Anwerbeabkommen zur Entsendung von Arbeitskräften aus der Türkei nach Deutschland Vielen Dank an alle, die ihre Geschichte mit uns geteilt haben. Und danke an Nuran Kançok, Vural Çeliker, Ayşe Und Levent Seyhan vom AWO Bezirksverband Mittelrhein e.V. für die Unterstützung.
-"
-
-media:
-  - title: Ayşe Und Levent Seyhan
-    id: Qr-_B3j99dE
-  - title: Vural Çeliker
-    id: WQPZh7RWqtI
-  - title: Nejla Ocak
-    id: xUwNO2FwqI8
-  - title: Fatma und Ahmet Görgülü
-    id: 1DDoJ3-bXq0
-  - title: Turan Özkücük
-    id: 8Id6f6meCRw
-  - title: Ertan Özcan
-    src: /videos/Ertan_MD_25.10.21.mp4
-  - title: Ipek Sirena Krutsch
-    src: /videos/Ipek_MD_25.20.21.mp4
-  - title: Kezban Tursun
-    src: /videos/Kezban_MD_25.10.21.mp4
-    
+    "
+    media: 
+      - title: Ayşe Und Levent Seyhan
+        id: Qr-_B3j99dE
+      - title: Vural Çeliker
+        id: WQPZh7RWqtI
+      - title: Nejla Ocak
+        id: xUwNO2FwqI8
+      - title: Fatma und Ahmet Görgülü
+        id: 1DDoJ3-bXq0
+      - title: Turan Özkücük
+        id: 8Id6f6meCRw