diff --git a/bricks.xml b/bricks.xml index 16cacbc6a0fc7d54bc7baa8198f483556448c3d8..a2503ab0520dcb285e8cf11c8cc5be9a22f6e7a9 100644 --- a/bricks.xml +++ b/bricks.xml @@ -183,6 +183,24 @@ var="brick.control.basicSlider.maxImageWidth"/> </setting> + <setting name="textPosition" type="select"> + <locale group="quiqqer/bricks" + var="brick.basicSlider.textPosition"/> + + <option value="top"> + <locale group="quiqqer/bricks" + var="brick.basicSlider.textPosition.top"/> + </option> + <option value="center"> + <locale group="quiqqer/bricks" + var="brick.basicSlider.textPosition.center"/> + </option> + <option value="bottom"> + <locale group="quiqqer/bricks" + var="brick.basicSlider.textPosition.bottom"/> + </option> + </setting> + <setting name="sliderContent" data-qui="controls/editors/Input" type="text"> <locale group="quiqqer/bricks" var="brick.control.basicSlider.sliderContent"/> </setting> diff --git a/locale.xml b/locale.xml index b157b9e4a08260f48ef1fd0f0e2ae86f0a2a6d6f..39104b2691747463be5592b4d7a4bd006e3e4cc4 100644 --- a/locale.xml +++ b/locale.xml @@ -432,6 +432,22 @@ <de><![CDATA[Maximale Briete des Bildes]]></de> <en><![CDATA[Maximum image width]]></en> </locale> + <locale name="brick.basicSlider.textPosition"> + <de><![CDATA[Text Position]]></de> + <en><![CDATA[Text position]]></en> + </locale> + <locale name="brick.basicSlider.textPosition.top"> + <de><![CDATA[Oben]]></de> + <en><![CDATA[Top]]></en> + </locale> + <locale name="brick.basicSlider.textPosition.center"> + <de><![CDATA[Zentriert]]></de> + <en><![CDATA[Center]]></en> + </locale> + <locale name="brick.basicSlider.textPosition.bottom"> + <de><![CDATA[Unten]]></de> + <en><![CDATA[Bottom]]></en> + </locale> <locale name="brick.control.basicSlider.sliderContent"> <de><![CDATA[Inhalt]]></de> <en><![CDATA[Text]]></en> diff --git a/src/QUI/Bricks/Controls/Slider/BasicSlider.css b/src/QUI/Bricks/Controls/Slider/BasicSlider.css index c363cc5419b0cb55324b4f0dc91e13ec6f6785eb..8eaa0e25232cb7e4099b0189ec222025848db6c2 100644 --- a/src/QUI/Bricks/Controls/Slider/BasicSlider.css +++ b/src/QUI/Bricks/Controls/Slider/BasicSlider.css @@ -32,6 +32,7 @@ .basic-slider-content { padding-right: 20px; + display: flex; } .basic-slider__imageLeft { diff --git a/src/QUI/Bricks/Controls/Slider/BasicSlider.html b/src/QUI/Bricks/Controls/Slider/BasicSlider.html index de501247214b10b76015c01141b4c6bc745e16b0..e39e46905d35c1dc6c6efc5a453cd4623611081c 100644 --- a/src/QUI/Bricks/Controls/Slider/BasicSlider.html +++ b/src/QUI/Bricks/Controls/Slider/BasicSlider.html @@ -11,7 +11,7 @@ {/if} <div class="basic-slider-wrapper {if $imgLeft} basic-slider__imageLeft {/if}"> - <div class="basic-slider-content"> + <div class="basic-slider-content" style="align-items: {$textPosition};"> {$sliderContent} </div> diff --git a/src/QUI/Bricks/Controls/Slider/BasicSlider.php b/src/QUI/Bricks/Controls/Slider/BasicSlider.php index 17b41f8189a16fb3952255eeb37d764f084f2bf3..c63e88ab150ee4f7c5a05f925ef73c96c242d459 100644 --- a/src/QUI/Bricks/Controls/Slider/BasicSlider.php +++ b/src/QUI/Bricks/Controls/Slider/BasicSlider.php @@ -26,7 +26,7 @@ public function __construct($attributes = []) 'mediaFolder' => false, 'delay' => 5000, 'imgLeft' => false, - 'maxImageWidth' => false, + 'maxImageWidth' => false, 'sliderContent' => '', 'class' => 'quiqqer-bricks-basic-slider', 'nodeName' => 'section', @@ -95,12 +95,28 @@ public function getBody() $maxImageWidth = intval($this->getAttribute('maxImageWidth')); } + // text position + switch ($this->getAttribute('textPosition')) { + case 'center': + $textPosition = 'center'; + break; + + case 'bottom': + $textPosition = 'flex-end'; + break; + + case 'top': + default: + $textPosition = 'flex-start'; + } + $options = [ 'this' => $this, 'images' => $images, 'sliderContent' => $sliderContent, 'imgLeft' => $imgLeft, - 'maxImageWidth' => $maxImageWidth + 'maxImageWidth' => $maxImageWidth, + 'textPosition' => $textPosition ]; $Engine->assign($options);