From 558f2d30b5340fcceb707e5c92e552da9423af13 Mon Sep 17 00:00:00 2001
From: Sebastian Helzle <sebastian@helzle.it>
Date: Fri, 11 Aug 2023 11:11:35 +0200
Subject: [PATCH] BUGFIX: Make it possible to properly align images again

No float this time
---
 .../Fusion/Content/SemanticSection.fusion     |  2 +-
 .../Private/Fusion/Overrides/Image.fusion     | 54 ++++++++++++-------
 .../Fusion/Overrides/TextWithImage.fusion     |  3 +-
 .../Private/Scss/Atoms/_Typography.scss       |  6 ++-
 .../Resources/Private/Scss/Main.scss          |  1 +
 .../Private/Scss/Molecules/_Image.scss        | 23 ++++----
 .../Scss/Molecules/_SemanticSection.scss      |  7 +++
 7 files changed, 66 insertions(+), 30 deletions(-)
 create mode 100644 DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Molecules/_SemanticSection.scss

diff --git a/DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Content/SemanticSection.fusion b/DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Content/SemanticSection.fusion
index 786e76247..c3734b91b 100644
--- a/DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Content/SemanticSection.fusion
+++ b/DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Content/SemanticSection.fusion
@@ -2,7 +2,7 @@ prototype(Neos.NeosIo:SemanticSection) < prototype(Neos.Neos:ContentComponent) {
     isLast = ${iterator.isLast}
 
     renderer = afx`
-        <section>
+        <section class="semantic-section">
             <Neos.Neos:ContentCollection />
             <hr @if={!props.isLast} />
         </section>
diff --git a/DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Overrides/Image.fusion b/DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Overrides/Image.fusion
index ab32e3d17..bfd4b2021 100644
--- a/DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Overrides/Image.fusion
+++ b/DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Overrides/Image.fusion
@@ -12,7 +12,9 @@ prototype(Neos.NodeTypes:Image) < prototype(Neos.Neos:ContentComponent) {
     }
 
     image = ${q(node).property('image')}
-    imageClassName = Neos.Fusion:DataStructure {
+    className = Neos.Fusion:DataStructure {
+        main = 'neos-nodetypes-image'
+
         alignment = ${'neos-alignment-' + q(node).property('alignment')}
         alignment.@if.isSet = ${q(node).property('alignment')}
 
@@ -54,22 +56,38 @@ prototype(Neos.NodeTypes:Image) < prototype(Neos.Neos:ContentComponent) {
     renderer.@context.image = Neos.Fusion:Case {
         default {
             condition = ${props.image}
-            renderer = Neos.Neos:ImageTag {
-                asset = ${props.image}
-                title = ${props.title}
-                maximumHeight = ${props.maximumHeight}
-                maximumWidth = ${props.maximumWidth}
-                allowUpScaling = ${props.allowUpScaling}
-                allowCropping = ${props.allowCropping}
-                width = ${props.width}
-                height = ${props.height}
-                async = true
-                attributes.alt = ${props.alternativeText}
-                attributes.loading = ${props.loading}
-                attributes.style = Neos.Fusion:Join {
-                    maxHeight = ${'max-height: ' + props.maximumHeight + 'px;'}
-                    maxHeight.@if.set = ${props.maximumHeight}
+            renderer = Neos.Fusion:Component {
+                @apply.props = ${props}
+
+                thumbnail = ${Neos.Seo.Image.createThumbnail(
+                props.image,
+                null,
+                props.width,
+                props.maximumWidth,
+                props.height,
+                props.maximumHeight,
+                props.allowCropping,
+                props.allowUpScaling,
+                true
+                )}
+
+                renderer.@process.debug = Neos.Fusion:Debug.Console {
+                    value = ${props}
                 }
+
+                renderer = afx`
+                    <img
+                        title={props.title}
+                        alt={props.alternativeText}
+                        style={'max-height: ' + props.maximumHeight + 'px;'}
+                        style.@if={props.maximumHeight}
+                        width={props.thumbnail.width || props.width}
+                        height={props.thumbnail.height || props.height}
+                        loading={props.loading}
+                    >
+                      <Neos.Fusion:ResourceUri resource={props.thumbnail.resource} @path='attributes.src'/>
+                    </img>
+                `
             }
         }
         fallback {
@@ -87,8 +105,8 @@ prototype(Neos.NodeTypes:Image) < prototype(Neos.Neos:ContentComponent) {
     }
 
     renderer = afx`
-        <div class="neos-nodetypes-image">
-            <figure class={props.imageClassName}>
+        <div class={props.className}>
+            <figure>
                 <a
                     href={props.link}
                     href.@if.live={!node.context.inBackend}
diff --git a/DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Overrides/TextWithImage.fusion b/DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Overrides/TextWithImage.fusion
index 5dafa8c5c..e4fb6b9a4 100644
--- a/DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Overrides/TextWithImage.fusion
+++ b/DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Overrides/TextWithImage.fusion
@@ -5,8 +5,9 @@ prototype(Neos.NodeTypes:TextWithImage) < prototype(Neos.NodeTypes:Image) {
         property = 'text'
     }
 
+    className.main = 'neos-nodetypes-textwithimage'
+
     renderer {
-        attributes.class = 'neos-nodetypes-textwithimage'
         content.@process.appendText = ${value + props.text}
     }
 }
