02 - Add a content block to the homepage

sulu · Jun 20, 2022 · d8b37c6 · d8b37c6
1 parent 4fcfa45
commit d8b37c6
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -26,4 +26,9 @@
             {% endfor %}
         </div>
     </div>
+
+    {% include 'includes/blocks.html.twig' with {
+        content: {blocks: content.blocks},
+        view: {blocks: view.blocks},
+    } only %}
 {% endblock %}