cloudinary-8.x-1.x-dev/modules/cloudinary_media_library_widget/src/Element/CloudinaryImage.php

<?php

namespace Drupal\cloudinary_media_library_widget\Element;

use Cloudinary\Asset\AssetType;
use Cloudinary\Asset\DeliveryType;
use Drupal\Core\Render\Element\RenderElement;

/**
 * Provides a render element to render cloudinary image.
 *
 * Properties:
 * - #public_id: Public ID of the asset to render.
 * - #delivery_type: Delivery type of the asset.
 * - #alt: Alt attribute of the image.
 * - #title: Title attribute of the image.
 * - #breakpoints: Whether to apply breakpoints if it's configured.
 * - #attributes: Apply custom attributes to the image.
 * - #raw_transformation: Optional string of URL transformation.
 *     e.g. 'w_400,c_pad'.
 *
 * Usage Example:
 * @code
 * $build['image'] = [
 *   '#type' => 'cloudinary_image',
 *   '#public_id' => 'cld-sample',
 *   '#breakpoints' => FALSE,
 *   '#alt' => t('Sample image'),
 *   '#raw_transformation' => 'f_auto/q_auto/c_fill,w_400',
 *   '#attributes' => ['class' => ['demo-image']],
 * ];
 * @endcode
 *
 * @RenderElement("cloudinary_image")
 */
class CloudinaryImage extends RenderElement {

  /**
   * {@inheritdoc}
   */
  public function getInfo() {
    return [
      '#theme' => 'image',
      '#resource_type' => AssetType::IMAGE,
      '#breakpoints' => TRUE,
      '#delivery_type' => DeliveryType::UPLOAD,
      '#raw_transformation' => NULL,
      '#pre_render' => [
        [get_class($this), 'preRenderImageElement'],
      ],
    ];
  }

  /**
   * Cloudinary image element pre render callback.
   *
   * @param array $element
   *   An associative array containing the properties of the image element.
   *
   * @return array
   *   The modified element.
   */
  public static function preRenderImageElement($element) {
    /** @var \Drupal\cloudinary_media_library_widget\Service\CloudinaryFileHelperInterface $file_helper */
    $file_helper = \Drupal::service('cloudinary_media_library_widget.file_helper');

    /** @var \Drupal\cloudinary_sdk\Service\AssetHelperInterface $asset_generator */
    $asset_generator = \Drupal::service('cloudinary_sdk.asset_helper');
    $value = $asset_generator->generateStringValue([
      'resource_type' => $element['#resource_type'],
      'delivery_type' => $element['#delivery_type'],
      'public_id' => $element['#public_id'],
      'transformation' => $element['#raw_transformation'],
    ]);
    $uri = $file_helper->generateUriForExternalUrl($value);
    $element['#uri'] = $uri;

    if (static::needsBreakpoints()) {
      $element['#sizes'] = '100vw';
      $element['#srcset'] = static::buildBreakpointSources($value);
    }

    return $element;
  }

  /**
   * Check if we need to apply breakpoints.
   *
   * @return bool
   *   Whether we need to apply breakpoints.
   */
  public static function needsBreakpoints() {
    $widget_config = \Drupal::config('cloudinary_media_library_widget.settings');
    $breakpoints = $widget_config->get('cloudinary_responsive_breakpoints');

    return empty($breakpoints);
  }

  /**
   * Build breakpoints sources.
   *
   * @param string $value
   *   The value from the custom form element.
   *
   * @return array
   *   List of generated sources.
   */
  public static function buildBreakpointSources(string $value): array {
    /** @var \Drupal\cloudinary_sdk\Service\AssetHelperInterface $asset_generator */
    $asset_generator = \Drupal::service('cloudinary_sdk.asset_helper');
    $info = $asset_generator->parseValue($value);

    $widget_config = \Drupal::config('cloudinary_media_library_widget.settings');
    $breakpoints = $widget_config->get('cloudinary_responsive_breakpoints');
    sort($breakpoints);

    $resource_type = $delivery_type = NULL;
    $srcset = [];

    foreach ($breakpoints as $breakpoint) {
      $transformation = implode('/', array_filter([
        $info['transformation'],
        "w_{$breakpoint},c_scale",
      ]));

      /** @var \Drupal\cloudinary_media_library_widget\Service\CloudinaryFileHelperInterface $file_helper */
      $file_helper = \Drupal::service('cloudinary_media_library_widget.file_helper');

      // Generate uri for external url with breakpoints transformation.
      $info['transformation'] = $transformation;
      $value = $asset_generator->generateStringValue($info);
      $responsive_uri = $file_helper->generateUriForExternalUrl($value);

      $srcset[] = [
        'uri' => $responsive_uri,
        'width' => "{$breakpoint}w",
      ];
    }

    return $srcset;
  }

}