Issue #3311838: Make imagelightbox work with media fields (e2aa0da4) · Commits · project / imagelightbox

README.txt

+9 −1

Original line number	Diff line number	Diff line
		@@ -10,7 +10,15 @@ Installation
		* Install the module as normal, see link for instructions.
		Link: https://www.drupal.org/documentation/install/modules-themes/modules-8
		* Define image style "imagelightbox" and "imagelightbox small"
		* Go to "Content Type" -> add "Image Field" -> "Manage Display" -> Select the "ImageLightBox" format and configure the image style.

		Basic Configuration
		=========================
		* Go to "Content Type"
		* Add a new field
		Currently supported field types are:
		- Image
		- Media/Image
		* Go to "Manage Display", select the "ImageLightBox" field formatter and configure the image styles to use.

		Custom Configuration
		=========================

libraries/imagelightbox.config.js

+8 −8

Original line number	Diff line number	Diff line
		@@ -25,18 +25,18 @@
		$('a[data-imagelightbox="events"]').imageLightbox();
		$(document)
		.on("start.ilb2", function () {
		console.log("start.ilb2");
		// console.log("start.ilb2");
		})
		.on("quit.ilb2", function () {
		console.log("quit.ilb2");
		// console.log("quit.ilb2");
		})
		.on("loaded.ilb2", function () {
		console.log("loaded.ilb2");
		// console.log("loaded.ilb2");
		})
		.on("previous.ilb2", function () {
		console.log("next.ilb2");
		// console.log("next.ilb2");
		})
		.on("next.ilb2", function () {
		console.log("previous.ilb2");
		// console.log("previous.ilb2");
		});
		})(jQuery, Drupal);

src/Plugin/Field/FieldFormatter/MediaImagelightboxFormatter.php

0 → 100644

+238 −0

