From 439cdaee98e18795f2df9a471ce3755d780001b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 3 Nov 2021 22:01:38 +0100
Subject: [PATCH] Add Poster image from Shop page

---
 src/components/molecules/Poster.svelte | 20 +++++++++++++++++---
 src/routes/shop/__layout.svelte        |  7 +++++--
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/molecules/Poster.svelte b/src/components/molecules/Poster.svelte
index 242d399..fc0c9b2 100644
--- a/src/components/molecules/Poster.svelte
+++ b/src/components/molecules/Poster.svelte
@@ -1,15 +1,29 @@
 <script lang="ts">
     import Button from '$components/atoms/Button.svelte'
+    import Image from '$components/atoms/Image.svelte'
 
-    export let slug: string
+    export let location: { name: string, slug: string }
+    export let image: any
 </script>
 
 <div class="poster">
-    <img src="https://picsum.photos/326/475" width={326} height={475} alt="blob">
+    {#if image}
+        <Image
+            id={image.id}
+            sizeKey="product"
+            sizes={{
+                small: { width: 326 },
+                medium: { width: 326 },
+                large: { width: 326 },
+            }}
+            ratio={1.5}
+            alt="Poster of {location.name}"
+        />
+    {/if}
     <div class="buttons">
         <Button
             size="xsmall"
-            url="/shop/poster-{slug}"
+            url="/shop/poster-{location.slug}"
             text="View"
         />
         <Button
diff --git a/src/routes/shop/__layout.svelte b/src/routes/shop/__layout.svelte
index 69ecec5..ef96a95 100644
--- a/src/routes/shop/__layout.svelte
+++ b/src/routes/shop/__layout.svelte
@@ -71,8 +71,11 @@
     <section class="shop-page__posters grid">
         <h3>View all of our available posters</h3>
         <div class="set">
-            {#each posters as { location }}
-                <Poster slug={location.slug} />
+            {#each posters as { location, photos_product }}
+                <Poster
+                    location={location}
+                    image={photos_product.length && photos_product[1].directus_files_id}
+                />
             {/each}
         </div>
         <div class="subscribe">