Improved campaign component, added various banners.

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: {