Using navigation for toggling album. Using album for tag photos. Fixed portrait albums.

assets/components/tags/tag.vue

@@ -20,9 +20,7 @@
 			<Scroll
 				v-if="hasMedia"
 				v-slot="scroll"
-				:expanded="expanded"
 				class="scroll-dark"
-				@expand="(state) => expanded = state"
 			>
 				<Photos
 					:tag="tag"
@@ -31,6 +29,21 @@
 				/>
 			</Scroll>
 
+			<button
+				v-if="tag.photos && tag.photos.length > 2"
+				class="album-toggle"
+				@click="$router.push({ hash: '#album' })"
+			><Icon icon="grid3" />View album</button>
+
+			<Album
+				v-if="showAlbum"
+				:items="[tag.poster, ...tag.photos]"
+				:title="tag.name"
+				path="/img"
+				class="portrait"
+				@close="$router.go(-1)"
+			/>
+
 			<FilterBar
 				ref="filter"
 				:fetch-releases="fetchReleases"
@@ -57,6 +70,7 @@ import escapeHtml from '../../../src/utils/escape-html';
 
 import FilterBar from '../filters/filter-bar.vue';
 import Photos from './photos.vue';
+import Album from '../album/album.vue';
 import Releases from '../releases/releases.vue';
 import Pagination from '../pagination/pagination.vue';
 import Scroll from '../scroll/scroll.vue';
@@ -83,6 +97,16 @@ async function fetchReleases() {
 	}
 }
 
+function showAlbum() {
+	return this.tag.photos?.length > 0 && this.$route.hash === '#album';
+}
+
+async function watchRoute(to, from) {
+	if (to.params.pageNumber !== from.params.pageNumber) {
+		await this.fetchReleases();
+	}
+}
+
 async function mounted() {
 	await this.fetchReleases();
 	this.pageTitle = this.tag.name;
@@ -92,6 +116,7 @@ export default {
 	components: {
 		FilterBar,
 		Releases,
+		Album,
 		Photos,
 		Pagination,
 		Scroll,
@@ -108,8 +133,11 @@ export default {
 			expanded: false,
 		};
 	},
+	computed: {
+		showAlbum,
+	},
 	watch: {
-		$route: fetchReleases,
+		$route: watchRoute,
 		'$store.state.ui.tagFilter': fetchReleases,
 	},
 	mounted,