Add Poster image from Shop page

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

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