Інтеграція DAM-системи (Digital Asset Management)
DAM-система — централізоване сховище цифрових медіаактивів: зображень, відео, документів, брендових матеріалів. Інтеграція з сайтом дозволяє використовувати активи з DAM напрямку — без ручного завантаження файлів у CMS, з автоматичною оптимізацією форматів та версіюванням.
Популярні DAM-системи
- Bynder — enterprise, хороший API
- Cloudinary — CDN + трансформації зображень у реальному часі
- Canto — середній бізнес
- Brandfolder — брендові матеріали
- Widen Collective — enterprise
- ImageKit, Imgix — DAM + image CDN
Cloudinary: Інтеграція з трансформаціями
Cloudinary — найбільш технічно розвинутий варіант: не просто сховище, а CDN з on-the-fly трансформаціями.
// composer require cloudinary/cloudinary_php
Cloudinary::config([
'cloud_name' => env('CLOUDINARY_CLOUD'),
'api_key' => env('CLOUDINARY_KEY'),
'api_secret' => env('CLOUDINARY_SECRET'),
'secure' => true
]);
// Завантажити з тегами та папкою
$result = (new UploadApi())->upload(
$filePath,
['folder' => 'products', 'tags' => ['catalog', 'summer-2024']]
);
$publicId = $result['public_id'];
// → 'products/tshirt-blue-001'
URL-трансформації Cloudinary
Потужність Cloudinary — в URL-параметрах. Не потрібно зберігати кілька версій зображення:
// Оригінал
https://res.cloudinary.com/{cloud}/image/upload/products/tshirt.jpg
// Мініатюра 400×300, WebP, якість авто
https://res.cloudinary.com/{cloud}/image/upload/w_400,h_300,c_fill,f_webp,q_auto/products/tshirt.jpg
// Retina: 2x
https://res.cloudinary.com/{cloud}/image/upload/w_800,h_600,c_fill,f_webp,q_auto/products/tshirt.jpg
У React-компоненті генеруйте URL через SDK:
import { CloudinaryImage } from '@cloudinary/react';
import { fill } from '@cloudinary/url-gen/actions/resize';
<CloudinaryImage
publicId="products/tshirt"
transformation={[resize(fill().width(400).height(300))]}
/>
Bynder: API для вибору активів
$client = new \Bynder\Api\BynderClient(['base_url' => env('BYNDER_DOMAIN')]);
$client->getOauthProvider()->setAccessToken(env('BYNDER_TOKEN'));
// Пошук активів за тегами
$assets = $client->getAssetBankManager()->getMediaList([
'type' => 'image',
'keyword' => 'product',
'tags' => 'summer-2024'
])->wait();
Компонент вибору медіа у CMS
При інтеграції DAM у CMS з'являється "Вибрати з медіатеки" — діалог, що відкриває медіабібліотеку DAM прямо в інтерфейсі редактора. Bynder та Cloudinary надають готові віджети для вбудовування:
// Cloudinary Media Library Widget
cloudinary.openMediaLibrary({
cloud_name: CLOUD_NAME,
api_key: API_KEY,
max_files: 10,
multiple: true,
folder: {path: 'products', resource_type: 'image'}
}, {
insertHandler: (data) => {
data.assets.forEach(asset => {
// Вставити URL зображення в редактор
});
}
});
Права доступу до активів
DAM-системи підтримують права на рівні папок та тегів. Редактор сайту бачить тільки активи свого бренду/підрозділу. Експортні формати (web, print, social) обмежені для різних ролей.
Метаданні активів
З DAM можна отримувати alt-теги, авторські права, теги для SEO — ці дані автоматично заповняються при виборі зображення на сайті.
Терміни розробки: 2–4 тижні для інтеграції Cloudinary або Bynder з віджетом вибору у CMS.