<template> <div class="photos" :class="{ avatar: !!actor.avatar, empty: actor.photos.length === 0, }" > <a v-if="actor.avatar" :href="getPath(actor.avatar)" target="_blank" rel="noopener noreferrer" class="avatar-link photo-link" > <img :src="getPath(actor.avatar, 'thumbnail')" :style="{ 'background-image': getBgPath(actor.avatar, 'lazy') }" :title="actor.avatar.credit && `© ${actor.avatar.credit}`" :width="actor.avatar.thumbnailWidth" :height="actor.avatar.thumbnailHeight" loading="lazy" class="avatar photo" @load="$emit('load', $event)" > </a> <a v-for="photo in photos" :key="`photo-${photo.id}`" :href="getPath(photo)" target="_blank" rel="noopener noreferrer" class="photo-link" > <img :src="getPath(photo, 'thumbnail')" :style="{ 'background-image': getBgPath(photo, 'lazy') }" :title="`© ${photo.credit || photo.entity.name}`" :width="photo.thumbnailWidth" :height="photo.thumbnailHeight" loading="lazy" class="photo" @load="$emit('load', $event)" > </a> </div> </template> <script> function photos() { return this.actor.photos.filter(photo => !photo.entropy || photo.entropy > 5.5); } function sfw() { return this.$store.state.ui.sfw; } export default { props: { actor: { type: Object, default: null, }, }, emits: ['load'], computed: { sfw, photos, }, }; </script> <style lang="scss" scoped> @import 'theme'; .photos { display: flex; box-sizing: border-box; padding: .5rem 1rem; font-size: 0; &.expanded { flex-wrap: wrap; justify-content: center; margin: 0; .photo-link { margin: 0 .5rem .5rem 0; } .photo { height: 18rem; } } &.empty { display: none; } .avatar-link { display: none; } } .photo-link { padding: 0 .5rem 0 0; &:last-child { padding: 0 1rem 0 0; } } .photo { height: 15rem; width: auto; box-shadow: 0 0 3px var(--darken-weak); object-fit: cover; background-position: center; background-size: cover; } @media(max-width: $breakpoint3) { .photos { &.empty.avatar { display: flex; } .avatar-link { display: inline-block; } &.expanded { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); } } } @media(max-width: $breakpoint0) { .photos.expanded { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); } } </style>