Vue-Cloudinary-Image-Statamic

Statamic adapter for @teamnovu/nuxt-cloudinary-image and @teamnovu/vue-cloudinary-image.

Features

✅ Handles Statamic Image Assets
✅ Automatically applies alt attribute
✅ Automatically applies Statamic focal point

Prerequisites

Install and configure either @teamnovu/nuxt-cloudinary-image or @teamnovu/vue-cloudinary-image first. Visit these projects for instructions.

Make sure the asset includes width, height and focus data.

Example Statamic CustomAsset:

<?php

namespace App\Entries;

use Statamic\Assets\Asset;

class CustomAsset extends Asset
{
    protected function shallowAugmentedArrayKeys()
    {
        return ['id', 'url', 'permalink', 'api_url', 'extension', 'is_image', 'focus', 'width', 'height'];
    }
}

Example Statamic GraphQL fragment:

  fragment AssetImage on AssetInterface {
    id
    url
    permalink
    extension
    is_image
    focus_css
    width
    height
    ... on Asset_Assets {
      alt
    }
  }

Installation

yarn add @teamnovu/vue-cloudinary-image-statamic

or

npm i @teamnovu/vue-cloudinary-image-statamic

For vue2 use a version < v1.0.0

Setup

Global

import AppImage from '@teamnovu/vue-cloudinary-image-statamic'

Vue.use(AppImage);

Local

<script>
import AppImage from '@teamnovu/vue-cloudinary-image-statamic'

export default {
  components: {
    AppImage,
  }
}
<script>

Usage

<!-- just provide the statamic asset object as parameter -->
<AppImage :src="data.image" />

The component uses the data

Example

Minimal example

<!-- just provide the statamic asset object as parameter -->
<AppImage :src="data.image" />

Simple Avatar Crop

<AppImage
  :src="data.image"
  :aspect-ratio="1"
  crop="thumb"
  focus="face"
/>

Overwrite alt attribute

<AppImage
  :src="data.image"
  alt="this is used instead of the asset alt attribute"
/>