diff --git a/bricks.xml b/bricks.xml
index 5b18bfd694a14d2dd366a26ef42375582a3baa9b..a946d8036383670a0db1af2284a230215ceb310b 100644
--- a/bricks.xml
+++ b/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"
diff --git a/locale.xml b/locale.xml
index 94ad8de45a455214b98b442cefffc27f066e9528..e839109479ed78b2712d111a500b040085e3b729 100644
--- a/locale.xml
+++ b/locale.xml
@@ -1775,6 +1775,14 @@ Mö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>
diff --git a/src/QUI/Bricks/Controls/TextAndImage.html b/src/QUI/Bricks/Controls/TextAndImage.html
index 0fa3ccd5f123b4bbb5d45c19b455f29a0c66c54a..262286ffefcc8f54fd9c7ba1ea2b81c31e2cd9ad 100644
--- a/src/QUI/Bricks/Controls/TextAndImage.html
+++ b/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}
diff --git a/src/QUI/Bricks/Controls/TextAndImage.php b/src/QUI/Bricks/Controls/TextAndImage.php
index c72f798bdf75a7acfb2bf0252bc14ed718c98184..3acc0566a8393a5de87ab9232532dd23cb495177 100644
--- a/src/QUI/Bricks/Controls/TextAndImage.php
+++ b/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');
diff --git a/src/QUI/Bricks/Controls/TextAndImageMultiple.php b/src/QUI/Bricks/Controls/TextAndImageMultiple.php
index 0b1a4fc124429017896cd88f94be3b7944b98def..17e66658ae9278214636183e7baf653dd7b0ec43 100644
--- a/src/QUI/Bricks/Controls/TextAndImageMultiple.php
+++ b/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');
}
}