jalil/achat-maison-albi-fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Ensure product images conditional rendering in astro file

Browse source 
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.
This commit is contained in:
Emil Gulamov 2024-02-16 19:39:52 +04:00
parent 502aee8b33
commit c14e7fbdb3
1 changed files with 16 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/pages/products/[...slug].astro
View file

@ -168,21 +168,25 @@ const { product } = Astro.props;
<div <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" 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"
> >
{product.data.blueprints.first &&
<Image <Image
src={product.data.blueprints.first} src={product.data.blueprints.first}
class="h-full w-full object-cover object-center" class="h-full w-full object-cover object-center"
alt="Blueprint Illustration" alt="Blueprint Illustration"
format={"avif"} format={"avif"}
/> />
}
</div> </div>
<div class="relative right-12 overflow-hidden rounded-xl shadow-xl"> <div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
{product.data.blueprints.second &&
<Image <Image
src={product.data.blueprints.second} src={product.data.blueprints.second}
class="h-full w-full object-cover object-center" class="h-full w-full object-cover object-center"
alt="Blueprint Illustration" alt="Blueprint Illustration"
format={"avif"} format={"avif"}
/> />
}
</div> </div>
</div> </div>
</div> </div>