From 77f7678f08ac9667bd5a962b75419906d7cdcb43 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Sat, 24 Jan 2026 04:00:29 +0000
Subject: [PATCH] fix(blox): restore side-by-side layout in cta-image-paragraph
 block

Previous commits broke the 2-column grid layout by prematurely closing
the grid container after the image, leaving the text content outside
the grid. Now both image and text are properly wrapped within the same
md:grid md:grid-cols-2 container.

Fixes regression where image and paragraph appeared stacked vertically
instead of side-by-side on medium+ screens.
---
 .../blox/blox/cta-image-paragraph/block.html  | 59 +++++++++----------
 1 file changed, 29 insertions(+), 30 deletions(-)

diff --git a/modules/blox/blox/cta-image-paragraph/block.html b/modules/blox/blox/cta-image-paragraph/block.html
index 1f19eec1..7e10c216 100644
--- a/modules/blox/blox/cta-image-paragraph/block.html
+++ b/modules/blox/blox/cta-image-paragraph/block.html
@@ -65,39 +65,38 @@
   {{ end }}
   
   {{ $image_to_render := $image_resource }}
-  {{ if $image_to_render }}
-  <div class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
-    {{ if ne $image_to_render.MediaType.SubType "gif" }}
-      {{ $responsive := partial "functions/process_responsive_image.html" (dict 
-          "image" $image_to_render 
-          "mode" "fit"
-          "sizes" (slice 400 600 800 1200)
-      ) }}
+  <div class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 {{ if or $image_to_render $image_url }}md:grid md:grid-cols-2{{ end }} sm:py-16 lg:px-6">
+    {{ if or $image_to_render $image_url }}
+    {{ if $image_to_render }}
+      {{ if ne $image_to_render.MediaType.SubType "gif" }}
+        {{ $responsive := partial "functions/process_responsive_image.html" (dict 
+            "image" $image_to_render 
+            "mode" "fit"
+            "sizes" (slice 400 600 800 1200)
+        ) }}
+        <img class="w-full" 
+             srcset="{{ $responsive.srcset }}"
+             sizes="(max-width: 768px) 100vw, 50vw"
+             src="{{ $responsive.fallback.RelPermalink }}" 
+             width="{{ $responsive.fallback.Width }}"
+             height="{{ $responsive.fallback.Height }}"
+             alt="{{$title | plainify}}" {{ if (modBool $idx 2)}}style="order: 1"{{end}}>
+      {{ else }}
+        <img class="w-full" 
+             src="{{$image_to_render.RelPermalink}}" 
+             width="{{$image_to_render.Width}}"
+             height="{{$image_to_render.Height}}"
+             alt="{{$title | plainify}}" {{ if (modBool $idx 2)}}style="order: 1"{{end}}>
+      {{ end }}
+    {{ else if $image_url }}
+      {{ $is_external := or (strings.HasPrefix $image_url "http://") (strings.HasPrefix $image_url "https://") }}
       <img class="w-full" 
-           srcset="{{ $responsive.srcset }}"
-           sizes="(max-width: 768px) 100vw, 50vw"
-           src="{{ $responsive.fallback.RelPermalink }}" 
-           width="{{ $responsive.fallback.Width }}"
-           height="{{ $responsive.fallback.Height }}"
-           alt="{{$title | plainify}}" {{ if (modBool $idx 2)}}style="order: 1"{{end}}>
-    {{ else }}
-      <img class="w-full" 
-           src="{{$image_to_render.RelPermalink}}" 
-           width="{{$image_to_render.Width}}"
-           height="{{$image_to_render.Height}}"
+           src="{{ if $is_external }}{{ $image_url }}{{ else }}{{ $image_url | relURL }}{{ end }}"
            alt="{{$title | plainify}}" {{ if (modBool $idx 2)}}style="order: 1"{{end}}>
     {{ end }}
-  </div>
-  {{ else if $image_url }}
-    <div class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
-    {{ $is_external := or (strings.HasPrefix $image_url "http://") (strings.HasPrefix $image_url "https://") }}
-    <img class="w-full" 
-         src="{{ if $is_external }}{{ $image_url }}{{ else }}{{ $image_url | relURL }}{{ end }}"
-         alt="{{$title | plainify}}" {{ if (modBool $idx 2)}}style="order: 1"{{end}}>
-    </div>
-  {{ else }}
-    {{ warnf "%s uses the `cta-image-paragraph` blox which specifies a non-existent `image` at `assets/%s`. Skipping this item." $page.File.Path $image_path }}
-  {{ end }}
+    {{ else if $image_name }}
+      {{ warnf "%s uses the `cta-image-paragraph` blox which specifies a non-existent `image` at `assets/%s`. Rendering text only." $page.File.Path $image_path }}
+    {{ end }}
     <div class="mt-4 md:mt-0">
       <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">{{$title}}</h2>
       <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">{{$text}}</p>