traxxx/assets/components/tags/photos.vue

<template>
    <div class="photos">
        <ul class="nolist photos-inner">
            <li>
                <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>
            </li>

            <li
                v-for="photo in photos"
                :key="`photo-${photo.id}`"
            >
                <a
                    :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>
            </li>
        </ul>
    </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>
@import 'theme';

.photos {
    background: $profile;
    display: flex;
    padding: 0 1rem;
    overflow: hidden;

    &.compact {
        display: none;
        padding: 0 1rem 0 1rem;
        overflow-x: auto;

        .photos-inner {
            flex-shrink: 0;
        }

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

.poster,
.photo {
    width: 100%;
    margin: 0 0 .5rem 0;
}
</style>