Using media database for images.

assets/components/release/release.vue

@@ -4,24 +4,33 @@
             class="banner"
             @wheel.prevent="scrollBanner"
         >
-            <img
-                v-for="i in release.photos"
-                :key="`banner-${i}`"
-                :src="`/${release.site.id}/${release.id}/${i}.jpg`"
-                :alt="`Photo ${i}`"
-                class="banner-item"
+            <a
+                v-for="photo in photos"
+                :key="`banner-${photo.index}`"
+                :href="`/${photo.file}`"
+                target="_blank"
+                rel="noopener noreferrer"
+
             >
+                <img
+                    :src="`/${photo.file}`"
+                    :alt="`Photo ${photo.index}`"
+                    class="banner-item"
+                >
+            </a>
         </div>
 
         <h2 class="row title">{{ release.title }}</h2>
 
-        <a
-            :href="release.url"
-            :title="release.shootId || release.entryId"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="row date"
-        >{{ formatDate(release.date, 'MMMM D, YYYY') }}</a>
+        <span class="row">
+            <a
+                :href="release.url"
+                :title="release.shootId || release.entryId"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="date"
+            >{{ formatDate(release.date, 'MMMM D, YYYY') }}</a>
+        </span>
 
         <ul class="row actors">
             <li
@@ -30,7 +39,7 @@
                 class="actor"
             >
                 <a
-                    :href="`/actor/${actor.id}`"
+                    :href="`/actor/${actor.slug}`"
                     target="_blank"
                     rel="noopener noreferrer"
                     class="actor-link"
@@ -61,7 +70,7 @@
                 class="tag"
             >
                 <a
-                    :href="`/tag/${tag.tag}`"
+                    :href="`/tag/${tag.slug}`"
                     target="_blank"
                     rel="noopener noreferrer"
                     class="tag-link"
@@ -80,10 +89,20 @@ function scrollBanner(event) {
     event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
 }
 
+function photos() {
+    if (this.release) {
+        if (this.release.photos[0].role === 'poster') {
+            return this.release.photos.slice(1);
+        }
+
+        return this.release.photos;
+    }
+
+    return [];
+}
+
 async function mounted() {
     [this.release] = await this.$store.dispatch('fetchReleases', this.$route.params.releaseId);
-
-    console.log(this.release);
 }
 
 export default {
@@ -94,6 +113,7 @@ export default {
     },
     computed: {
         pageTitle,
+        photos,
     },
     mounted,
     methods: {