01 - Add a header image to the homepage

Author: wachterjohannes

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>

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>

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>