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 for the current locale *
✅ Automatically applies Statamic focal point

* For the i18n support, alt_{langcode} fields are assumed on asset blueprint and data. It will fallback to alt if not available.

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, focus and the different alt_{langcode} 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', 'alt_de', 'alt_fr'];
}
}
`

Example Statamic GraphQL fragment:
`graphql
fragment AssetImage on AssetInterface {
id
url
permalink
extension
is_image
focus_css
width
height
... on Asset_Assets {
alt_de
alt_fr
}
}
`

Installation

`shell
yarn add @teamnovu/vue-cloudinary-image-statamic
`
or
`shell
npm i @teamnovu/vue-cloudinary-image-statamic
`

For vue2 use a version < v1.0.0

Setup

$3


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

Vue.use(AppImage);
`

$3


`html