Move tag posters and photos to media database.

assets/components/tile/tag.vue

@@ -4,15 +4,14 @@
         :title="tag.name"
         class="tile"
     >
+        <span class="title">{{ tag.name }}</span>
+
         <img
-            v-if="imageAvailable"
-            :src="`/img/tags/${tag.slug}_thumb.jpg`"
+            v-if="tag.poster"
+            :src="`/media/${tag.poster.thumbnail}`"
             :alt="tag.name"
             class="poster"
-            @error="imageAvailable = false"
         >
-
-        <span class="title">{{ tag.name }}</span>
     </a>
 </template>
 
@@ -24,11 +23,6 @@ export default {
             default: null,
         },
     },
-    data() {
-        return {
-            imageAvailable: true,
-        };
-    },
 };
 </script>
 
@@ -36,7 +30,8 @@ export default {
 @import 'theme';
 
 .tile {
-    background: $background;
+    color: $text-contrast;
+    background: $profile;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -53,20 +48,13 @@ export default {
 }
 
 .title {
-    color: $text;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
-    font-weight: bold;
     padding: .5rem 1rem;
-}
-
-.title {
-    color: $text;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    margin: 0;
+    font-weight: bold;
+    text-transform: capitalize;
 }
 </style>