feat: New bric: text and image.

bricks.xml

@@ -1263,5 +1263,53 @@
             </settings>
         </brick>
 
+        <brick control="\QUI\Bricks\Controls\TextAndImage">
+            <title>
+                <locale group="quiqqer/bricks"
+                        var="brick.textAndImage.title"/>
+            </title>
+            <description>
+                <locale group="quiqqer/bricks"
+                        var="brick.textAndImage.description"/>
+            </description>
+
+            <settings>
+
+                <setting name="image" class="media-image">
+                    <locale group="quiqqer/bricks"
+                            var="brick.textAndImage.image"/>
+                </setting>
+
+                <setting name="imageOnLeft" type="checkbox">
+                    <locale group="quiqqer/bricks"
+                            var="brick.textAndImage.imageOnLeft"/>
+                </setting>
+
+                <setting name="maxImageWidth" type="number">
+                    <locale group="quiqqer/bricks"
+                            var="brick.textAndImage.maxImageWidth"/>
+                </setting>
+
+                <setting name="textPosition" type="select">
+                    <locale group="quiqqer/bricks"
+                            var="brick.textAndImage.textPosition"/>
+
+                    <option value="top">
+                        <locale group="quiqqer/bricks"
+                                var="brick.textAndImage.textPosition.top"/>
+                    </option>
+                    <option value="center">
+                        <locale group="quiqqer/bricks"
+                                var="brick.textAndImage.textPosition.center"/>
+                    </option>
+                    <option value="bottom">
+                        <locale group="quiqqer/bricks"
+                                var="brick.textAndImage.textPosition.bottom"/>
+                    </option>
+                </setting>
+
+            </settings>
+        </brick>
+
     </bricks>
 </quiqqer>

locale.xml

@@ -1648,5 +1648,44 @@ M&ouml;chten Sie die Bausteine aus der Bausteinzone entfernen?</p>]]></de>
             <en><![CDATA[Bricks: Last News]]></en>
             <pl><![CDATA[Bricks: Ostatnie newsy]]></pl>
         </locale>
+
+
+        <!-- Text and image -->
+        <locale name="brick.textAndImage.title">
+            <de><![CDATA[Bausteine: Text neben dem Bild]]></de>
+            <en><![CDATA[Bricks: Text next to the image]]></en>
+        </locale>
+        <locale name="brick.textAndImage.description">
+            <de><![CDATA[Der Text wird neben dem Bild angezeigt wahlweise rechts oder links.]]></de>
+            <en><![CDATA[The text is displayed next to the image, either on the right or left.]]></en>
+        </locale>
+        <locale name="brick.textAndImage.image">
+            <de><![CDATA[Bild]]></de>
+            <en><![CDATA[Image]]></en>
+        </locale>
+        <locale name="brick.textAndImage.imageOnLeft">
+            <de><![CDATA[Bild auf der linken Seite]]></de>
+            <en><![CDATA[Image on the left side]]></en>
+        </locale>
+        <locale name="brick.textAndImage.maxImageWidth">
+            <de><![CDATA[Maximale Briete des Bildes]]></de>
+            <en><![CDATA[Maximum image width]]></en>
+        </locale>
+        <locale name="brick.textAndImage.textPosition">
+            <de><![CDATA[Text Position]]></de>
+            <en><![CDATA[Text position]]></en>
+        </locale>
+        <locale name="brick.textAndImage.textPosition.top">
+            <de><![CDATA[Oben]]></de>
+            <en><![CDATA[Top]]></en>
+        </locale>
+        <locale name="brick.textAndImage.textPosition.center">
+            <de><![CDATA[Zentriert]]></de>
+            <en><![CDATA[Center]]></en>
+        </locale>
+        <locale name="brick.textAndImage.textPosition.bottom">
+            <de><![CDATA[Unten]]></de>
+            <en><![CDATA[Bottom]]></en>
+        </locale>
     </groups>
 </locales>

src/QUI/Bricks/Controls/TextAndImage.css

