From a48c3cd6d5626da9269c9e8ef91b28a03e83ea9c Mon Sep 17 00:00:00 2001
From: Johannes Wachter <johannes@sulu.io>
Date: Tue, 24 Sep 2019 08:59:41 +0200
Subject: [PATCH] 01 - Add a header image to the homepage

---
 config/image-formats.xml            | 10 ++++------
 config/templates/pages/homepage.xml | 11 +++++++++++
 templates/pages/homepage.html.twig  |  3 +++
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/config/image-formats.xml b/config/image-formats.xml
index d3e0688..ff838bb 100644
--- a/config/image-formats.xml
+++ b/config/image-formats.xml
@@ -5,16 +5,14 @@
 
     <!-- See: http://docs.sulu.io/en/latest/book/image-formats.html how to define image-formats -->
 
-    <!--
-    <format key="300x">
+    <format key="x400">
         <meta>
-            <title lang="en">Example Image</title>
-            <title lang="de">Beispielbild</title>
+            <title lang="en">Header Image</title>
+            <title lang="de">Titelbild</title>
         </meta>
 
-        <scale x="300"/>
+        <scale y="400"/>
     </format>
-    -->
 
     <format key="1920x">
         <meta>
diff --git a/config/templates/pages/homepage.xml b/config/templates/pages/homepage.xml
index 8d1689a..34d20c0 100644
--- a/config/templates/pages/homepage.xml
+++ b/config/templates/pages/homepage.xml
@@ -36,6 +36,17 @@
             <tag name="sulu.rlp"/>
         </property>
 
+        <property name="headerImage" type="single_media_selection">
+            <meta>
+                <title lang="en">Header image</title>
+                <title lang="de">Titelbild</title>
+            </meta>
+
+            <params>
+                <param name="types" value="image"/>
+            </params>
+        </property>
+
         <property name="article" type="text_editor">
             <meta>
                 <title lang="en">Article</title>
diff --git a/templates/pages/homepage.html.twig b/templates/pages/homepage.html.twig
index d3a687b..8d718ad 100644
--- a/templates/pages/homepage.html.twig
+++ b/templates/pages/homepage.html.twig
@@ -3,6 +3,9 @@
 {% block content %}
     <section class="jumbotron text-center">
         <div class="container">
+            {% if content.headerImage|default %}
+                <img src="{{ content.headerImage.thumbnails['x400'] }}" class="img-fluid" alt="{{content.headerImage.title}}"/>
+            {% endif %}
             <h1 class="jumbotron-heading">{{ content.title }}</h1>
             <p class="lead text-muted">{{ content.article|raw }}</p>
         </div>