enfrancais-app/src/components/nodes/NodeViewFigure.vue

<template>
  <figure class="node-view-figure mt-2 mb-4">
    <div class="node-view-img-wrapper">
      <img :src="image.url" :alt="image.alt">

      <button-expand @click="onImageExpand" v-b-modal="'modal-image-' + node.id" />
      <b-button variant="creation" class="btn-shadow btn-artwork" @click="onCreationClick">
        {{ $t('text.read-artwork') }}
      </b-button>
    </div>

    <figcaption class="mt-3">
      <node-view-title :node="node" tag="p" class="m-0" />
    </figcaption>
  </figure>
</template>

<script>
import { trim, toCommaList } from '@/helpers/common'
import { NodeViewTitle } from '@/components/nodes'


export default {
  name: 'NodeViewFigure',

  components: {
    NodeViewTitle
  },

  props: {
    node: { type: Object, required: true }
  },

  data () {
    return {
      image: undefined
    }
  },

  methods: {
    trim,
    toCommaList,

    onImageExpand () {
      this.$emit('expand-image', this.image)
    },

    onCreationClick () {
      this.$store.dispatch('OPEN_CREATION', this.node.id)
    }
  },

  created () {
    if (this.node.images && this.node.images.length) {
      const { url, alt, id } = this.node.images[0]
      this.image = { alt, id, url }
    }
  }
}
</script>

<style lang="scss" scoped>
.node-view-figure {
  .btn-artwork {
    position: absolute;
    right: $node-view-spacer-sm-x;
    bottom: $node-view-spacer-sm-y;
  }

  img {
    max-width: 100%;
  }
}
</style>