<template> <router-link v-if="photo.entity" v-tooltip="photo.entity.name" :to="`/${photo.entity.type}/${photo.entity.slug}`" > <img v-if="favicon && photo.entity.type !== 'network' && !photo.entity.independent && photo.entity.parent" :src="`/img/logos/${photo.entity.parent.slug}/favicon.png`" class="album-logo favicon" > <img v-else-if="favicon" :src="`/img/logos/${photo.entity.slug}/favicon.png`" class="album-logo favicon" > <img v-else-if="photo.entity.type !== 'network' && !photo.entity.independent && photo.entity.parent" :src="`/img/logos/${photo.entity.parent.slug}/${photo.entity.slug}.png`" class="album-logo" > <img v-else :src="`/img/logos/${photo.entity.slug}/network.png`" class="album-logo" > </router-link> </template> <script> module.exports = { props: { photo: { type: Object, default: null, }, favicon: { type: Boolean, default: false, }, }, }; </script> <style lang="scss" scoped> .album-logo { max-height: .75rem; max-width: 5rem; position: absolute; right: 0; bottom: 0; padding: .5rem; transition: transform .25s ease, opacity .25s ease; filter: drop-shadow(0 0 2px var(--shadow-weak)); } @media(max-width: $breakpoint-small) { .album-logo:not(.favicon) { max-height: .5rem; max-width: 3.5rem; } } </style>