Make home page portrait images editable via admin

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

user/themes/natascha/blueprints/home.yaml

@@ -0,0 +1,29 @@
+title: Home
+'@extends':
+    type: default
+    context: blueprints://pages
+
+form:
+  fields:
+    tabs:
+      type: tabs
+      active: 1
+      fields:
+        content:
+          type: tab
+          title: Content
+          fields:
+            header.image_main:
+              type: filepicker
+              label: 'Portrait image (main)'
+              preview_images: true
+              folder: '@self'
+              accept:
+                - image/*
+            header.image_secondary:
+              type: filepicker
+              label: 'Portrait image (secondary, shown on tablet and larger)'
+              preview_images: true
+              folder: '@self'
+              accept:
+                - image/*

user/themes/natascha/templates/home.html.twig

@@ -2,8 +2,10 @@
 {% set page_class = 'row p-3' %}
 {% block content %}
 <div class="col-12 col-md-6 col-lg-3 p-3">
-    <img src="{{ url('theme://images/portret-2.jpg') }}" class="img-fluid mb-3" alt="Portret Natascha Rieter">
-    <img src="{{ url('theme://images/portret-1.jpg') }}" class="img-fluid d-none d-md-block" alt="Portret Natascha Rieter">
+    {% set img_main = page.header.image_main ? page.media[page.header.image_main].url : url('theme://images/portret-2.jpg') %}
+    {% set img_secondary = page.header.image_secondary ? page.media[page.header.image_secondary].url : url('theme://images/portret-1.jpg') %}
+    <img src="{{ img_main }}" class="img-fluid mb-3" alt="Portret Natascha Rieter">
+    <img src="{{ img_secondary }}" class="img-fluid d-none d-md-block" alt="Portret Natascha Rieter">
 </div>
 <div class="col-12 col-md-6 col-lg-6 p-3 text-start">
     <h1 class="funky-font main-header text-center">{{ page.title }}</h1>