Original line number	Diff line number	Diff line
		<?php

		namespace Drupal\imagelightbox\Plugin\Field\FieldFormatter;

		use Drupal\Core\Cache\Cache;
		use Drupal\Core\Field\FieldItemListInterface;
		use Drupal\image\Entity\ImageStyle;
		use Drupal\Core\Field\Plugin\Field\FieldFormatter\EntityReferenceFormatterBase;
		use Drupal\Core\Form\FormStateInterface;
		use Drupal\file\Entity\File;
		use Drupal\media\MediaInterface;

		/**
		* Plugin implementation of the 'imagelightbox' formatter.
		*
		* @FieldFormatter(
		* id = "imagelightbox",
		* module = "imagelightbox",
		* label = @Translation("ImageLightBox"),
		* field_types = {
		* "entity_reference"
		* }
		* )
		*/
		class MediaImageLightBoxFormatter extends EntityReferenceFormatterBase {

		/**
		* {@inheritdoc}
		*/
		public static function defaultSettings() {
		return [
		'image_style' => 'thumbnail',
		'imagelightbox_image_style' => 'large',
		'label' => 'hidden',
		'captions_source' => 'image_title',
		'buttons' => TRUE,
		'inline' => TRUE
		];
		}
		/**
		* {@inheritdoc}
		*/
		public function settingsForm(array $form, FormStateInterface $form_state) {

		$settings = $this->getSettings();
		$image_styles = image_style_options(FALSE);

		$element['image_style'] = [
		'#title' => t('Image style'),
		'#type' => 'select',
		'#default_value' => $this->getSetting('image_style'),
		'#empty_option' => t('None (original image)'),
		'#options' => $image_styles
		];

		$element['imagelightbox_image_style'] = $element['image_style'];
		$element['imagelightbox_image_style']['#title'] = t('ImageLightBox image style (default)');
		$element['imagelightbox_image_style']['#default_value'] = $this->getSetting('imagelightbox_image_style');

		$element['captions_source'] = [
		'#title' => t('Captions source'),
		'#type' => 'select',
		'#default_value' => $this->getSetting('captions_source'),
		'#options' => $this->captionsSourceOptions()
		];

		$element['inline'] = [
		'#title' => t('Display as inline elements'),
		'#type' => 'checkbox',
		'#default_value' => $this->getSetting('inline')
		];

		return $element;
		}

		/**
		* {@inheritdoc}
		*/
		public function settingsSummary() {

		$image_styles = image_style_options(FALSE);

		// Unset possible 'No defined styles' option.
		unset($image_styles['']);

		$image_style_setting = $this->getSetting('image_style');
		$style = isset($image_styles[$image_style_setting]) ?
		$image_styles[$image_style_setting] : t('Original image');
		$summary[] = t('Image style: @style', ['@style' => $style]);

		$image_style_setting = $this->getSetting('imagelightbox_image_style');
		$style = isset($image_styles[$image_style_setting]) ?
		$image_styles[$image_style_setting] : t('Original image');
		$summary[] = t('ImageLightBox image style (default): @style', ['@style' => $style]);


		$captions_source_options = $this->captionsSourceOptions();
		$summary[] = t('Captions source: @captions_source', ['@captions_source' => $captions_source_options[$this->getSetting('captions_source')]]);

		$summary[] = t('Inline: @inline', ['@inline' => $this->getBooleanSettingLabel('inline')]);

		return $summary;
		}

		/**
		* {@inheritdoc}
		*/
		public function viewElements(FieldItemListInterface $items, $langcode) {

		$elements = [];

		$media_items = $this->getEntitiesToView($items, $langcode);

		// Early opt-out if the field is empty.
		if (empty($media_items)) {
		return $elements;
		}

		$settings = $this->getSettings();
		$cache_tags = [];

		if ($settings['image_style']) {
		$image_style = ImageStyle::load($settings['image_style']);
		$cache_tags = $image_style->getCacheTags();
		}

		// Prepare image styles.
		if ($settings['imagelightbox_image_style']) {
		/** @var \Drupal\image\ImageStyleInterface $imagelightbox_image_style */
		$imagelightbox_image_style = ImageStyle::load($settings['imagelightbox_image_style']);
		}

		$imagelightbox_image_style_responsive = [];
		if (isset($settings['imagelightbox_image_style_responsive'])){
		foreach ($settings['imagelightbox_image_style_responsive'] as $preset) {
		if ($preset['width']) {
		$imagelightbox_image_style_responsive[$preset['width']] = ImageStyle::load($preset['image_style']);
		}
		}
		}

		/** @var \Drupal\file\MediaInterface[] $media_items */
		foreach ($media_items as $delta => $media) {
		if ($media instanceof MediaInterface) {
		// Get the value from the source field.
		$value = $media->getSource()->getSourceFieldValue($media);

		// If this returns a numeric value, it's a file entity's ID.
		if (is_numeric($value)) {
		$file = File::load($value);
		if (!empty($file)) {

		// set url
		$uri = $file->getFileUri();
		if (!empty($uri)) {
		$default_url = file_create_url($uri);
		}

		// set caption
		if ($settings['captions_source'] == 'image_alt') {
		$caption = $file->get('alt')->getValue();
		} elseif ($settings['captions_source'] == 'image_title' && $file->hasField('title')) {
		$caption = $file->get('title')->getValue();
		} else {
		$caption = '';
		}

		// attributes
		$link_attributes = [
		'class' => 'lightbox',
		'data-imagelightbox' => 'g',
		'data-ilb2-caption' => $caption,
		];
		$item_attributes = [
		'class' => 'imagelightbox',
		];


		}
		}

		$elements[$delta] = [
		'#theme' => 'imagelightbox_formatter',
		'#class' => 'imagelightbox',
		'#item' => $media->get('field_media_image')->first(),
		'#item_attributes' => $item_attributes,
		'#link_attributes' => $link_attributes,
		'#image_style' => $settings['image_style'],
		'#url' => empty($imagelightbox_image_style) ? $default_url : $imagelightbox_image_style->buildUrl($uri),
		'#cache' => [
		'tags' => $cache_tags,
		'contexts' => isset($cache_contexts) ? $cache_contexts : "",
		],
		];
		};
		$elements['#attached']['drupalSettings']['imagelightbox'] = $settings;
		$elements['#attached']['library'][] = 'imagelightbox/formatter';
		$elements['#attributes']['class'][] = 'imagelightbox';
		if ($settings['inline']) {
		$elements['#attributes']['class'][] = 'container-inline';
		}

		}

		return $elements;
		}

		/**
		* Returns animation options.
		*/
		protected function animationOptions() {
		return [
		'none' => t('None'),
		'slideIn' => t('Slide'),
		'fadeIn' => t('Fade'),
		];
		}

		/**
		* Returns captions source options.
		*/
		protected function captionsSourceOptions() {
		return [
		'none' => t('None'),
		'image_title' => t('Image title'),
		'image_alt' => t('Image alt'),
		];
		}

		/**
		* Returns labels for boolean settings.
		*/
		protected function getBooleanSettingLabel($setting) {
		return $this->getSetting($setting) ? t('Yes') : t('No');
		}

		}