traxxx/assets/components/tags/photos.vue

<template>
	<div class="photos">
		<a
			v-if="tag.poster"
			:href="`/img/${poster.path}`"
			:title="poster.comment"
			target="_blank"
			rel="noopener noreferrer"
			class="photo-link"
		>
			<img
				:src="`/img/${poster.thumbnail}`"
				:alt="tag.poster.comment"
				class="poster"
			>
		</a>

		<a
			v-for="photo in photos"
			:key="`photo-${photo.id}`"
			:title="photo.comment"
			:href="`/img/${photo.path}`"
			target="_blank"
			rel="noopener noreferrer"
			class="photo-link"
		>
			<img
				:src="`/img/${photo.thumbnail}`"
				:alt="photo.comment"
				class="photo"
			>
		</a>
	</div>
</template>

<script>
function poster() {
	if (this.$store.state.ui.sfw) {
		return this.tag.poster.sfw;
	}

	return this.tag.poster;
}

function photos() {
	if (this.$store.state.ui.sfw) {
		return this.tag.photos.map(photo => photo.sfw);
	}

	return this.tag.photos;
}

export default {
	props: {
		tag: {
			type: Object,
			default: null,
		},
	},
	computed: {
		poster,
		photos,
	},
};
</script>

<style lang="scss" scoped>
.photos {
	width: 100%;
	padding: 1rem 1rem 0 1rem;
	box-sizing: border-box;
	overflow-x: auto;
	white-space: nowrap;
    scrollbar-width: none;
	scroll-behavior: smooth;
    font-size: 0;

    &::-webkit-scrollbar {
        display: none;
    }

	&.expanded {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding: 0 0 0 1rem;

		.photo-link {
			margin: 0 .5rem .5rem 0;
		}

		.poster,
		.photo {
			max-height: 18rem;
		}
	}
}

.photo-link:not(:last-child) {
	margin: 0 .5rem 0 0;
}

.poster,
.photo {
	max-height: 15rem;
	max-width: 100%;
	box-shadow: 0 0 3px var(--shadow-weak);
}
</style>