Get the artists as individual images on the single events page and fi…

…x the image url to work with the ArtistItem component

src/routes/events/[slug].json.js

@@ -19,7 +19,7 @@ export async function get(req, res, next) {
       artists: e.artists.map(artist => ({
         id: artist.artists_id.id,
         name: artist.artists_id.artist_name,
-        imageUrls: artist.artists_id.image.data
+        imageUrls: artist.artists_id.image ? artist.artists_id.image.data.thumbnails[3].url : "placeholder_artists.jpeg"
       }))
     })
 

src/routes/events/[slug].svelte

@@ -13,6 +13,8 @@
 
 <script>
   import HeroModule from "../../components/UI/ContentModules/HeroModule.svelte";
+  import ArtistItem from "../../components/UI/ArtistItem.svelte";
+
   export let event;
 
   let heroContent = {};
@@ -43,6 +45,10 @@
     align-items: center;
     position: relative;
   }
+
+  h2 {
+    text-align: center
+  }
 </style>
 
 <svelte:head>
@@ -71,9 +77,13 @@
       <h2>Time: {event.endtime}</h2>
     </div>
     <div class="column is-4">
-      {#each event.artists as artist}
-        <a rel="prefetch" href={`/artists/${artist.id}`}>{artist.name}</a>
-      {/each}
+
     </div>
   </div>
 </div>
+<h2>Artists that supported this event</h2>
+<div class="columns is-multiline">
+  {#each event.artists as artist}
+    <ArtistItem {artist} />
+  {/each}
+</div>