Showing courtesy comments on actor album photos.

assets/components/actors/actor.vue

@@ -317,9 +317,10 @@
 
 			<Album
 				v-if="showAlbum"
-				:items="actor.photos"
+				:items="[actor.avatar, ...actor.photos]"
 				:title="actor.name"
 				:portrait="true"
+				:comments="true"
 				@close="$router.go(-1)"
 			/>
 

assets/components/album/album.vue

@@ -16,7 +16,7 @@
 				:class="{ portrait }"
 			>
 				<div
-					v-for="item in items"
+					v-for="item in albumItems"
 					:key="item.id"
 					class="item-container"
 				>
@@ -27,15 +27,15 @@
 					>
 						<img
 							:src="`${path}/${item.thumbnail}`"
-							:title="item.comment"
+							:title="item.title"
 							loading="lazy"
 							class="item image"
 						>
 
 						<span
-							v-if="comments && item.comment"
+							v-if="comments && item.title"
 							class="item-comment"
-						>{{ item.comment }}</span>
+						>{{ item.title }}</span>
 					</a>
 				</div>
 			</div>
@@ -44,6 +44,13 @@
 </template>
 
 <script>
+function albumItems() {
+	return this.items.map(item => ({
+		...item,
+		title: item.comment || (item.credit && `© ${item.credit}`) || (item.entity && `© ${item.entity.name}`),
+	}));
+}
+
 export default {
 	props: {
 		items: {
@@ -67,6 +74,9 @@ export default {
 			default: true,
 		},
 	},
+	computed: {
+		albumItems,
+	},
 	emits: ['close'],
 };
 </script>