public function BootstrapBasicImageGalleryFormatter::viewElements in Bootstrap Basic Image Gallery 8

Builds a renderable array for a field value.

Parameters

\Drupal\Core\Field\FieldItemListInterface $items: The field values to be rendered.

string $langcode: The language that should be used to render the field.

Return value

array A renderable array for $items, as an array of child elements keyed by consecutive numeric indexes starting from 0.

Overrides FormatterInterface::viewElements

File

src/Plugin/Field/FieldFormatter/BootstrapBasicImageGalleryFormatter.php, line 85

Class

BootstrapBasicImageGalleryFormatter

Plugin implementation of the 'BootstrapBasicImageGalleryFormatter' formatter.

Namespace

Drupal\bootstrap_basic_image_gallery\Plugin\Field\FieldFormatter

Code

public function viewElements(FieldItemListInterface $items, $langcode) {
  $files = $this
    ->getEntitiesToView($items, $langcode);

  // Early opt-out if the field is empty.
  if (empty($files)) {
    return [];
  }

  // Determine the width of the column.
  $thumbnailsPerRow = $this
    ->getSetting('thumbnails_per_row');
  $thumbnailWidth = 100;
  if ($thumbnailsPerRow > 0) {
    $thumbnailWidth = 100 / $thumbnailsPerRow;
  }

  // Build the render array to pass to the template file.
  $imageGallery = [
    '#attached' => [
      'library' => [
        // Attach the basic library for this module to provide needed css.
        'bootstrap_basic_image_gallery/bootstrap_basic',
        // Attach the library which allows previewing images on hover.
        'bootstrap_basic_image_gallery/hover_preview',
      ],
    ],
    '#theme' => 'bootstrap_basic_image_gallery',
    '#main' => [],
    '#thumbnails' => [
      'class' => 'bscol-' . $thumbnailsPerRow,
      'width' => $thumbnailWidth,
      'images' => [],
    ],
    '#lazyload' => $this
      ->getSetting('lazyload') ? 'lazy' : '',
    '#modal' => [
      'id' => Html::getUniqueId('bootstrap-basic-image-gallery-modal'),
      'label' => $this->fieldDefinition
        ->getLabel(),
    ],
    '#carousel' => [
      'id' => Html::getUniqueId('bootstrap-basic-image-gallery-carousel'),
      'autoplay' => $this
        ->getSetting('carousel_autorotate') ? 'carousel' : 'false',
      'interval' => $this
        ->getSetting('carousel_interval'),
      'images' => [],
    ],
  ];

  // Load the configuration settings.
  $configuration_settings = $this->configFactory
    ->get('bootstrap_basic_image_gallery.settings');
  if (!$configuration_settings
    ->get('prevent_load_bootstrap')) {

    // Check to make sure the theme isn't already including bootstrap.
    $bootstrap_included = FALSE;
    foreach ($this->themeManager
      ->getActiveTheme()
      ->getLibraries() as $library) {
      if ($bootstrap_included = preg_match('%^bootstrap%', $library)) {
        break;
      }
    }

    // Attach the bootstrap core library if its not already included in theme.
    if (!$bootstrap_included) {
      $imageGallery['#attached']['library'][] = 'bootstrap_basic_image_gallery/bootstrap_components';
    }
  }

  // Attach the lazy load library.
  if ($this
    ->getSetting('lazyload')) {
    $imageGallery['#attached']['library'][] = 'bootstrap_basic_image_gallery/lazyload';
  }

  // Collect cache tags to be added for each thumbnail in the field.
  $thumbnail_cache_tags = [];
  $thumbnail_image_style = $this
    ->getSetting('thumbnail_image_style');
  if (!empty($thumbnail_image_style)) {
    $image_style = $this->imageStyleStorage
      ->load($thumbnail_image_style);
    $thumbnail_cache_tags = $image_style
      ->getCacheTags();
  }

  // Get the main image style.
  $main_image_style_setting = $this
    ->getSetting('image_style');
  if (!empty($main_image_style_setting)) {
    $main_image_style = $this->imageStyleStorage
      ->load($main_image_style_setting);
  }

  // Get the modal image style.
  $modal_image_style_setting = $this
    ->getSetting('modal_image_style');
  if (!empty($modal_image_style_setting)) {
    $modal_image_style = $this->imageStyleStorage
      ->load($modal_image_style_setting);
  }

  // Loop over the files and render them.
  foreach ($files as $delta => $file) {
    $image_uri = $file
      ->getFileUri();
    $url = Url::fromUri(file_create_url($image_uri));

    // Extract field item attributes for the theme function, and unset them
    // from the $item so that the field template does not re-render them.
    $item = $file->_referringItem;
    $item_attributes = $item->_attributes;
    unset($item->_attributes);

    // Create the main image container.
    if ($delta == 0) {

      // Collect cache tags to be added for each item in the field.
      $cache_tags = [];
      if (isset($main_image_style)) {
        $cache_tags = $main_image_style
          ->getCacheTags();
      }
      $modal_cache_tags = [];
      if (isset($modal_image_style)) {
        $modal_cache_tags = $modal_image_style
          ->getCacheTags();
      }
      $imageGallery['#main'] = [
        '#theme' => 'image_formatter',
        '#item' => $item,
        '#item_attributes' => $item_attributes,
        '#image_style' => $main_image_style_setting,
        '#cache' => [
          'tags' => Cache::mergeTags($cache_tags, $file
            ->getCacheTags()),
        ],
      ];
    }

    // Add the main image as a data source for hover swapping.
    if (isset($main_image_style)) {
      $item_attributes['data-mainsrc'] = $main_image_style
        ->buildUrl($image_uri);
    }
    else {
      $item_attributes['data-mainsrc'] = file_create_url($image_uri);
    }

    // Generate the thumbnail.
    if ($thumbnailsPerRow > 0) {
      $imageGallery['#thumbnails']['images'][] = [
        '#theme' => 'image_formatter',
        '#item' => $item,
        '#item_attributes' => $item_attributes,
        '#image_style' => $thumbnail_image_style,
        '#cache' => [
          'tags' => Cache::mergeTags($thumbnail_cache_tags, $file
            ->getCacheTags()),
        ],
      ];
    }

    // Add the carousel image container.
    $imageGallery['#carousel']['images'][$delta] = [
      '#theme' => 'image_formatter',
      '#item' => $item,
      '#item_attributes' => $item_attributes,
      '#image_style' => $modal_image_style_setting,
      '#caption' => $item
        ->__get('alt'),
      '#cache' => [
        'tags' => Cache::mergeTags($modal_cache_tags, $file
          ->getCacheTags()),
      ],
    ];

    // Pass image differently depending on if we are lazy loading.
    if ($this
      ->getSetting('lazyload')) {
      $imageGallery['#carousel']['images'][$delta]['#attributes']['data-src'] = $url
        ->toString();
    }
    else {
      $imageGallery['#carousel']['images'][$delta]['#uri'] = $image_uri;
    }
  }
  return [
    $imageGallery,
  ];
}