+.quiqqer-textImage {
+    display: flex;
+}
+
+.quiqqer-textImage-box:first-child {
+    padding-left: 0;
+}
+
+.quiqqer-textImage-box:last-child {
+    padding-right: 0;
+}
+
+.quiqqer-textImage-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.quiqqer-textImage-image img {
+    display: block;
+}
+
+.quiqqer-textImage-content {
+    display: flex;
+}
+
+@media screen and (max-width: 767px) {
+    .quiqqer-textImage {
+        flex-direction: column;
+    }
+
+    .quiqqer-textImage-box {
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .quiqqer-textImage-image {
+        order: 1;
+        margin-bottom: 1rem;
+    }
+
+    .quiqqer-textImage-content {
+        order: 2;
+    }
+}
\ No newline at end of file

src/QUI/Bricks/Controls/TextAndImage.html

+{assign var=imageOnLeftClass value='quiqqer-textImage__imageOnRight'}
+{if $imageOnLeft}
+{assign var=imageOnLeftClass value='quiqqer-textImage__imageOnLeft'}
+{/if}
+
+<div class="quiqqer-textImage {$imageOnLeftClass}">
+    {if $imageOnLeft}
+    <div class="quiqqer-textImage-box quiqqer-textImage-image grid-50 mobile-grid-100">
+        {if $img}
+        {image src=$img width=$maxImageWidth}
+        {/if}
+    </div>
+    <div class="quiqqer-textImage-box quiqqer-textImage-content grid-50 mobile-grid-100"
+         style="align-items: {$textPosition};">
+        <div class="quiqqer-textImage-content-inner">
+            {if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
+            <header>
+                <h1>{$this->getAttribute('frontendTitle')}</h1>
+            </header>
+            {/if}
+
+            {$this->getAttribute('content')}
+        </div>
+    </div>
+    {else}
+    <div class="quiqqer-textImage-box quiqqer-textImage-content grid-50 mobile-grid-100"
+         style="align-items: {$textPosition};">
+        <div class="quiqqer-textImage-content-inner">
+            {if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
+            <header>
+                <h1>{$this->getAttribute('frontendTitle')}</h1>
+            </header>
+            {/if}
+
+            {$this->getAttribute('content')}
+        </div>
+    </div>
+    <div class="quiqqer-textImage-box quiqqer-textImage-image grid-50 mobile-grid-100">
+        {if $img}
+        {image src=$img width=$maxImageWidth}
+        {/if}
+    </div>
+    {/if}
+</div>
\ No newline at end of file

src/QUI/Bricks/Controls/TextAndImage.php

+<?php
+
+/**
+ * This file contains \QUI\Bricks\Controls\TextAndImage
+ */
+
+namespace QUI\Bricks\Controls;
+
+use QUI;
+
+/**
+ * Class TextAndImage
+ *
+ * @package quiqqer/bricks
+ */
+class TextAndImage extends QUI\Control
+{
+    /**
+     * constructor
+     *
+     * @param array $attributes
+     */
+    public function __construct($attributes = [])
+    {
+        // default options
+        $this->setAttributes([
+            'image'         => false,
+            'maxImageWidth' => false,
+            'imageRight'    => false,
+            'textPosition'  => 'top' // top, center, bottom
+        ]);
+
+        parent::__construct($attributes);
+
+        $this->addCSSFile(
+            dirname(__FILE__) . '/TextAndImage.css'
+        );
+    }
+
+    /**
+     * (non-PHPdoc)
+     *
+     * @see \QUI\Control::create()
+     */
+    public function getBody()
+    {
+        $Engine = QUI::getTemplateManager()->getEngine();
+
+        // text position
+        switch ($this->getAttribute('textPosition')) {
+            case 'center':
+                $textPosition = 'center';
+                break;
+
+            case 'bottom':
+                $textPosition = 'bottom';
+                break;
+
+            case 'top':
+            default:
+                $textPosition = 'flex-start';
+        }
+
+        $Engine->assign([
+            'this'              => $this,
+            'img'               => $this->getAttribute('image'),
+            'maxImageWidth'     => intval($this->getAttribute('maxImageWidth')),
+            'imageOnLeft'       => $this->getAttribute('imageOnLeft'),
+            'imageAsBackground' => $this->getAttribute('imageAsBackground'),
+            'textPosition'      => $textPosition
+        ]);
+
+        return $Engine->fetch(dirname(__FILE__) . '/TextAndImage.html');
+    }
+}