How to work with Cloudinary image/video programatically

How to use Cloduinary integration in Form API?

There is a custom form element cloudinary_media_library.

$form['image'] = [
  '#type' => 'cloudinary_media_library',
  '#resource_type' => 'image',
  '#title' => $this->t('Image'),
  '#description' => $this->t('Choose an image from cloudinary media library.'),
];

The above form element outputs a textfield and button to open Cloudinary media library.

By default, preview image is not available unless you toggle the value:

$form['image'] = [
  ...
  '#preview' => TRUE,
];

Preview is available for PDF documents, video, images. Here is how form element looks like with preview and filled in value.

The available resource types are:

• image
• video
• raw

How to render value from the custom form element?

In results, you will store the value something like cloudinary:image:upload:cld-sample-4.

There are two ways how to render this value:

1. Using Cloudinary base tag (available with PHP SDK).

Using PHP SDK methods to build an image with any available transformation https://cloudinary.com/documentation/php_image_manipulation

$value = 'cloudinary:image:upload:cld-sample-4';
$tag = \Drupal::service('cloudinary_media_library_widget.asset_generator')->getBaseTag($value);

// Returns <img> tag with generated asset url.
$html = (string) $tag
  ->resize(Resize::fill()->width(400))
  ->format(Format::auto());

2. Using Drupal way of rendering (custom render element).

Using custom service that returns render element cloudinary_image or cloudinary_video

$value = 'cloudinary:image:upload:cld-sample-4';

// Optional raw transformation.
$t = 'c_fill,w_400';

// Returns a renderable array.
$build['image'] = \Drupal::service('cloudinary_media_library_widget.asset_generator')->renderAsset($value, $t);

// Add extra values.
$build['image']['#alt'] = t('Sample image');

OR directly using a render element.

$build['image'] = [
 '#type' => 'cloudinary_image',
 '#public_id' => 'cld-sample',
 '#breakpoints' => FALSE, // Optional. By default it's enabled and will be used if it's configured in the global module settings.
 '#alt' => t('Sample image'),
 '#title' => t('Demo image caption'),
 '#default_transformation' => FALSE, // Optional. By default, the default image optiomizations will be applied automatically if it's available in the global module settings.
 '#raw_transformation' => 'f_auto/q_auto/c_fill,w_400', // Optional.
 '#attributes' => ['class' => ['demo-image']],
];

Here is an example of rendering video:

$build['video'] = [
  '#type' => 'cloudinary_video',
  '#public_id' => 'samples/cld-sample-video',
  '#player_type' => 'html5' // Optional. Override default player type.
  '#player' => [  // Optional. Override default cloudinary player configuration.
    'muted' => TRUE,
  ],
  '#sources' => [  // Optional. Override default video sources.
    [
      'type' => VideoSourceType::mp4(),
    ],
  ],
  '#raw_transformation' => 'e_progressbar:width_5', // Optional. Apply custom transformation.
  '#default_transformation' => FALSE, // Optional. By default, the default video optiomizations will be applied automatically if it's available in the global module settings.
  '#width' => '100%', // Optional. The default value is 100%.
  '#attributes' => [
    'class' => ['demo-video'],
    'muted' => 'muted', // Optionally update html5 video attributes.
  ],
  '#autoplay' => TRUE, // Optional. By default autoplay is disabled.
];