From fb0a78bfe0ff945ff94ad5f159a6cde94b025a0b Mon Sep 17 00:00:00 2001
From: Johannes Wachter <johannes@sulu.io>
Date: Mon, 23 Sep 2019 13:54:54 +0200
Subject: [PATCH] 02 - Add a content block to the homepage

---
 config/image-formats.xml                      |  9 ++
 config/templates/pages/homepage.xml           | 94 +++++++++++++++++++
 .../includes/block-types/gallery.html.twig    | 11 +++
 .../includes/block-types/quote.html.twig      |  6 ++
 .../includes/block-types/text-image.html.twig | 23 +++++
 templates/includes/blocks.html.twig           |  8 ++
 templates/pages/homepage.html.twig            |  5 +
 7 files changed, 156 insertions(+)
 create mode 100644 templates/includes/block-types/gallery.html.twig
 create mode 100644 templates/includes/block-types/quote.html.twig
 create mode 100644 templates/includes/block-types/text-image.html.twig
 create mode 100644 templates/includes/blocks.html.twig

diff --git a/config/image-formats.xml b/config/image-formats.xml
index ff838bb..b590555 100644
--- a/config/image-formats.xml
+++ b/config/image-formats.xml
@@ -23,6 +23,15 @@
         <scale x="1920"/>
     </format>
 
+    <format key="200x">
+        <meta>
+            <title lang="en">Block Image</title>
+            <title lang="de">Block Bild</title>
+        </meta>
+
+        <scale x="200"/>
+    </format>
+
     <!--
     Render an image from the media_selection in a specific format the following way:
 
diff --git a/config/templates/pages/homepage.xml b/config/templates/pages/homepage.xml
index 34d20c0..9a71634 100644
--- a/config/templates/pages/homepage.xml
+++ b/config/templates/pages/homepage.xml
@@ -60,5 +60,99 @@
                 <title lang="de">Veranstaltungs Highlights</title>
             </meta>
         </property>
+
+        <block name="blocks" default-type="text-image">
+            <types>
+                <type name="text-image">
+                    <meta>
+                        <title lang="en">Text image</title>
+                        <title lang="de">Text image</title>
+                    </meta>
+
+                    <properties>
+                        <property name="title" type="text_line">
+                            <meta>
+                                <title lang="en">Title</title>
+                                <title lang="de">Titel</title>
+                            </meta>
+                        </property>
+
+                        <property name="article" type="text_editor">
+                            <meta>
+                                <title lang="en">Article</title>
+                                <title lang="de">Artikel</title>
+                            </meta>
+                        </property>
+
+                        <property name="image" type="single_media_selection">
+                            <meta>
+                                <title lang="en">Image</title>
+                                <title lang="de">Bild</title>
+                            </meta>
+
+                            <params>
+                                <param name="types" value="image"/>
+
+                                <param name="defaultDisplayOption" value="left"/>
+                                <param name="displayOptions" type="collection">
+                                    <param name="left" value="true" />
+                                    <param name="right" value="true" />
+                                </param>
+                            </params>
+                        </property>
+                    </properties>
+                </type>
+
+                <type name="quote">
+                    <meta>
+                        <title lang="en">Quote</title>
+                        <title lang="de">Zitat</title>
+                    </meta>
+
+                    <properties>
+                        <property name="quote" type="text_area">
+                            <meta>
+                                <title lang="en">Quote</title>
+                                <title lang="de">Zitat</title>
+                            </meta>
+                        </property>
+
+                        <property name="author" type="text_line">
+                            <meta>
+                                <title lang="en">Author</title>
+                                <title lang="de">Autor</title>
+                            </meta>
+                        </property>
+                    </properties>
+                </type>
+
+                <type name="gallery">
+                    <meta>
+                        <title lang="en">Gallery</title>
+                        <title lang="de">Galerie</title>
+                    </meta>
+
+                    <properties>
+                        <property name="title" type="text_line">
+                            <meta>
+                                <title lang="en">Title</title>
+                                <title lang="de">Titel</title>
+                            </meta>
+                        </property>
+
+                        <property name="images" type="media_selection">
+                            <meta>
+                                <title lang="en">Images</title>
+                                <title lang="de">Bilder</title>
+                            </meta>
+
+                            <params>
+                                <param name="types" value="image"/>
+                            </params>
+                        </property>
+                    </properties>
+                </type>
+            </types>
+        </block>
     </properties>
 </template>
diff --git a/templates/includes/block-types/gallery.html.twig b/templates/includes/block-types/gallery.html.twig
new file mode 100644
index 0000000..8122346
--- /dev/null
+++ b/templates/includes/block-types/gallery.html.twig
@@ -0,0 +1,11 @@
+<div class="row">
+    <h3>{{ content.title }}</h3>
+</div>
+
+<div class="row">
+    <div>
+        {% for image in content.images %}
+            <img src="{{ image.formats['200x'] }}" alt="{{ image.title }}" class="img-thumbnail m-3">
+        {% endfor %}
+    </div>
+</div>
diff --git a/templates/includes/block-types/quote.html.twig b/templates/includes/block-types/quote.html.twig
new file mode 100644
index 0000000..bab6071
--- /dev/null
+++ b/templates/includes/block-types/quote.html.twig
@@ -0,0 +1,6 @@
+<div class="row">
+    <blockquote class="blockquote text-center">
+        <p class="mb-0">{{ content.quote }}</p>
+        <footer class="blockquote-footer">{{ content.author }}</footer>
+    </blockquote>
+</div>
diff --git a/templates/includes/block-types/text-image.html.twig b/templates/includes/block-types/text-image.html.twig
new file mode 100644
index 0000000..02f00ce
--- /dev/null
+++ b/templates/includes/block-types/text-image.html.twig
@@ -0,0 +1,23 @@
+<div class="row">
+    {% set imageContainer %}
+        {%- if content.image %}
+            <div class="col-3">
+                <img src="{{ content.image.formats['200x'] }}" class="img-fluid rounded" alt="{{ content.image.title }}">
+            </div>
+        {% endif -%}
+    {% endset %}
+
+    {% if view.image.displayOption == 'left' %}
+        {{ imageContainer|raw }}
+    {% endif %}
+
+    <div class="{{ imageContainer ? 'col-9' : 'col-12'}}">
+        <h3>{{ content.title }}</h3>
+
+        {{ content.article|raw }}
+    </div>
+
+    {% if view.image.displayOption == 'right' %}
+        {{ imageContainer|raw }}
+    {% endif %}
+</div>
diff --git a/templates/includes/blocks.html.twig b/templates/includes/blocks.html.twig
new file mode 100644
index 0000000..526e280
--- /dev/null
+++ b/templates/includes/blocks.html.twig
@@ -0,0 +1,8 @@
+{% for block in content.blocks %}
+    <section class="container mt-5 clearfix">
+        {% include "includes/block-types/#{block.type}.html.twig" with {
+            content: block,
+            view: view.blocks[loop.index0],
+        } only %}
+    </section>
+{% endfor %}
diff --git a/templates/pages/homepage.html.twig b/templates/pages/homepage.html.twig
index 8d718ad..99306a7 100644
--- a/templates/pages/homepage.html.twig
+++ b/templates/pages/homepage.html.twig
@@ -26,4 +26,9 @@
             {% endfor %}
         </div>
     </div>
+
+    {% include 'includes/blocks.html.twig' with {
+        content: {blocks: content.blocks},
+        view: {blocks: view.blocks},
+    } only %}
 {% endblock %}