diff --git a/DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Atoms/_Typography.scss b/DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Atoms/_Typography.scss
index 092ad07ba..5d575854b 100644
--- a/DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Atoms/_Typography.scss
+++ b/DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Atoms/_Typography.scss
@@ -3,7 +3,11 @@
  */
 
 p {
-	margin: 0 0 rs($basic-spacing);
+  margin: 0;
+
+  & + * {
+    margin-top: rs($basic-spacing);
+  }
 }
 
 b,
diff --git a/DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Main.scss b/DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Main.scss
index 04eeea911..59e54f558 100644
--- a/DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Main.scss
+++ b/DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Main.scss
@@ -73,6 +73,7 @@
 @import "Molecules/_EventList";
 @import "Molecules/_VidoeEmbed";
 @import "Molecules/_FormBuilder";
+@import "Molecules/_SemanticSection";
 
 // Organisms
 @import "Organisms/_SiteHeader";
diff --git a/DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Molecules/_Image.scss b/DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Molecules/_Image.scss
index 6dfc20fa9..189ce9ac8 100644
--- a/DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Molecules/_Image.scss
+++ b/DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Molecules/_Image.scss
@@ -1,15 +1,20 @@
 .neos-nodetypes-textwithimage,
 .neos-nodetypes-image {
-  @include u-cf();
+  display: flex;
+  gap: rs($half-spacing, $unit: rem) rs($basic-spacing, $unit: rem);
+  flex-direction: column;
+  align-items: start;
 
   figure {
     --background-color: none;
     --color: currentColor;
     background-color: var(--background-color);
     color: var(--color);
+    display: flex;
+    flex-direction: column;
 
-    & + * {
-      margin-top: 1em;
+    img {
+      display: block;
     }
 
     figcaption {
@@ -76,17 +81,17 @@
 }
 
 .neos-alignment-left {
-  text-align: left;
+  flex-direction: row;
 }
 
 .neos-alignment-center {
-  text-align: center;
+  align-items: center;
 }
 
 .neos-alignment-right {
-  text-align: right;
-}
+  flex-direction: row-reverse;
 
-.neos-nodetypes-image {
-  margin-bottom: rs($basic-spacing, $unit: rem);
+  figure {
+    justify-content: end;
+  }
 }
diff --git a/DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Molecules/_SemanticSection.scss b/DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Molecules/_SemanticSection.scss
new file mode 100644
index 000000000..a126f745f
--- /dev/null
+++ b/DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Molecules/_SemanticSection.scss
@@ -0,0 +1,7 @@
+.semantic-section {
+  > .neos-contentcollection {
+    display: flex;
+    flex-direction: column;
+    gap: rs($basic-spacing, $unit: rem);
+  }
+}