Improved campaign component, added various banners.

assets/components/album/album.vue

@@ -11,43 +11,56 @@
 				/>
 			</div>
 
-			<div
-				class="album-items"
-				:class="{ portrait }"
-			>
+			<div class="album-body">
 				<div
-					v-for="item in albumItems"
-					:key="item.id"
-					class="item-container"
+					v-if="entity || tag"
+					class="campaign-container"
 				>
-					<a
-						:href="getPath(item, null, { local })"
-						class="item-link"
-						target="_blank"
+					<Campaign
+						:entity="entity"
+						:tag="tag"
+						:min-ratio="3"
+					/>
+				</div>
+
+				<div
+					class="album-items"
+					:class="{ portrait }"
+				>
+					<div
+						v-for="item in albumItems"
+						:key="item.id"
+						class="item-container"
 					>
-						<img
-							:src="getPath(item, 'thumbnail', { local })"
-							:style="{ 'background-image': getBgPath(item, 'lazy', { local }) }"
-							:width="item.thumbnailWidth"
-							:height="item.thumbnailHeight"
-							:title="item.title"
-							loading="lazy"
-							class="item image"
+						<a
+							:href="getPath(item, null, { local })"
+							class="item-link"
+							target="_blank"
 						>
+							<img
+								:src="getPath(item, 'thumbnail', { local })"
+								:style="{ 'background-image': getBgPath(item, 'lazy', { local }) }"
+								:width="item.thumbnailWidth"
+								:height="item.thumbnailHeight"
+								:title="item.title"
+								loading="lazy"
+								class="item image"
+							>
 
-						<Logo :photo="item" />
+							<Logo :photo="item" />
 
-						<router-link
-							v-if="comments && item.title && item.entity"
-							:to="`/${item.entity.type}/${item.entity.slug}`"
-							class="item-comment"
-						>{{ item.title }} for {{ item.entity.name }}</router-link>
+							<router-link
+								v-if="comments && item.title && item.entity"
+								:to="`/${item.entity.type}/${item.entity.slug}`"
+								class="item-comment"
+							>{{ item.title }} for {{ item.entity.name }}</router-link>
 
-						<span
-							v-else-if="comments && item.title"
-							class="item-comment"
-						>{{ item.title }}</span>
-					</a>
+							<span
+								v-else-if="comments && item.title"
+								class="item-comment"
+							>{{ item.title }}</span>
+						</a>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -56,6 +69,7 @@
 
 <script>
 import Logo from './logo.vue';
