Added logos to tag photos.

assets/components/album/album.vue

@@ -32,6 +32,8 @@
 							class="item image"
 						>
 
+						<Logo :photo="item" />
+
 						<span
 							v-if="comments && item.title"
 							class="item-comment"
@@ -44,6 +46,8 @@
 </template>
 
 <script>
+import Logo from './logo.vue';
+
 function albumItems() {
 	return this.items
 		.filter(Boolean)
@@ -54,6 +58,9 @@ function albumItems() {
 }
 
 export default {
+	components: {
+		Logo,
+	},
 	props: {
 		items: {
 			type: Array,
@@ -156,8 +163,14 @@ export default {
 	margin: 0 0 .5rem 0;
 	overflow: hidden;
 
-	&:hover .item-comment {
-		transform: translateY(0);
+	&:hover {
+		.item-comment {
+			transform: translateY(0);
+		}
+
+		.album-logo {
+			opacity: 0;
+		}
 	}
 }
 

assets/components/album/logo.vue

@@ -0,0 +1,58 @@
+<template>
+	<router-link
+		v-if="photo.entity"
+		:to="`/${photo.entity.type}/${photo.entity.slug}`"
+	>
+		<img
+			v-if="favicon && photo.entity.type !== 'network' && !photo.entity.independent && photo.entity.parent"
+			:src="`/img/logos/${photo.entity.parent.slug}/favicon.png`"
+			class="album-logo"
+		>
+
+		<img
+			v-else-if="favicon"
+			:src="`/img/logos/${photo.entity.slug}/favicon.png`"
+			class="album-logo"
+		>
+
+		<img
+			v-else-if="photo.entity.type !== 'network' && !photo.entity.independent && photo.entity.parent"
+			:src="`/img/logos/${photo.entity.parent.slug}/${photo.entity.slug}.png`"
+			class="album-logo"
+		>
+
+		<img
+			v-else
+			:src="`/img/logos/${photo.entity.slug}/network.png`"
+			class="album-logo"
+		>
+	</router-link>
+</template>
+
+<script>
+module.exports = {
+	props: {
+		photo: {
+			type: Object,
+			default: null,
+		},
+		favicon: {
+			type: Boolean,
+			default: false,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.album-logo {
+	max-height: .75rem;
+	max-width: 5rem;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	padding: .5rem;
+	transition: transform .25s ease, opacity .25s ease;
+	filter: drop-shadow(0 0 2px var(--shadow-weak));
+}
+</style>

assets/components/tags/photos.vue

@@ -17,6 +17,8 @@
 				@load="$emit('load', $event)"
 			>
 
+			<Logo :photo="poster" />
+
 			<span
 				v-if="poster.comment"
 				class="photo-comment"
@@ -40,6 +42,8 @@
 				@load="$emit('load', $event)"
 			>
 
+			<Logo :photo="photo" />
+
 			<span
 				v-if="photo.comment"
 				class="photo-comment"
@@ -49,6 +53,8 @@
 </template>
 
 <script>
+import Logo from '../album/logo.vue';
+
 function poster() {
 	if (this.$store.state.ui.sfw) {
 		return this.tag.poster.sfw;
@@ -66,6 +72,9 @@ function photos() {
 }
 
 export default {
+	components: {
+		Logo,
+	},
 	props: {
 		tag: {
 			type: Object,
@@ -120,8 +129,14 @@ export default {
 		margin: 0 1rem 0 0;
 	}
 
-	&:hover .photo-comment {
-		transform: translateY(0);
+	&:hover {
+		.photo-comment {
+			transform: translateY(0);
+		}
+
+		.album-logo {
+			opacity: 0;
+		}
 	}
 }
 

assets/components/tags/tag.vue

@@ -63,7 +63,6 @@
 </template>
 
 <script>
-/* eslint-disable no-v-html */
 import { Converter } from 'showdown';
 
 import escapeHtml from '../../../src/utils/escape-html';

assets/components/tags/tile.vue

@@ -45,6 +45,11 @@
 				loading="lazy"
 				class="poster"
 			>
+
+			<Logo
+				:photo="tag.poster"
+				favicon
+			/>
 		</router-link>
 
 		<router-link
@@ -61,11 +66,16 @@
 </template>
 
 <script>
+import Logo from '../album/logo.vue';
+
 function sfw() {
 	return this.$store.state.ui.sfw;
 }
 
 export default {
+	components: {
+		Logo,
+	},
 	props: {
 		tag: {
 			type: Object,
@@ -93,11 +103,11 @@ export default {
 
 	&:hover {
 		.poster {
-			box-shadow: 0 0 3px var(--darken);
+			box-shadow: 0 0 2px var(--darken);
 		}
 
 		.title {
-			background: var(--primary);
+			color: var(--primary);
 		}
 	}
 }
@@ -111,14 +121,17 @@ export default {
     box-shadow: 0 0 3px var(--darken-weak);
 }
 
+.poster-link {
+	position: relative;
+}
+
 .title {
 	display: block;
     box-sizing: border-box;
-    padding: .5rem 1rem;
+    padding: .5rem;
 	overflow: hidden;
 	white-space: nowrap;
-	color: var(--text-light);
-	background: var(--profile);
+	color: var(--shadow-strong);
 	text-decoration: none;
 	font-size: .9rem;
     font-weight: bold;