Showing tag poster and photos on tag page. Improved campaign fallback logic, fixes wrong ratio selected.

pages/tags/+Page.vue

@@ -89,18 +89,10 @@
 								>
 							</a>
 
-							<a
-								v-if="tag.poster?.entity"
-								:href="`/${tag.poster.entity.type}/${tag.poster.entity.slug}`"
-								class="favicon-link"
-							>
-								<img
-									:src="!tag.poster.entity.parent || tag.poster.entity.isIndependent ? `/logos/${tag.poster.entity.slug}/favicon.png` : `/logos/${tag.poster.entity.parent.slug}/favicon.png`"
-									:alt="tag.poster.entity.name"
-									:title="tag.poster.entity.name"
-									class="favicon"
-								>
-							</a>
+							<Logo
+								:photo="tag.poster"
+								:favicon="true"
+							/>
 						</div>
 
 						<a
@@ -120,6 +112,8 @@ import { ref, onMounted, inject } from 'vue';
 import navigate from '#/src/navigate.js';
 import events from '#/src/events.js';
 
+import Logo from '#/components/tags/logo.vue';
+
 const pageContext = inject('pageContext');
 const showcase = pageContext.pageProps.tagShowcase;
 

pages/tags/@tagId/+Page.vue

@@ -17,11 +17,17 @@
 				v-html="description"
 			/>
 
+			<Photos
+				v-if="tag.poster || tag.photos.length > 0"
+				:tag="tag"
+			/>
+
 			<Domains
 				:path="`/tag/${tag.slug}`"
 				:domains="['scenes', 'movies']"
 				:domain="domain"
 				class="domains-bar"
+				:class="{ light: tag.poster || tag.photos.length }"
 			/>
 
 			<Scenes v-if="domain === 'scenes'" />
@@ -33,6 +39,7 @@
 <script setup>
 import { inject } from 'vue';
 
+import Photos from '#/components/tags/photos.vue';
 import Scenes from '#/components/scenes/scenes.vue';
 import Movies from '#/components/movies/movies.vue';
 import Domains from '#/components/domains/domains.vue';
@@ -69,6 +76,7 @@ const domain = pageContext.routeParams.domain;
 	display: flex;
 	align-items: center;
 	padding: .25rem 1rem;
+	margin-bottom: -1px; /* for some reason there's a gap between description */
 	color: var(--text-light);
 	background: var(--grey-dark-40);
 }
@@ -94,4 +102,9 @@ const domain = pageContext.routeParams.domain;
 	background: var(--grey-dark-40);
 	line-height: 1.5;
 }
+
+.domains-bar.light {
+	background: var(--background-base-10);
+	border-bottom: solid 1px var(--shadow-weak-40);
+}
 </style>

pages/tags/@tagId/+onBeforeRender.js

@@ -43,6 +43,11 @@ export async function onBeforeRender(pageContext) {
 		fetchTagsById([tagSlug], {}, pageContext.user),
 		fetchReleases(pageContext),
 		getRandomCampaigns([
+			{
+				tagSlugs: [tagSlug],
+				minRatio: 0.75,
+				maxRatio: 1.25,
+			},
 			{ tagSlugs: [tagSlug], minRatio: 3 },
 			{ tagSlugs: [tagSlug], minRatio: 3 },
 			pageContext.routeParams.domain === 'scenes'
@@ -55,7 +60,7 @@ export async function onBeforeRender(pageContext) {
 	const description = tag.description && md.renderInline(tag.description);
 
 	const campaignIndex = getCampaignIndex(releases.length);
-	const [metaCampaign, paginationCampaign, sceneCampaign] = campaigns;
+	const [photosCampaign, metaCampaign, paginationCampaign, sceneCampaign] = campaigns;
 
 	return {
 		pageContext: {
@@ -67,6 +72,7 @@ export async function onBeforeRender(pageContext) {
 			},
 			campaigns: {
 				index: campaignIndex,
+				photos: photosCampaign,
 				meta: metaCampaign,
 				scenes: releases.length > 5 && sceneCampaign,
 				pagination: paginationCampaign,