BUGFIX: Make it possible to properly align images again

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>

DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Overrides/Image.fusion

@@ -12,13 +12,6 @@ prototype(Neos.NodeTypes:Image) < prototype(Neos.Neos:ContentComponent) {
     }
 
     image = ${q(node).property('image')}
-    imageClassName = Neos.Fusion:DataStructure {
-        alignment = ${'neos-alignment-' + q(node).property('alignment')}
-        [email protected] = ${q(node).property('alignment')}
-
-        addImageStyle = ${'image--style image--style-' + q(node).property('imageStyle')}
-        [email protected] = ${!String.isBlank(q(node).property('imageStyle'))}
-    }
 
     loading = 'lazy'
     lightbox = true
@@ -52,51 +45,70 @@ prototype(Neos.NodeTypes:Image) < prototype(Neos.Neos:ContentComponent) {
         }
     }
 
-    [email protected] = 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}
-                    loading = ${props.loading}
-                    data-lightbox = Neos.Neos:ImageUri {
-                        asset = ${props.image}
-                        @if.enabled = ${props.lightbox}
-                        @if.notInBackend = ${!renderingMode.isEdit && !renderingMode.isPreview}
-                    }
-                    style = Neos.Fusion:Join {
-                        maxHeight = ${'max-height: ' + props.maximumHeight + 'px;'}
-                        [email protected] = ${props.maximumHeight}
-                    }
-                }
-            }
+    @private {
+        className = Neos.Fusion:DataStructure {
+            main = 'neos-nodetypes-image'
+
+            alignment = ${'neos-alignment-' + q(node).property('alignment')}
+            [email protected] = ${q(node).property('alignment')}
+        }
+
+        figureClassName = Neos.Fusion:DataStructure {
+            addImageStyle = ${'image--style image--style-' + q(node).property('imageStyle')}
+            [email protected] = ${!String.isBlank(q(node).property('imageStyle'))}
         }
-        fallback {
-            condition = ${!props.image && renderingMode.isEdit}
-            renderer = afx`
-                <img
-                    title="Dummy image"
-                    alt="Dummy image"
-                    class="neos-handle"
-                    loading={props.loading}
-                    src={StaticResource.uri('Neos.Neos', 'Public/Images/dummy-image.svg')}
-                />
-            `
+
+        thumbnail = ${props.image ? Neos.Seo.Image.createThumbnail(
+            props.image,
+            null,
+            props.width,
+            props.maximumWidth,
+            props.height,
+            props.maximumHeight,
+            props.allowCropping,
+            props.allowUpScaling,
+            false
+        ) : null}
+
+        imageSrc = Neos.Fusion:ResourceUri {
+            resource = ${private.thumbnail.resource}
+            @if.set = ${private.thumbnail}
+        }
+
+        image = Neos.Fusion:Case {
+            image {
+                condition = ${private.imageSrc}
+                renderer = afx`
+                    <img
+                        title={props.title}
+                        alt={props.alternativeText}
+                        style={'max-height: ' + props.maximumHeight + 'px;'}
+                        style.@if={props.maximumHeight}
+                        width={private.thumbnail.width || props.width}
+                        height={private.thumbnail.height || props.height}
+                        loading={props.loading}
+                        src={private.imageSrc}
+                    />
+                `
+            }
+            fallback {
+                condition = true
+                renderer = afx`
+                    <img
+                        title="Dummy image"
+                        alt="Dummy image"
+                        class="neos-handle"
+                        loading={props.loading}
+                        src={StaticResource.uri('Neos.Neos', 'Public/Images/dummy-image.svg')}
+                    />
+                `
+            }
         }
     }
 
     renderer = afx`
-        <div class="neos-nodetypes-image">
-            <figure class={props.imageClassName}>
+        <div class={private.className}>
+            <figure class={private.figureClassName}>
                 <a
                     href={props.link}
                     [email protected]={!renderingMode.isEdit}
@@ -105,9 +117,9 @@ prototype(Neos.NodeTypes:Image) < prototype(Neos.Neos:ContentComponent) {
                     title={props.title}
                     @if.set={props.link}
                 >
-                    {image}
+                    {private.image}
                 </a>
-                {!props.link ? image : ''}
+                {!props.link ? private.image : ''}
                 <figcaption @if.set={props.caption}>
                     {props.caption}
                 </figcaption>

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'
         [email protected] = ${value + props.text}
     }
 }

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,

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";

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,19 +81,19 @@
 }
 
 .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;
+  }
 }
 
 img[data-lightbox]:hover {

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);
+  }
+}