diff --git a/bricks.xml b/bricks.xml
index bc874e710cba7de07667a4115cf3e0cf6f7fb694..dec87421b345cdb52e8372ae6ac7335cb6a4824d 100644
--- a/bricks.xml
+++ b/bricks.xml
@@ -1285,6 +1285,11 @@
var="brick.textAndImage.imageOnLeft"/>
</setting>
+ <setting name="imageShadow" type="checkbox">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.imageShadow"/>
+ </setting>
+
<setting name="maxImageWidth" type="number">
<locale group="quiqqer/bricks"
var="brick.textAndImage.maxImageWidth"/>
@@ -1308,6 +1313,49 @@
</option>
</setting>
+ <setting name="textImageRatio" type="select">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.textImageRatio"/>
+
+ <option value="30">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.textImageRatio.30"/>
+ </option>
+ <option value="35">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.textImageRatio.35"/>
+ </option>
+ <option value="40">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.textImageRatio.40"/>
+ </option>
+ <option value="45">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.textImageRatio.45"/>
+ </option>
+ <option value="50" default="1">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.textImageRatio.50"/>
+ </option>
+ <option value="55">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.textImageRatio.55"/>
+ </option>
+ <option value="60">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.textImageRatio.60"/>
+ </option>
+ <option value="65">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.textImageRatio.65"/>
+ </option>
+ <option value="70">
+ <locale group="quiqqer/bricks"
+ var="brick.textAndImage.textImageRatio.70"/>
+ </option>
+
+ </setting>
+
</settings>
</brick>
diff --git a/locale.xml b/locale.xml
index 30a11b634e8e24030c889c01a3da5935e61fcb24..3d88d9d90913fba7550050addd3a167ec092c170 100644
--- a/locale.xml
+++ b/locale.xml
@@ -1667,6 +1667,10 @@ Möchten Sie die Bausteine aus der Bausteinzone entfernen?</p>]]></de>
<de><![CDATA[Bild auf der linken Seite]]></de>
<en><![CDATA[Image on the left side]]></en>
</locale>
+ <locale name="brick.textAndImage.imageShadow">
+ <de><![CDATA[Bild hat einen Schatten]]></de>
+ <en><![CDATA[Image has a shadow]]></en>
+ </locale>
<locale name="brick.textAndImage.maxImageWidth">
<de><![CDATA[Maximale Briete des Bildes]]></de>
<en><![CDATA[Maximum image width]]></en>
@@ -1687,5 +1691,45 @@ Möchten Sie die Bausteine aus der Bausteinzone entfernen?</p>]]></de>
<de><![CDATA[Unten]]></de>
<en><![CDATA[Bottom]]></en>
</locale>
+ <locale name="brick.textAndImage.textImageRatio">
+ <de><![CDATA[Text und Bild Platzverhältnis]]></de>
+ <en><![CDATA[Text and image space ratio]]></en>
+ </locale>
+ <locale name="brick.textAndImage.textImageRatio.30">
+ <de><![CDATA[Text 30% - Bild 70%]]></de>
+ <en><![CDATA[Text 30% - Image 70%]]></en>
+ </locale>
+ <locale name="brick.textAndImage.textImageRatio.35">
+ <de><![CDATA[Text 35% - Bild 65%]]></de>
+ <en><![CDATA[Text 35% - Image 65%]]></en>
+ </locale>
+ <locale name="brick.textAndImage.textImageRatio.40">
+ <de><![CDATA[Text 40% - Bild 60%]]></de>
+ <en><![CDATA[Text 40% - Image 60%]]></en>
+ </locale>
+ <locale name="brick.textAndImage.textImageRatio.45">
+ <de><![CDATA[Text 45% - Bild 55%]]></de>
+ <en><![CDATA[Text 45% - Image 55%]]></en>
+ </locale>
+ <locale name="brick.textAndImage.textImageRatio.50">
+ <de><![CDATA[Text 50% - Bild 50% (standard)]]></de>
+ <en><![CDATA[Text 50% - Image 50% (default)]]></en>
+ </locale>
+ <locale name="brick.textAndImage.textImageRatio.55">
+ <de><![CDATA[Text 55% - Bild 45%]]></de>
+ <en><![CDATA[Text 55% - Image 45%]]></en>
+ </locale>
+ <locale name="brick.textAndImage.textImageRatio.60">
+ <de><![CDATA[Text 60% - Bild 40%]]></de>
+ <en><![CDATA[Text 60% - Image 40%]]></en>
+ </locale>
+ <locale name="brick.textAndImage.textImageRatio.65">
+ <de><![CDATA[Text 65% - Bild 35%]]></de>
+ <en><![CDATA[Text 65% - Image 35%]]></en>
+ </locale>
+ <locale name="brick.textAndImage.textImageRatio.70">
+ <de><![CDATA[Text 70% - Bild 30%]]></de>
+ <en><![CDATA[Text 70% - Image 30%]]></en>
+ </locale>
</groups>
</locales>
diff --git a/src/QUI/Bricks/Controls/TextAndImage.css b/src/QUI/Bricks/Controls/TextAndImage.css
index 4611f3faf423e8b10eac081b5d0b1337d212f84e..6e606d2be2127032c57c0792c301a36085e7aea6 100644
--- a/src/QUI/Bricks/Controls/TextAndImage.css
+++ b/src/QUI/Bricks/Controls/TextAndImage.css
@@ -11,8 +11,8 @@
}
.quiqqer-textImage-image {
- display: flex;
align-items: center;
+ display: flex;
justify-content: center;
}
@@ -24,6 +24,10 @@
display: flex;
}
+.quiqqer-textImage-box .shadow-xl {
+ /*box-shadow: 2px 4px 30px 0px rgba(0,0,0,0.2);*/
+}
+
@media screen and (max-width: 767px) {
.quiqqer-textImage {
flex-direction: column;
@@ -35,8 +39,8 @@
}
.quiqqer-textImage-image {
- order: 1;
margin-bottom: 1rem;
+ order: 1;
}
.quiqqer-textImage-content {
diff --git a/src/QUI/Bricks/Controls/TextAndImage.html b/src/QUI/Bricks/Controls/TextAndImage.html
index e4e9e3abd385d1bd8e2e7b3c68cd7b214c2d158f..f1be129a0a6b2608c6f7a942bc5028f0db7ed213 100644
--- a/src/QUI/Bricks/Controls/TextAndImage.html
+++ b/src/QUI/Bricks/Controls/TextAndImage.html
@@ -5,12 +5,12 @@
<div class="quiqqer-textImage {$imageOnLeftClass}">
{if $imageOnLeft}
- <div class="quiqqer-textImage-box quiqqer-textImage-image grid-50 mobile-grid-100">
+ <div class="quiqqer-textImage-box quiqqer-textImage-image {$imgWidthClass} mobile-grid-100">
{if $img}
- {image src=$img width=$maxImageWidth}
+ {image src=$img width=$maxImageWidth class={$imageShadow}}
{/if}
</div>
- <div class="quiqqer-textImage-box quiqqer-textImage-content grid-50 mobile-grid-100"
+ <div class="quiqqer-textImage-box quiqqer-textImage-content {$textWidthClass} mobile-grid-100"
style="align-items: {$textPosition};">
<div class="quiqqer-textImage-content-inner">
{if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
@@ -23,7 +23,7 @@
</div>
</div>
{else}
- <div class="quiqqer-textImage-box quiqqer-textImage-content grid-50 mobile-grid-100"
+ <div class="quiqqer-textImage-box quiqqer-textImage-content {$textWidthClass} mobile-grid-100"
style="align-items: {$textPosition};">
<div class="quiqqer-textImage-content-inner">
{if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
@@ -35,9 +35,9 @@
{$this->getAttribute('content')}
</div>
</div>
- <div class="quiqqer-textImage-box quiqqer-textImage-image grid-50 mobile-grid-100">
+ <div class="quiqqer-textImage-box quiqqer-textImage-image {$imgWidthClass} mobile-grid-100">
{if $img}
- {image src=$img width=$maxImageWidth}
+ {image src=$img width=$maxImageWidth class={$imageShadow}}
{/if}
</div>
{/if}
diff --git a/src/QUI/Bricks/Controls/TextAndImage.php b/src/QUI/Bricks/Controls/TextAndImage.php
index 5a79e7f078a7a0d5015ff53443c279e34b4d8c58..4fb307d1f5bd6949ca1186460c762b8014efe820 100644
--- a/src/QUI/Bricks/Controls/TextAndImage.php
+++ b/src/QUI/Bricks/Controls/TextAndImage.php
@@ -24,16 +24,18 @@ public function __construct($attributes = [])
{
// default options
$this->setAttributes([
- 'image' => false,
- 'maxImageWidth' => false,
- 'imageRight' => false,
- 'textPosition' => 'top' // top, center, bottom
+ 'image' => false,
+ 'maxImageWidth' => false,
+ 'imageRight' => false,
+ 'imageShadow' => false,
+ 'textPosition' => 'top', // top, center, bottom
+ 'textImageRatio' => 50 // 30,35,40,45,50,55,60,65,70
]);
parent::__construct($attributes);
$this->addCSSFile(
- dirname(__FILE__) . '/TextAndImage.css'
+ dirname(__FILE__).'/TextAndImage.css'
);
}
@@ -53,7 +55,7 @@ public function getBody()
break;
case 'bottom':
- $textPosition = 'bottom';
+ $textPosition = 'flex-end';
break;
case 'top':
@@ -61,15 +63,38 @@ public function getBody()
$textPosition = 'flex-start';
}
+ /* text width */
+ $textWidthClass = 'grid-50';
+ $imgWidthClass = 'grid-50';
+
+ if ($this->getAttribute('textImageRatio')) {
+ $textWidth = intval($this->getAttribute('textImageRatio'));
+
+
+ if ($textWidth > 0 && $textWidth < 100) {
+ $imgWidth = 100 - $textWidth;
+ $textWidthClass = 'grid-'.$textWidth;
+ $imgWidthClass = 'grid-'.$imgWidth;
+ }
+ }
+
+ $shadow = '';
+ if ($this->getAttribute('imageShadow')) {
+ $shadow = 'shadow-xl';
+ }
+
$Engine->assign([
'this' => $this,
'img' => $this->getAttribute('image'),
'maxImageWidth' => intval($this->getAttribute('maxImageWidth')),
'imageOnLeft' => $this->getAttribute('imageOnLeft'),
+ 'imageShadow' => $shadow,
'imageAsBackground' => $this->getAttribute('imageAsBackground'),
- 'textPosition' => $textPosition
+ 'textPosition' => $textPosition,
+ 'textWidthClass' => $textWidthClass,
+ 'imgWidthClass' => $imgWidthClass
]);
- return $Engine->fetch(dirname(__FILE__) . '/TextAndImage.html');
+ return $Engine->fetch(dirname(__FILE__).'/TextAndImage.html');
}
}