feat: New setting for TextAndImage brick: image zoom.

bricks.xml

@@ -1391,6 +1391,14 @@
                     <locale group="quiqqer/bricks"
                             var="brick.textAndImage.maxImageWidth"/>
                 </setting>
+                <setting name="imageZoom" type="checkbox">
+                    <locale group="quiqqer/bricks"
+                            var="brick.textAndImage.imageZoom"/>
+                    <description>
+                        <locale group="quiqqer/bricks"
+                                var="brick.textAndImage.imageZoom.desc"/>
+                    </description>
+                </setting>
 
                 <setting name="textPosition" type="select">
                     <locale group="quiqqer/bricks"
@@ -1561,6 +1569,14 @@
                                 var="brick.textAndImage.fullImageHeight.desc"/>
                     </description>
                 </setting>
+                <setting name="imageZoom" type="checkbox">
+                    <locale group="quiqqer/bricks"
+                            var="brick.textAndImage.imageZoom"/>
+                    <description>
+                        <locale group="quiqqer/bricks"
+                                var="brick.textAndImage.imageZoom.desc"/>
+                    </description>
+                </setting>
 
                 <setting name="entries" type="hidden"
                          data-qui="package/quiqqer/bricks/bin/Controls/TextAndImageMultipleSettings"

locale.xml

@@ -1775,6 +1775,14 @@ M&ouml;chten Sie die Bausteine aus der Bausteinzone entfernen?</p>]]></de>
             <de><![CDATA[Wenn der Text größer ist als Bild, wird die Höhe des Bildes dem Text entsprechen.]]></de>
             <en><![CDATA[If the text is larger than image, the height of the image will match the text.]]></en>
         </locale>
+        <locale name="brick.textAndImage.imageZoom">
+            <de><![CDATA[Klickbare bilder]]></de>
+            <en><![CDATA[Clickable images]]></en>
+        </locale>
+        <locale name="brick.textAndImage.imageZoom.desc" html="true">
+            <de><![CDATA[Wenn aktiviert, kann man die Bilder klicken um sie zu vergrößern. Bitte beachte, das funktioniert nur, wenn das QUIQQER Paket <code>quiqqer/gallery</code> installiert ist.]]></de>
+            <en><![CDATA[If activated, you can click on the images to enlarge them. Please note, this only works if the QUIQQER package <code>quiqqer/gallery</code> is installed.]]></en>
+        </locale>
         <locale name="brick.textAndImage.maxImageWidth">
             <de><![CDATA[Maximale Briete des Bildes]]></de>
             <en><![CDATA[Maximum image width]]></en>

src/QUI/Bricks/Controls/TextAndImage.html

@@ -12,7 +12,7 @@
                 {assign var=inlineStyle value="max-width: {$maxImageWidth}px; width: 100%;"}
             {/if}
 
-            {image src=$img width=$maxImageWidth style=$inlineStyle class={$imageShadow} loading="lazy"}
+            {image src=$img width=$maxImageWidth style=$inlineStyle class={$imageShadow} loading="lazy" data-zoom="$imageZoom"}
         {/if}
     </div>
     <div class="quiqqer-textImage-box quiqqer-textImage-content {$textWidthClass} mobile-grid-100"
@@ -47,7 +47,7 @@
                 {assign var=inlineStyle value="max-width: {$maxImageWidth}px; width: 100%;"}
             {/if}
 
-            {image src=$img width=$maxImageWidth style=$inlineStyle class={$imageShadow} loading="lazy"}
+            {image src=$img width=$maxImageWidth style=$inlineStyle class={$imageShadow} loading="lazy" data-zoom="$imageZoom"}
         {/if}
     </div>
     {/if}

src/QUI/Bricks/Controls/TextAndImage.php

@@ -30,7 +30,8 @@ public function __construct($attributes = [])
             'imageShadow'     => false,
             'fullImageHeight' => false,
             'textPosition'    => 'top', // top, center, bottom
-            'textImageRatio'  => 50 // 30,35,40,45,50,55,60,65,70
+            'textImageRatio'  => 50, // 30,35,40,45,50,55,60,65,70
+            'imageZoom'       => false
         ]);
 
         parent::__construct($attributes);
@@ -94,6 +95,13 @@ public function getBody()
             $maxImageWidth = intval($this->getAttribute('maxImageWidth'));
         }
 
+        // zoom
+        $imageZoom = 0;
+        if ($this->getAttribute('imageZoom') &&
+            QUI::getPackageManager()->isInstalled('quiqqer/gallery')) {
+            $imageZoom = 1;
+        }
+
         $Engine->assign([
             'this'              => $this,
             'img'               => $this->getAttribute('image'),
@@ -104,7 +112,8 @@ public function getBody()
             'imageAsBackground' => $this->getAttribute('imageAsBackground'),
             'textPosition'      => $textPosition,
             'textWidthClass'    => $textWidthClass,
-            'imgWidthClass'     => $imgWidthClass
+            'imgWidthClass'     => $imgWidthClass,
+            'imageZoom'         => $imageZoom
         ]);
 
         return $Engine->fetch(dirname(__FILE__).'/TextAndImage.html');

src/QUI/Bricks/Controls/TextAndImageMultiple.php

@@ -32,12 +32,13 @@ public function __construct($attributes = [])
             'title'         => false,
             'text'          => false,
             'image'         => false,
+            'imageZoom'     => false
         ]);
 
         parent::__construct($attributes);
 
         $this->addCSSFile(
-            dirname(__FILE__) . '/TextAndImageMultiple.css'
+            dirname(__FILE__).'/TextAndImageMultiple.css'
         );
     }
 
@@ -84,12 +85,13 @@ public function getBody()
                 'fullImageHeight' => $fullImageHeight,
                 'textPosition'    => $this->getAttribute('textPosition'),
                 'textImageRatio'  => $textRatio,
-                'content'         => $entry['text']
+                'content'         => $entry['text'],
+                'imageZoom'       => $this->getAttribute('imageZoom')
             ]);
 
             $TextAndImage->addCSSClass('grid-container');
 
-            $html .='<div class="quiqqer-textImageMultiple">' . $TextAndImage->create() . '</div>';
+            $html .= '<div class="quiqqer-textImageMultiple">'.$TextAndImage->create().'</div>';
 
             $this->addCSSFiles($TextAndImage->getCSSFiles());
 
@@ -104,6 +106,6 @@ public function getBody()
             'html' => $html
         ]);
 
-        return $Engine->fetch(dirname(__FILE__) . '/TextAndImageMultiple.html');
+        return $Engine->fetch(dirname(__FILE__).'/TextAndImageMultiple.html');
     }
 }