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

assets/components/album/album.vue

@@ -11,22 +11,31 @@
 				/>
 			</div>
 
-			<div class="album-items">
+			<div
+				class="album-items"
+				:class="{ portrait }"
+			>
 				<div
 					v-for="item in items"
 					:key="item.id"
 					class="item-container"
 				>
 					<a
-						:href="`/media/${item.path}`"
+						:href="`${path}/${item.path}`"
 						class="item-link"
 						target="_blank"
 					>
 						<img
-							:src="`/media/${item.thumbnail}`"
+							:src="`${path}/${item.thumbnail}`"
+							:title="item.comment"
 							loading="lazy"
 							class="item image"
 						>
+
+						<span
+							v-if="comments && item.comment"
+							class="item-comment"
+						>{{ item.comment }}</span>
 					</a>
 				</div>
 			</div>
@@ -45,6 +54,18 @@ export default {
 			type: String,
 			default: null,
 		},
+		path: {
+			type: String,
+			default: '/media',
+		},
+		portrait: {
+			type: Boolean,
+			default: false,
+		},
+		comments: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	emits: ['close'],
 };
@@ -82,6 +103,7 @@ export default {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	text-align: center;
+	text-transform: capitalize;
 }
 
 .close {
@@ -105,6 +127,10 @@ export default {
 	padding: 1rem;
 	margin: auto 0;
 	overflow-y: auto;
+
+	&.portrait {
+		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+	}
 }
 
 .item-container {
@@ -114,14 +140,50 @@ export default {
 }
 
 .item-link {
+	position: relative;
 	height: 100%;
+	width: 100%;
 	margin: 0 0 1rem 0;
+	overflow: hidden;
+
+	&:hover .item-comment {
+		transform: translateY(0);
+	}
 }
 
 .item {
 	width: 100%;
 }
 
+.item-comment {
+	width: 100%;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	box-sizing: border-box;
+	padding: .5rem;
+	color: var(--text-light);
+	background: var(--shadow);
+	font-size: .9rem;
+	text-shadow: 0 0 3px var(--shadow);
+	white-space: normal;
+	line-height: 1.25;
+	transform: translateY(100%);
+	transition: transform .25s ease;
+}
+
+@media(max-width: $breakpoint-giga) {
+	.album-items.portrait {
+		grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+	}
+}
+
+@media(max-width: $breakpoint-mega) {
+	.album-items.portrait {
+		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+	}
+}
+
 @media(max-width: $breakpoint-kilo) {
 	.album-items {
 		grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
@@ -134,12 +196,6 @@ export default {
 	}
 }
 
-@media(max-width: $breakpoint-small) {
-	.album-items.portrait {
-		grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
-	}
-}
-
 @media(max-width: $breakpoint-micro) {
 	.album-items {
 		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));