Scraping from Cherry Pimps when available. Showing cover in movie tile.

assets/components/movies/movies.vue

@@ -43,6 +43,6 @@ export default {
 
 .tiles {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, 12rem);
+	grid-template-columns: repeat(auto-fill, 15rem);
 }
 </style>

assets/components/movies/tile.vue

@@ -1,5 +1,19 @@
 <template>
 	<div class="tile">
+		<div class="cover">
+			<img
+				v-if="movie.covers[0]"
+				:src="`/media/${movie.covers[0].thumbnail}`"
+				class="front"
+			>
+
+			<img
+				v-if="movie.covers[1]"
+				:src="`/media/${movie.covers[1].thumbnail}`"
+				class="back"
+			>
+		</div>
+
 		<div class="details">{{ movie.entity.name }}</div>
 		<h3 class="title">{{ movie.title }}</h3>
 	</div>
@@ -18,8 +32,11 @@ export default {
 
 <style lang="scss" scoped>
 .tile {
+	display: flex;
+	flex-direction: column;
 	background: var(--background);
 	box-shadow: 0 0 3px var(--darken);
+	font-size: 0;
 }
 
 .details {
@@ -30,6 +47,26 @@ export default {
 	font-weight: bold;
 }
 
+.cover {
+	img {
+		width: 100%;
+	}
+
+	.back {
+		display: none;
+	}
+
+	&:hover {
+		.back {
+			display: block;
+		}
+
+		.front {
+			display: none;
+		}
+	}
+}
+
 .title {
 	padding: 1rem;
 	margin: 0;