From bed54e120b088bb4c44b36cdf97a88d3b296774e Mon Sep 17 00:00:00 2001
From: Dominik Polakovics <dominik.polakovics@cloonar.com>
Date: Sat, 14 Dec 2024 23:50:42 +0100
Subject: [PATCH] feat: add possibility to change image size at text image
 element

---
 .../Sets/SitePackage/page.tsconfig            |  4 --
 .../textimage/assets/frontend.css             | 40 +++++++++++++------
 .../ContentElements/textimage/config.yaml     | 14 ++++++-
 .../textimage/templates/frontend.html         | 32 ++++++++++-----
 .../Public/Scss/components/_navigation.scss   |  4 +-
 5 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/packages/base/Configuration/Sets/SitePackage/page.tsconfig b/packages/base/Configuration/Sets/SitePackage/page.tsconfig
index f4d7048..21a0a4a 100644
--- a/packages/base/Configuration/Sets/SitePackage/page.tsconfig
+++ b/packages/base/Configuration/Sets/SitePackage/page.tsconfig
@@ -8,14 +8,10 @@ RTE {
 
 TCEFORM {
     pages {
-
     }
     tt_content {
-
     }
 }
 
 TCEMAIN {
-
 }
-
diff --git a/packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css b/packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css
index ca9388e..67399c3 100644
--- a/packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css
+++ b/packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css
@@ -2,7 +2,6 @@
   margin: 2rem 0;
 }
 
-/* Mobile-first: column layout by default */
 .textimage-container {
   display: flex;
   flex-direction: column;
@@ -13,32 +12,48 @@
   width: 100%;
 }
 
-.textimage-header {
-  font-size: 1.5rem;
-  font-weight: bold;
-  margin-bottom: 1rem;
-}
-
 .textimage-text {
   font-size: 1rem;
   line-height: 1.5;
 }
 
 .textimage-image-wrapper {
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.textimage-picture {
+  display: block;
+  max-width: 100%;
+}
+
 .textimage-image {
   max-width: 100%;
   height: auto;
   border-radius: 0.5rem;
+  display: block;
 }
 
-/* Image positions: 25 = left, 26 = right
-   On larger screens, adjust the layout */
+/* Image positions: 25 = left, 26 = right */
+.textimage-container.image-pos-25 {
+  flex-direction: column;
+}
+
+.textimage-container.image-pos-26 {
+  flex-direction: column;
+}
+
+/* Size classes apply at all viewports */
+.textimage-image-wrapper.size-25 .textimage-picture {
+  max-width: 300px;
+}
+
+.textimage-image-wrapper.size-50 .textimage-picture {
+  max-width: 600px;
+}
+
+/* On larger screens, arrange horizontally for image position settings */
 @media (min-width: 768px) {
   .textimage-container.image-pos-25 {
     flex-direction: row;
@@ -48,8 +63,7 @@
     flex-direction: row-reverse;
   }
 
-  .textimage-wrapper,
-  .textimage-image-wrapper {
-    flex: 1 1 50%;
+  .textimage-wrapper {
+    flex: 1;
   }
 }
diff --git a/packages/base/ContentBlocks/ContentElements/textimage/config.yaml b/packages/base/ContentBlocks/ContentElements/textimage/config.yaml
index 6eae087..0406aea 100644
--- a/packages/base/ContentBlocks/ContentElements/textimage/config.yaml
+++ b/packages/base/ContentBlocks/ContentElements/textimage/config.yaml
@@ -1,11 +1,12 @@
 name: cloonar/textimage
 typeName: cloonar_textimage
 group: default
-prefixFields: true
-prefixType: full
+prefixFields: false
 fields:
   - identifier: header
     useExistingField: true
+  - identifier: subheader
+    useExistingField: true
   - identifier: bodytext
     type: Textarea
     enableRichtext: true
@@ -17,3 +18,12 @@ fields:
     useExistingField: true
   - identifier: imageorient
     useExistingField: true
+  - identifier: imagesize
+    type: Select
+    renderType: selectSingle
+    default: 2
+    items:
+      - label: 25%
+        value: 1
+      - label: 50%
+        value: 2
diff --git a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
index 7107978..9af4553 100644
--- a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
@@ -1,15 +1,24 @@
 <f:layout name="Default" />
 
-<f:section name="Header" />
+<f:section name="Header"></f:section>
 <f:section name="Main">
   <f:asset.css identifier="CBTextImage" href="{cb:assetPath()}/frontend.css" />
 
+  <!-- Determine size class based on imagesize field -->
+  <f:variable name="sizeClass" value="" />
+  <f:if condition="{data.imagesize} == 1">
+    <f:then><f:variable name="sizeClass" value="size-25" /></f:then>
+  </f:if>
+  <f:if condition="{data.imagesize} == 2">
+    <f:then><f:variable name="sizeClass" value="size-50" /></f:then>
+  </f:if>
+
   <div class="textimage-container image-pos-{data.imageorient}">
-    <div class="textimage-image-wrapper">
+    <div class="textimage-image-wrapper {sizeClass}">
       <f:if condition="{data.image}">
         <f:then>
-          <picture>
-            <source 
+          <picture class="textimage-picture">
+            <source
               srcset="
                 {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
                 {f:uri.image(image:data.image.0, width:'768c', cropVariant:'default')} 768w,
@@ -17,13 +26,13 @@
               sizes="(max-width: 320px) 90vw,
                      (max-width: 768px) 600px,
                      600px" />
-            <f:image 
-              image="{data.image.0}" 
-              treatIdAsReference="1" 
-              cropVariant="default" 
-              width="1024c" 
-              alt="{data.header}" 
-              class="textimage-image" />
+            <f:image
+              image="{data.image.0}"
+              treatIdAsReference="1"
+              cropVariant="default"
+              alt="{data.header}"
+              class="textimage-image"
+            />
           </picture>
         </f:then>
         <f:else>
@@ -34,6 +43,7 @@
     <div class="textimage-wrapper">
       <f:if condition="{data.header}">
         <h2 class="textimage-header">{data.header}</h2>
+        <h3 class="textimage-subheader">{data.subheader}</h3>
       </f:if>
       <f:if condition="{data.bodytext}">
         <div class="textimage-text">
diff --git a/packages/base/Resources/Public/Scss/components/_navigation.scss b/packages/base/Resources/Public/Scss/components/_navigation.scss
index bf1b52d..ebd5237 100644
--- a/packages/base/Resources/Public/Scss/components/_navigation.scss
+++ b/packages/base/Resources/Public/Scss/components/_navigation.scss
@@ -6,17 +6,17 @@ $nav-height: 60px; // Adjust as needed
 // Ensure this path is correct for your TYPO3 installation.
 // Typically: /typo3conf/ext/<extension_key>/Resources/Public/Images/...
 
-header {
+body > header {
   width: 100%;
   height: $nav-height;
   line-height: $nav-height;
-  background: url('../Images/background.jpg') repeat;
   position: sticky;
   top: 0;
   z-index: 1000;
 }
 
 .main-nav {
+  background: url('../Images/background.jpg') repeat;
 
   .container {
     display: flex;