Using media database for images.

assets/components/home/home.vue

@@ -33,8 +33,8 @@
                         class="scene-link"
                     >
                         <img
-                            v-if="release.photos > 0"
-                            :src="`/${release.site.id}/${release.id}/1.jpg`"
+                            v-if="release.photos.length > 0"
+                            :src="`/${release.photos[0].file}`"
                             :alt="release.title"
                             class="scene-thumbnail"
                         >
@@ -65,7 +65,7 @@
                                 class="scene-actor"
                             >
                                 <a
-                                    :href="`/actor/${actor.id}`"
+                                    :href="`/actor/${actor.slug}`"
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     class="actor-link"
@@ -85,7 +85,7 @@
                                 class="scene-tag"
                             >
                                 <a
-                                    :href="`/tag/${tag.tag}`"
+                                    :href="`/tag/${tag.slug}`"
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     class="tag-link"
@@ -100,6 +100,10 @@
 </template>
 
 <script>
+function pageTitle() {
+    return '';
+}
+
 async function mounted() {
     this.releases = await this.$store.dispatch('fetchReleases');
 }
@@ -110,6 +114,9 @@ export default {
             releases: [],
         };
     },
+    computed: {
+        pageTitle,
+    },
     mounted,
 };
 </script>

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: {