+import Campaign from '../campaigns/campaign.vue';
 
 function albumItems() {
 	return this.items
@@ -69,6 +83,7 @@ function albumItems() {
 export default {
 	components: {
 		Logo,
+		Campaign,
 	},
 	props: {
 		items: {
@@ -91,6 +106,14 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		entity: {
+			type: Object,
+			default: null,
+		},
+		tag: {
+			type: Object,
+			default: null,
+		},
 	},
 	computed: {
 		albumItems,
@@ -146,15 +169,30 @@ export default {
 	}
 }
 
+.album-body {
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+	justify-content: center;
+	overflow-y: auto;
+}
+
+.campaign-container {
+	flex-shrink: 0;
+	text-align: center;
+}
+
 .album-items {
+	height: 0;
 	display: grid;
+	flex-grow: 1;
+	flex-shrink: 0;
 	align-items: center;
 	justify-content: center;
 	grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
 	grid-gap: 0 1rem;
 	padding: 1rem;
 	margin: auto 0;
-	overflow-y: auto;
 
 	&.portrait {
 		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));

assets/components/campaigns/campaign.vue

@@ -7,43 +7,79 @@
 	>
 		<img
 			v-if="campaign.banner.entity.type === 'network'"
-			:src="`/img/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.jpeg`"
+			:src="`/img/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.jpg`"
+			:width="campaign.banner.width"
+			:height="campaign.banner.height"
 			class="campaign-banner"
 		>
 
 		<img
 			v-if="campaign.banner.entity.type === 'channel' && campaign.banner.entity.parent?.type === 'network'"
-			:src="`/img/banners/${campaign.banner.entity.parent.slug}/${campaign.banner.entity.slug}/${campaign.banner.id}.jpeg`"
+			:src="`/img/banners/${campaign.banner.entity.parent.slug}/${campaign.banner.entity.slug}/${campaign.banner.id}.jpg`"
+			:width="campaign.banner.width"
+			:height="campaign.banner.height"
 			class="campaign-banner"
 		>
 	</a>
 </template>
 
 <script>
+function ratioFilter(banner) {
+	if (!banner) {
+		return false;
+	}
+
+	if (this.minHeight && banner.height < this.minHeight) {
+		return false;
+	}
+
+	if (this.maxHeight && banner.height > this.minHeight) {
+		return false;
+	}
+
+	if (this.minRatio && banner.ratio < this.minRatio) {
+		return false;
+	}
+
+	if (this.maxRatio && banner.ratio > this.maxRatio) {
+		return false;
+	}
+
+	return true;
+}
+
 function entityCampaign() {
 	const bannerCampaigns = this.entity.campaigns
 		.concat(this.entity.children?.flatMap(child => child.campaigns))
 		.concat(this.entity.parent?.campaigns)
-		.filter(campaignX => campaignX.banner?.ratio > 3);
+		.filter(campaignX => campaignX && this.ratioFilter(campaignX.banner));
 
 	if (bannerCampaigns.length > 0) {
-		return bannerCampaigns[Math.floor(Math.random() * bannerCampaigns.length)];
+		const randomCampaign = bannerCampaigns[Math.floor(Math.random() * bannerCampaigns.length)];
+
+		this.$emit('campaign', randomCampaign);
+		return randomCampaign;
 	}
 
+	this.$emit('campaign', null);
 	return null;
 }
 
 function tagCampaign() {
-	const campaignBanners = this.tag.banners.filter(banner => banner.campaigns.length > 0 && banner.ratio > 3);
+	const campaignBanners = this.tag.banners.filter(banner => banner.campaigns.length > 0 && this.ratioFilter(banner));
 	const banner = campaignBanners[Math.floor(Math.random() * campaignBanners.length)];
 
 	if (banner?.campaigns.length > 0) {
-		return {
+		const randomCampaign = {
 			...banner.campaigns[Math.floor(Math.random() * banner.campaigns.length)],
 			banner,
 		};
+
+		this.$emit('campaign', randomCampaign);
+		return randomCampaign;
 	}
 
+	this.$emit('campaign', null);
 	return null;
 }
 
@@ -56,6 +92,7 @@ function campaign() {
 		return this.tagCampaign();
 	}
 
+	this.$emit('campaign', null); // allow parent to toggle campaigns depending on availability
 	return null;
 }
 
@@ -69,12 +106,22 @@ export default {
 			type: Object,
 			default: null,
 		},
+		minRatio: {
+			type: Number,
+			default: null,
+		},
+		maxRatio: {
+			type: Number,
+			default: null,
+		},
 	},
+	emits: ['campaign'],
 	computed: {
 		campaign,
 	},
 	methods: {
 		entityCampaign,
+		ratioFilter,
 		tagCampaign,
 	},
 };
@@ -90,6 +137,7 @@ export default {
 }
 
 .campaign-banner {
+	height: auto;
 	max-height: 100%;
 	max-width: 100%;
 }

assets/components/entities/entity.vue

@@ -97,7 +97,10 @@
 			</Scroll>
 
 			<div class="campaign-container">
-				<Campaign :entity="entity" />
+				<Campaign
+					:entity="entity"
+					:min-ratio="3"
+				/>
 			</div>
 
 			<FilterBar
@@ -208,7 +211,7 @@ export default {
 	display: flex;
 	align-items: center;
 	box-sizing: border-box;
-	padding: .5rem 1rem;
+	padding: 1rem;
 	text-decoration: none;
 }
 

assets/components/tags/photos.vue

@@ -1,5 +1,13 @@
 <template>
 	<div class="photos">
+		<Campaign
+			:tag="tag"
+			:min-height="240"
+			:max-ratio="1.5"
+			class="photo-link photo"
+			@campaign="campaign => $emit('campaign', campaign)"
+		/>
+
 		<a
 			v-for="photo in photos"
 			:key="`photo-${photo.id}`"
@@ -37,6 +45,7 @@
 
 <script>
 import Logo from '../album/logo.vue';
+import Campaign from '../campaigns/campaign.vue';
 
 function photos() {
 	if (this.tag.poster && this.$store.state.ui.sfw) {
@@ -57,6 +66,7 @@ function photos() {
 export default {
 	components: {
 		Logo,
+		Campaign,
 	},
 	props: {
 		tag: {
@@ -64,7 +74,7 @@ export default {
 			default: null,
 		},
 	},
-	emits: ['load'],
+	emits: ['load', 'campaign'],
 	computed: {
 		photos,
 	},
@@ -150,4 +160,9 @@ export default {
 	transform: translateY(100%);
 	transition: transform .25s ease;
 }
+
+::v-deep(.campaign) .campaign-banner {
+	max-height: 15rem;
+	width: auto;
+}
 </style>

assets/components/tags/tag.vue

@@ -29,6 +29,7 @@
 					:tag="tag"
 					:class="{ expanded }"
 					@load="scroll.loaded"
+					@campaign="campaign => showBannerCampaign = !campaign"
 				/>
 			</Scroll>
 
@@ -43,12 +44,19 @@
 				:items="[tag.poster, ...tag.photos]"
 				:title="tag.name"
 				:local="true"
+				:tag="tag"
 				class="portrait"
 				@close="$router.replace({ hash: undefined })"
 			/>
 
-			<div class="campaign-container">
-				<Campaign :tag="tag" />
+			<div
+				v-if="showBannerCampaign"
+				class="campaign-container"
+			>
+				<Campaign
+					:tag="tag"
+					:min-ratio="3"
+				/>
 			</div>
 
 			<FilterBar
@@ -99,6 +107,10 @@ async function fetchReleases(scroll = true) {
 	this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
 	this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
 
+	if (this.hasMedia) {
+		this.showBannerCampaign = true;
+	}
+
 	if (scroll && this.$refs.filter) {
 		this.$refs.filter.$el.scrollIntoView();
 	}
@@ -139,6 +151,7 @@ export default {
 			pageTitle: null,
 			hasMedia: false,
 			expanded: false,
+			showBannerCampaign: false, // only show if photo campaign is not available
 		};
 	},
 	computed: {