Removed entity name from tag photo description and appending it dynamically.

assets/components/album/album.vue

@@ -35,7 +35,15 @@
 						<Logo :photo="item" />
 
 						<span
-							v-if="comments && item.title"
+							v-if="comments && item.title && item.entity"
+							class="item-comment"
+						>{{ item.title }} for <router-link
+							:to="`/${item.entity.type}/${item.entity.slug}`"
+							class="link"
+						>{{ item.entity.name }}</router-link></span>
+
+						<span
+							v-else-if="comments && item.title"
 							class="item-comment"
 						>{{ item.title }}</span>
 					</a>
@@ -194,6 +202,10 @@ export default {
 	line-height: 1.25;
 	transform: translateY(100%);
 	transition: transform .25s ease;
+
+	.link {
+		color: inherit;
+	}
 }
 
 @media(max-width: $breakpoint-giga) {

assets/components/tags/photos.vue

@@ -1,30 +1,5 @@
 <template>
 	<div class="photos">
-		<a
-			v-if="tag.poster"
-			:href="`/img/${poster.path}`"
-			:title="poster.comment"
-			target="_blank"
-			rel="noopener noreferrer"
-			class="photo-link"
-		>
-			<img
-				:src="`/img/${poster.thumbnail}`"
-				:style="{ 'background-image': `url(/img/${poster.lazy})` }"
-				:alt="tag.poster.comment"
-				class="poster"
-				loading="lazy"
-				@load="$emit('load', $event)"
-			>
-
-			<Logo :photo="poster" />
-
-			<span
-				v-if="poster.comment"
-				class="photo-comment"
-			>{{ poster.comment }}</span>
-		</a>
-
 		<a
 			v-for="photo in photos"
 			:key="`photo-${photo.id}`"
@@ -45,7 +20,15 @@
 			<Logo :photo="photo" />
 
 			<span
-				v-if="photo.comment"
+				v-if="photo.comment && photo.entity"
+				class="photo-comment"
+			>{{ photo.comment }} for <router-link
+				:to="`/${photo.entity.type}/${photo.entity.slug}`"
+				class="link"
+			>{{ photo.entity.name }}</router-link></span>
+
+			<span
+				v-else-if="photo.comment"
 				class="photo-comment"
 			>{{ photo.comment }}</span>
 		</a>
@@ -55,19 +38,19 @@
 <script>
 import Logo from '../album/logo.vue';
 
-function poster() {
-	if (this.$store.state.ui.sfw) {
-		return this.tag.poster.sfw;
+function photos() {
+	if (this.tag.poster && this.$store.state.ui.sfw) {
+		return [this.tag.poster].concat(this.tag.photos).map(photo => photo.sfw);
 	}
 
-	return this.tag.poster;
-}
-
-function photos() {
 	if (this.$store.state.ui.sfw) {
 		return this.tag.photos.map(photo => photo.sfw);
 	}
 
+	if (this.tag.poster) {
+		return [this.tag.poster].concat(this.tag.photos);
+	}
+
 	return this.tag.photos;
 }
 
@@ -83,7 +66,6 @@ export default {
 	},
 	emits: ['load'],
 	computed: {
-		poster,
 		photos,
 	},
 };
@@ -165,5 +147,9 @@ export default {
 	line-height: 1.25;
 	transform: translateY(100%);
 	transition: transform .25s ease;
+
+	.link {
+		color: inherit;
+	}
 }
 </style>

assets/components/tags/tile.vue

@@ -12,7 +12,7 @@
 				v-if="!lazy && !sfw"
 				:src="`/img/${tag.poster.thumbnail}`"
 				:style="{ 'background-image': `url(/img/${tag.poster.lazy})` }"
-				:title="tag.poster.comment"
+				:title="comment"
 				:alt="tag.name"
 				class="poster"
 			>
@@ -30,7 +30,7 @@
 				v-if="lazy && !sfw"
 				:src="`/img/${tag.poster.thumbnail}`"
 				:style="{ 'background-image': `url(/img/${tag.poster.lazy})` }"
-				:title="tag.poster.comment"
+				:title="comment"
 				:alt="tag.name"
 				loading="lazy"
 				class="poster"
@@ -86,6 +86,11 @@ export default {
 			default: false,
 		},
 	},
+	data() {
+		return {
+			comment: this.tag.poster?.entity ? `${this.tag.poster.comment} for ${this.tag.poster.entity.name}` : this.tag.poster.comment,
+		};
+	},
 	computed: {
 		sfw,
 	},