Интеграция Bynder (DAM) с Optimizely

Bynder — это комплексная платформа управления цифровыми активами (DAM), которая позволяет компаниям эффективно управлять, хранить, организовывать и делиться своим цифровым контентом и брендинговыми активами, включая изображения, видео, документы и другие медиафайлы. Для получения дополнительной информации посетите связующее. Этот блог поможет вам интегрировать Bynder с платформой Optimilzey, обеспечить плавный процесс разработки и использовать обширные возможности Bynder для удовлетворения потребностей вашего проекта.

Чтобы интегрировать Bynder с Optimizely, выполните следующие действия:

Монтаж

Шаг 1: Добавьте в проект предоставленный службой поддержки пакет Bynder.xxxnupkg.

Шаг 2: Щелкните значок настройки «Консоль диспетчера пакетов» и добавьте источник пакета для Bynder из физического расположения каталога проекта.

Шаг 3: Добавьте ссылку на относительный путь к папке пакета Bynder в nuget.config потому что при запуске сборки и развертывания пакет NuGet выбирает расположение пакета из указанного источника.

Шаг 4: Выполните команду: Install-Package Bynder

Конфигурация:

Шаг 1: Зарегистрируйте Bynder в Startup.cs

Примечание:

• appsettings.json: Для настроек, специфичных для среды, этот файл обычно используется. Это хорошее место для хранения значений конфигурации, таких как BaseUrl, ClientIdи ClientSecret.
• Файлы рабочего процесса: При желании вы также можете управлять этими настройками в файлах рабочего процесса в зависимости от вашего развертывания или настройки CI/CD.
• Рекомендации в этой статье мы упростили для демонстрационных целей. Для производства обязательно следуйте лучшим практикам безопасности, таким как надежное хранение секретов и использование конфигураций, специфичных для среды

Шаг 2: Войдите в раздел CMS — Дополнения — Bynder

Шаг 3: Чтобы интегрировать Bynder с Optimizely и управлять активами, выполните следующие действия:

1. Получить токен авторизации:

   • Нажмите на «Получить токен» для инициирования процесса авторизации. Этот токен позволит вам добавлять элементы из Bynder DAM в Optimizely.

2. URL-адрес перенаправления в белый список:

   • Убедитесь, что ваш «RedirectUrl» находится в белом списке Bynder. Этот шаг имеет решающее значение для успешной аутентификации и авторизации.

3. Поиск неисправностей:

   • Если у вас возникли проблемы с добавлением активов Bynder, попробуйте удалить существующий токен и сгенерировать новый. Это часто решает проблемы с авторизацией.

Шаг 4: Настройка AllowedTypes и UIHints для активов Bynder и Optimizely на уровне свойств вы обычно делаете это в своем коде, где определяете свойства активов. Вот как вы можете это настроить:

[Display(GroupName = GroupNames.Content,Order = 10)]
[AllowedTypes(typeof(VideoFile), typeof(BynderVideoAsset))]
public virtual ContentReference? Video { get; set; }

[Display(GroupName = GroupNames.Content,    Order = 10)]
[UIHint(UIHint.Image)]
[AllowedTypes(typeof(ImageFile), typeof(BynderImageAsset))]
public virtual ContentReference? Image { get; set; }

Разрешенные типы:

• ВидеоФайл: Используйте этот вариант, если вы хотите оптимизировать или внести изменения в существующие видеоресурсы в Optimizely, не удаляя при этом какие-либо текущие функции.
• Файл изображения: Используйте это для оптимизации или обновления существующих графических ресурсов в Optimizely.
• БайндерВидеоАктив: используйте это для ссылки или использования видеоресурсов, хранящихся в Bynder, а не тех, которые загружены непосредственно в папку мультимедиа Optimizely.
• BinderImageAsset: используйте это для ссылки или использования графических ресурсов, хранящихся в Bynder, а не тех, которые загружены непосредственно в папку мультимедиа Optimizely.

UIHints – Для отображения миниатюры изображения можно использовать один из UIHints, представленных ниже.

• [UIHint(UIHint.Image)] – Это отобразит миниатюру изображения для обоих типов активов — Bynder и Optimizely. Это общая подсказка пользовательского интерфейса, которая применяется к любому типу активов, который вы указываете как изображение.
• [UIHint(Bynder.UIHints.Bynder)] – Это специально отобразит миниатюру изображения только для активов Bynder. Это не повлияет на активы Optimizely.

Примечание: Если вы не видите миниатюру изображения для ресурса Bynder, войдите на портал Bynder и отредактируйте изображение с разрешения. «Отметить как общедоступное»

Шаг 5: Загрузите свои медиаресурсы из Bynder или Optimizely и протестируйте.

Шаг 6: Bynder Jobs синхронизирует и обновляет содержимое.

Вот дополнительная помощь для понимания типа модели и рендеринга для других медиаресурсов Bynder:

Модель:

public class BynderBlock : BlockData
{
      [AllowedTypes(typeof(BynderImageAsset))]
      [Display(GroupName = GroupNames.Content, Order = 10)]
      [UIHint(Bynder.UIHints.Bynder)]
      public virtual ContentReference? BynderImage { get; set; }

      [AllowedTypes(typeof(BynderAudioAsset))]
      [Display(GroupName = GroupNames.Content, Order = 20)]
      public virtual ContentReference? BynderAudio { get; set; }

      [AllowedTypes(typeof(BynderVideoAsset))]
      [Display(GroupName = GroupNames.Content, Order = 30)]
      public virtual ContentReference? BynderVideo { get; set; }

      [AllowedTypes(typeof(BynderDocumentAsset))]
      [Display(GroupName = GroupNames.Content, Order = 40)]
      public virtual ContentReference? BynderDocument { get; set; }
}

Рендеринг:

@Html.PropertyFor(x => x.CurrentBlock.BynderImage)

OR
 
var url= Model.CurrentBlock.BynderImage.GetUrl()

Чтобы создать метод расширения, который считывает URL-адрес изображения из типов медиаресурсов Bynder, вы можете выполнить следующие действия:

1. Создайте статический класс для хранения метода расширения.
2. Определите метод расширения для извлечения URL-адреса из типа медиаресурса.

Вот пример того, как можно реализовать такой метод расширения:

public static string GetUrl(this ContentReference contentReference)
{
    if (!string.equals(contentReference.ProviderName, "bynder-assets-provider"))
    {
      return _urlResolver.GetUrl(contentReference);
    }

    IBynderAsset assetData = _contentLoader.Get(contentReference);
    if (assetData != null && assetData.AssetType.Equals("image"))
    {
        return assetData.ImageUrl;
    }
    else if (assetData != null && assetData.AssetType.Equals("video"))
    {
        var videoAsset = assetData as BynderVideoAsset;
        return videoAsset?.VideoPreviewURLs.FirstOrDefault() ?? string.Empty;
    }
    else if (assetData != null && assetData.AssetType.Equals("document"))
    {
        var documentAsset = assetData as BynderAssetData;
        return documentAsset?.TransformBaseUrl ?? documentAsset?.Original ?? string.Empty;
    }
    else if (assetData != null && assetData.AssetType.Equals("audio"))
    {
        var audioAsset = assetData as BynderAssetData;
        return audioAsset?.TransformBaseUrl ?? audioAsset?.Original ?? string.Empty;
    }

    return string.Empty;
}

Надеюсь, это руководство поможет вам настроить базовую конфигурацию для интеграции Bynder с Optimizely.

Пожалуйста, оставьте свой отзыв в поле для комментариев.

Спасибо за ваш визит!

22 июля 2024 г.