Add fields for image (as content) and soundtrack

app.py

 TEMPLATE_VID = """<video controls><source src="{}" type="video/{}"></video>"""
 
 RE_SOUNDTRACK = re.compile("""\[soundtrack ["']([^['"]*?)["']\]""")
-TEMPLATE_SOUNDTRACK = """<audio data-autoplay><source src="{}" type="audio/{}"></audio>"""
+TEMPLATE_SOUNDTRACK = """<audio loop data-autoplay><source src="{}" type="audio/{}"></audio>"""
 
-def preprocess_markdown(md):
+def preprocess_content(defs):
+    md = defs.get("markdown", "")
     if md:
         content = markdown(md)
         content = RE_VID.sub(lambda m: TEMPLATE_VID.format(m.group(1), m.group(1).split('.')[-1]), content)
-        content = RE_SOUNDTRACK.sub(lambda m: TEMPLATE_SOUNDTRACK.format(m.group(1), m.group(1).split('.')[-1]), content)
-        return content
-    return ""
+    else:
+        content = ""
+    img = defs.get("image", {})
+    match img.get("placement", "none"):
+        case "above":
+            content = """<img src="{source}" alt="{alt}" class="centered w-{width}"/><br/>\n""".format(**img)+content
+        case "left":
+            content = """<img src="{source}" alt="{alt}" class="float-left w-{width}"/><br/>\n""".format(**img)+content
+        case "right":
+            content = """<img src="{source}" alt="{alt}" class="float-right w-{width}"/><br/>\n""".format(**img)+content
+        case "below":
+            content = content+"""<br/>\n<img src="{source}" alt="{alt}" class="centered w-{width}"/><br/>\n""".format(**img)
+    if defs.get('soundtrack'):
+        content = """<audio loop data-autoplay><source src="{}" type="audio/{}"></audio>\n""".format(
+                      defs["soundtrack"], defs["soundtrack"].split(".")[-1])+content
+    return content
 
 def preprocess_payload(payload):
     for column in payload.get("columns", []):
-        column["content"] = preprocess_markdown(column.get("markdown"))
+        column["content"] = preprocess_content(column)
         for slide in column.get("slides", []):
-            slide["content"] = preprocess_markdown(slide.get("markdown"))
+            slide["content"] = preprocess_content(slide)
 
 load_dotenv()
 
 
 @application.get("/enum/<topic>")
 def choices(topic):
-    if topic in ["img", "bg", "bg-video"]:
+    if topic in ["img", "bg", "bg-video", "audio"]:
         return {"type": "string", "enum": glob("static/{}/*.*".format(topic))}
     abort(404)
 

static/css/style.css

 
 .float-left {
 	float: left;
-	margin-right: 1em;
+	margin-right: 1em !important;
 }
 
 .float-right {
 	float: right;
-	margin-left: 1em;
+	margin-left: 1em !important;
 }
 
 .centered {

static/slides.json

                 "background-video-mute": true,
                 "background-opacity": "0.75"
             },
-            "markdown": "I've done many things. Some of them I'm proud of: [soundtrack \"static/audio/VJ_Memes_-_funkyGarden.mp3\"]",
+            "markdown": "I've done many things. Some of them I'm proud of:",
+            "soundtrack": "static/audio/VJ_Memes_-_funkyGarden.mp3",
             "slides": [
                 {
                     "id": "work",
                         "background-image": "static/bg/valley-1.svg",
                         "background-opacity": "0.25"
                     },
-                    "markdown": "### I've worked like a horse.\n\n![A horse (of course)|w-50 centered](static/img/horse.png)"
+                    "image": {
+                        "placement": "below",
+                        "width": "50",
+                        "source": "static/img/horse.png",
+                        "alt": "A horse (of course)"
+                    },
+                    "markdown": "### I've worked like a horse."
                 },
                 {
                     "id": "rest",
                         "background-opacity": "0.5",
                         "background-size": "contain"
                     },
