traxxx/assets/components/tile/actor.vue

<template>
    <div
        v-if="actor"
        class="actor"
    >
        <a
            :href="`/actor/${actor.slug}`"
            class="link"
        >
            <span
                v-tooltip.top="actor.name"
                class="name"
            >{{ actor.name }}</span>

            <img
                v-if="actor.avatar"
                :src="`/media/${actor.avatar.thumbnail || actor.avatar}`"
                class="avatar"
            >

            <span
                v-else
                class="avatar"
            >No photo</span>
        </a>
    </div>
</template>

<script>
export default {
    props: {
        actor: {
            type: Object,
            default: null,
        },
    },
};
</script>

<style lang="scss" scoped>
@import 'theme';

.actor {
    width: 10rem;
    background: $background;
    display: inline-block;
    margin: 0 .5rem .5rem 0;
    box-shadow: 0 0 3px $shadow-weak;
}

.link {
    color: $link;
    text-decoration: none;
    text-align: center;

    &:hover {
        color: $primary;
    }
}

.name {
    display: block;
    padding: .5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}

.avatar {
    color: $shadow-weak;
    background: $shadow-hint;
    height: 12rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    object-position: 50% 0;
}
</style>