From c14e7fbdb39a5686acc6c4e7600787957408beaf Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Fri, 16 Feb 2024 19:39:52 +0400
Subject: [PATCH] Ensure product images conditional rendering in astro file

Updated 'src/pages/products/[...slug].astro' to conditionally render product images only when they exist. Prevents potential errors or breaks in layout when there is an absence of either 'first' or 'second' blueprint images for a particular product.
---
 src/pages/products/[...slug].astro | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/pages/products/[...slug].astro b/src/pages/products/[...slug].astro
index 3210ec0..edbd11c 100644
--- a/src/pages/products/[...slug].astro
+++ b/src/pages/products/[...slug].astro
@@ -168,21 +168,25 @@ const { product } = Astro.props;
       <div
         class="relative left-12 top-12 z-10 -ml-12 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 lg:ml-0"
       >
-        <Image
-          src={product.data.blueprints.first}
-          class="h-full w-full object-cover object-center"
-          alt="Blueprint Illustration"
-          format={"avif"}
-        />
+        {product.data.blueprints.first &&
+            <Image
+                src={product.data.blueprints.first}
+                class="h-full w-full object-cover object-center"
+                alt="Blueprint Illustration"
+                format={"avif"}
+            />
+        }
       </div>
 
       <div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
-        <Image
-          src={product.data.blueprints.second}
-          class="h-full w-full object-cover object-center"
-          alt="Blueprint Illustration"
-          format={"avif"}
-        />
+        {product.data.blueprints.second &&
+            <Image
+                src={product.data.blueprints.second}
+                class="h-full w-full object-cover object-center"
+                alt="Blueprint Illustration"
+                format={"avif"}
+            />
+        }
       </div>
     </div>
   </div>