-                    "markdown": "#### I've rested like a cat.\n\n![A cat resting|w-66 centered](static/img/cat-resting.png)"
+                    "image": {
+                        "placement": "above",
+                        "width": "50",
+                        "source": "static/img/cat-resting.png",
+                        "alt": "A cat resting"
+                    },
+                    "markdown": "#### I've rested like a cat."
                 }
             ]
         },
                     "id": "horse",
                     "title": "My horse",
                     "params": {},
-                    "markdown": "![My horse|w-50 float-right](static/img/horse2.png)\n\nPlease forgive me, horse, for this and that."
+                    "image": {
+                        "placement": "right",
+                        "width": "66",
+                        "source": "static/img/horse2.png",
+                        "alt": "A different horse"
+                    },
+                    "markdown": "Please forgive me, horse, for this and that."
                 },
                 {
                     "id": "cat",
                     "params": {
                         "background-size": "contain"
                     },
-                    "markdown": "![My cat|w-50 float-left](static/img/cat-resting.png)\n\nPlease forgive me, cat, for that and this"
+                    "image": {
+                        "placement": "left",
+                        "width": "33",
+                        "source": "static/img/cat-resting.png",
+                        "alt": "A cat resting to the left of the text"
+                    },
+                    "markdown": "Please forgive me, cat, for that and this."
                 }
-            ]
+            ],
+            "soundtrack": "static/audio/sonar.wav"
         }
     ]
 }

static/slides.schema.json

       "items": {
         "type": "object",
         "title": "Chapter",
+        "headerTemplate": "{{title}}: {{self.title}}",
         "properties": {
           "id": {
             "type": "string"
           "params": {
             "$ref": "#/definitions/params"
           },
+          "image": {
+            "$ref": "#/definitions/image"
+          },
           "markdown": {
             "$ref": "#/definitions/markdown"
           },
+          "soundtrack": {
+            "$ref": "#/definitions/soundtrack"
+          },
           "slides": {
             "type": "array",
             "title": "Pages",
             "items": {
               "type": "object",
               "title": "Page",
+              "headerTemplate": "{{title}}: {{self.title}}",
               "properties": {
                 "id": {
                   "type": "string"
                 "params": {
                   "$ref": "#/definitions/params"
                 },
+                "image": {
+                  "$ref": "#/definitions/image"
+                },
                 "markdown": {
                   "$ref": "#/definitions/markdown"
+                },
+                "soundtrack": {
+                  "$ref": "#/definitions/soundtrack"
                 }
               },
               "required": [
         },
         "background-video-loop": {
             "type": "boolean",
+            "format": "checkbox",
             "default": true
         },
         "background-video-mute": {
             "type": "boolean",
+            "format": "checkbox",
             "default": true
         },
         "background-opacity": {
         }
       }
     },
+    "image": {
+      "type": "object",
+      "title": "Image",
+      "options": {
+        "collapsed": "true"
+      },
+      "properties": {
+        "placement": {
+          "type": "string",
+          "title": "Placement",
+          "enum": [
+            "none",
+            "above",
+            "left",
+            "right",
+            "below"
+          ],
+          "default": "none"
+        },
+        "width": {
+          "type": "string",
+          "title": "Width (percent)",
+          "enum": [
+            "25",
+            "33",
+            "50",
+            "66",
+            "75"
+          ],
+          "default": "50"
+        },
+        "source": {
+          "$ref": "/enum/img",
+          "title": "Image",
+          "links": [
+            {
+              "rel": "Preview image",
+              "class": "link-info",
+              "href": "{{self}}"
+            }
+          ]
+        },
+        "alt": {
+            "type": "string",
+            "title": "Description"
+        }
+      }
+    },
+    "soundtrack": {
+      "type": "string",
+      "title": "Soundtrack",
+      "$ref": "/enum/audio"
+    },
     "markdown": {
       "type": "string",
       "title": "Content",

templates/slides.html

 			// - https://revealjs.com/config/
 			Reveal.initialize({
 				hash: true,
-                                // controlsTutorial: false,
+                                progress: false,
                                 transition: 'convex',
                                 controlsBackArrows: 'visible',  // would hopefully solve the faded-arrow thing
                                 // slideNumber: "h.v",