@extravirgin/payload-frontify-plugin

⚠️ BETA VERSION - This plugin is currently in beta. Use with caution in production environments.

A Payload CMS plugin that seamlessly integrates Frontify digital asset management into your Payload collections. Browse, select, and manage Frontify assets directly within the Payload admin interface.

Features

• 🎨 Native Frontify Integration - Browse and select assets directly from Frontify within Payload
• 🖼️ Rich Media Management - Support for images, videos, documents, and other file types
• 🎯 Focal Point Support - Preserve focal points set in Frontify
• 📝 Complete Metadata - Alt text, descriptions, and other metadata automatically synced
• 🔄 Background Sync - Automated asset synchronization via Payload jobs
• 🎛️ Flexible Configuration - Apply to any collection with granular control
• 📱 Responsive Interface - Modal-based asset selector works on all devices

Installation

npm install @extravirgin/payload-frontify-plugin
# or
yarn add @extravirgin/payload-frontify-plugin
# or
pnpm add @extravirgin/payload-frontify-plugin

Quick Start

1. Add the plugin to your Payload config:

import { buildConfig } from 'payload'
import { frontifyPlugin } from '@extravirgin/payload-frontify-plugin'

export default buildConfig({
  plugins: [
    frontifyPlugin({
      domain: 'your-frontify-domain.frontify.com',
      apiToken: 'your-frontify-api-token',
      collections: {
        media: true,
        // Add any collections where you want Frontify integration
      },
    }),
  ],
  // ... rest of your config
})

2. Get your Frontify credentials:
   • domain: Your Frontify domain (e.g., yourcompany.frontify.com)
   • apiToken: Your Frontify API token with appropriate permissions

Configuration

Plugin Options

export type FrontifyPluginConfig = {
  /**
   * Collections to enable Frontify integration for
   */
  collections: Partial<Record<CollectionSlug, true>>
  
  /**
   * Your Frontify domain (without https://)
   * @example "yourcompany.frontify.com"
   */
  domain: string
  
  /**
   * Frontify application client ID for finder authentication
   */
  clientId: string
  
  /**
   * Frontify API token
   */
  apiToken: string
  
  /**
   * Custom cron schedule for asset synchronization
   * @default "0 2 * * *" (daily at 2 AM)
   */
  customSchedule?: string
  
  /**
   * Disable the plugin
   * @default false
   */
  disabled?: boolean
}

Environment Variables

For security, it's recommended to use environment variables:

FRONTIFY_DOMAIN=yourcompany.frontify.com
FRONTIFY_CLIENT_ID=your-client-id
FRONTIFY_API_TOKEN=your-api-token

frontifyPlugin({
  domain: process.env.FRONTIFY_DOMAIN!,
  clientId: process.env.FRONTIFY_CLIENT_ID!,
  apiToken: process.env.FRONTIFY_API_TOKEN!,
  collections: {
    media: true,
  },
})

Usage

Once configured, the plugin automatically hooks into the upload enabled collection and wrapps all the upload fields. Users can:

1. Select Assets: Click the Frontify button to open the asset selector
2. Browse Library: Navigate through your Frontify asset library
3. Choose Assets: Select single or multiple assets (configurable)
4. Preview: See asset previews before final selection
5. Automatic Sync: Assets infos are automatically synced and stored in Payload
6. Frontify CDN: Assets are served via Frontify's CDN for optimal performance

Advanced Usage

Custom Field Configuration

You can customize how the Frontify field appears in your collections:

// In your collection config
{
  name: 'heroImage',
  label: 'Hero Image',
  type: 'frontifyMedia', // This type is added by the plugin
  required: true,
}

Background Synchronization

The plugin includes a scheduled background job that syncs asset metadata from Frontify. Ensure that the default queue in payloadcms properly setup

Beta Limitations

This plugin is currently in beta. Known limitations include:

• Limited error handling for network issues
• Asset refresh logic still in development

Contributing

Contributions are welcome! Please feel free to submit issues, feature requests, or pull requests.

Support

For questions, issues, or feature requests:

• Create an issue on GitHub
• Check the Payload CMS documentation
• Review the Frontify API documentation

Note: This plugin requires valid Frontify credentials and appropriate API permissions. Ensure your Frontify plan includes API access before installation.