A Payload CMS plugin for integrating Frontify assets
npm install @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.
- 🎨 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
``bash`
npm install @extravirgin/payload-frontify-pluginor
yarn add @extravirgin/payload-frontify-pluginor
pnpm add @extravirgin/payload-frontify-plugin
1. Add the plugin to your Payload config:
`ts
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
`ts`
export type FrontifyPluginConfig = {
/**
* Collections to enable Frontify integration for
*/
collections: Partial
/**
* 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
}
For security, it's recommended to use environment variables:
`bash`
FRONTIFY_DOMAIN=yourcompany.frontify.com
FRONTIFY_CLIENT_ID=your-client-id
FRONTIFY_API_TOKEN=your-api-token
`ts`
frontifyPlugin({
domain: process.env.FRONTIFY_DOMAIN!,
clientId: process.env.FRONTIFY_CLIENT_ID!,
apiToken: process.env.FRONTIFY_API_TOKEN!,
collections: {
media: true,
},
})
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
You can customize how the Frontify field appears in your collections:
`ts``
// In your collection config
{
name: 'heroImage',
label: 'Hero Image',
type: 'frontifyMedia', // This type is added by the plugin
required: true,
}
The plugin includes a scheduled background job that syncs asset metadata from Frontify.
Ensure that the default queue in payloadcms properly setup
This plugin is currently in beta. Known limitations include:
- Limited error handling for network issues
- Asset refresh logic still in development
Contributions are welcome! Please feel free to submit issues, feature requests, or pull requests.
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.