Newer
Older
<?php
namespace Drupal\bg_img_field\Plugin\Field\FieldFormatter;
use Drupal\Core\Cache\Cache;
use Drupal\Core\Entity\EntityInterface;
use Drupal\Core\Entity\EntityStorageInterface;
use Drupal\Core\Field\FieldDefinitionInterface;
use Drupal\Core\File\FileUrlGeneratorInterface;
use Drupal\Core\Logger\LoggerChannelTrait;
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
use Drupal\Core\Routing\UrlGeneratorInterface;
use Drupal\Core\Session\AccountInterface;
use Drupal\Core\Utility\LinkGeneratorInterface;
use Drupal\bg_img_field\Component\Render\CSSSnippet;
use Drupal\breakpoint\BreakpointManagerInterface;
use Drupal\responsive_image\Plugin\Field\FieldFormatter\ResponsiveImageFormatter;
use Drupal\token\Token;
use Symfony\Component\DependencyInjection\ContainerInterface;
use Symfony\Component\HttpFoundation\RequestStack;
/**
* Plugin implementation of the 'image' formatter.
*
* @FieldFormatter(
* id = "bg_img_field_formatter",
* label = @Translation("Background Image Field Widget"),
* field_types = {
* "bg_img_field"
* },
* quickedit = {
* "editor" = "image"
* }
* )
*/
class BgImgFieldFormatter extends ResponsiveImageFormatter implements ContainerFactoryPluginInterface {
/**
* The token service.
*
* @var \Drupal\token\TokenServiceInterface
*/
protected $tokenService;
/**
* The RequestStack service.
*
* @var \Symfony\Component\HttpFoundation\RequestStack
*/
protected $requestStack;
/**
* The Breakpoint Manager service.
*
* @var \Drupal\breakpoint\BreakpointManagerInterface
*/
protected $breakpointManager;
/**
* The URL generator service.
*
* @var \Drupal\Core\Routing\UrlGeneratorInterface
*/
protected $urlGenerator;
/**
* The file URL generator service.
*
* @var \Drupal\Core\File\FileUrlGeneratorInterface
*/
protected $fileUrlGenerator;
/**
* Constructor for the Background Image Formatter.
*
* @param string $plugin_id
* The plugin unique id.
* @param string $plugin_definition
* The plugin definition.
* @param \Drupal\Core\Field\FieldDefinitionInterface $field_definition
* The field definition.
* @param array $settings
* The stored setting for the formatter.
* @param string $label
* The formatter's label.
* @param string $view_mode
* Which view mode the formatter is in.
* @param array $third_party_settings
* Any third party setting that might change how the formatter renders the
* CSS.
* @param \Drupal\Core\Entity\EntityStorageInterface $responsive_image_style_storage
* The responsive image styles created in the system.
* @param \Drupal\Core\Entity\EntityStorageInterface $image_style_storage
* The image styles that have been created in the system.
* @param \Drupal\Core\Utility\LinkGeneratorInterface $link_generator
* Help generate links.
* @param \Drupal\Core\Session\AccountInterface $current_user
* The current user.
* @param \Drupal\breakpoint\BreakpointManagerInterface $breakpoint_manager
* The breakpoint manager service.
* @param \Drupal\token\TokenServiceInterface $token_service
* The token service used to generate tokens.
* @param \Symfony\Component\HttpFoundation\RequestStack $request_stack
* The request stack for the current request context.
* @param \Drupal\Core\Url\UrlGeneratorInterface $url_generator
* The URL generator for generating URLs for routes.
* @param \Drupal\Core\File\FileUrlGeneratorInterface $file_url_generator
* The file URL generator to generate absolute file URLs.
public function __construct(
$plugin_id,
$plugin_definition,
FieldDefinitionInterface $field_definition,
array $settings,
$label,
$view_mode,
array $third_party_settings,
EntityStorageInterface $responsive_image_style_storage,
EntityStorageInterface $image_style_storage,
LinkGeneratorInterface $link_generator,
BreakpointManagerInterface $breakpoint_manager,
Token $token_service,
RequestStack $request_stack,
UrlGeneratorInterface $url_generator,
FileUrlGeneratorInterface $file_url_generator,
) {
parent::__construct(
$plugin_id,
$plugin_definition,
$field_definition,
$settings,
$label,
$view_mode,
$third_party_settings,
$responsive_image_style_storage,
$image_style_storage,
$link_generator,
$current_user
);

John Franklin
committed
$this->breakpointManager = $breakpoint_manager;
$this->tokenService = $token_service;
$this->requestStack = $request_stack;
$this->urlGenerator = $url_generator;
$this->fileUrlGenerator = $file_url_generator;
/**
* {@inheritdoc}
*/
public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
return new static(
$plugin_id,
$plugin_definition,
$configuration['field_definition'],
$configuration['settings'],
$configuration['label'],
$configuration['view_mode'],
$configuration['third_party_settings'],
$container->get('entity_type.manager')->getStorage('responsive_image_style'),
$container->get('entity_type.manager')->getStorage('image_style'),
$container->get('link_generator'),
$container->get('current_user'),
$container->get('breakpoint.manager'),
$container->get('file_system'),
$container->get('image.factory'),
$container->get('token'),
$container->get('request_stack'),
$container->get('url_generator'),

John Franklin
committed
$container->get('file_url_generator')
/**
* {@inheritdoc}
*/
public function settingsForm(array $form, FormStateInterface $form_state) {
$elements = parent::settingsForm($form, $form_state);
// Get the options for responsive image styles.
$options = $elements['responsive_image_style']['#options'];
// New options array for storing new option values.
// Loop through the options to locate only the ones that are labeled
// image styles. This will eliminate any by size styles.
foreach ($options as $key => $option) {
$storage = $this->responsiveImageStyleStorage->load($key);
$image_style_mappings = $storage->get('image_style_mappings');
if (isset($image_style_mappings[0]) && $image_style_mappings[0]['image_mapping_type']
=== 'image_style') {
$new_options += [$key => $option];
}
}
$elements['responsive_image_style']['#options'] = $new_options;
// Remove the image link element.
unset($elements['image_link']);
return $elements;
}
/**
* {@inheritdoc}
*/
public function settingsSummary() {
$summary = [];
$responsive_image_style = $this->responsiveImageStyleStorage->load($this->getSetting('responsive_image_style'));
if ($responsive_image_style) {
$summary[] = $this->t('Responsive image style: @responsive_image_style',
['@responsive_image_style' => $responsive_image_style->label()]);
$summary[] = $this->t('Select a responsive image style.');
}
return $summary;
}
/**
* {@inheritdoc}
*/
public function viewElements(FieldItemListInterface $items, $langcode) {
$elements = [];

John Franklin
committed
$files = $this->getEntitiesToView($items, $langcode);
$entity = $items->getEntity();
// Early opt-out if the field is empty.
if (empty($files)) {
return $elements;
}

Jeffrey Fortune
committed
$image_link_setting = $this->getSetting('image_link');
$cache_contexts = [];
if ($image_link_setting == 'file') {
$cache_contexts[] = 'url.site';
}
// Collect cache tags to be added for each item in the field.
$responsive_image_style = $this->responsiveImageStyleStorage->load($this->getSetting('responsive_image_style'));
$image_styles_to_load = [];
$cache_tags = [];
if ($responsive_image_style) {
$cache_tags = Cache::mergeTags($cache_tags, $responsive_image_style->getCacheTags());
$image_styles_to_load = $responsive_image_style->getImageStyleIds();
}
// Get image styles.
$image_styles = $this->imageStyleStorage->loadMultiple($image_styles_to_load);
foreach ($image_styles as $image_style) {
$cache_tags = Cache::mergeTags($cache_tags, $image_style->getCacheTags());
}
// Process the files to get the css markup.

John Franklin
committed
$item = $file->_referringItem;
$selector = $item->css_selector;
$selector = $this->tokenService->replace($selector, [$entity->getEntityTypeId() => $entity], ['clear' => TRUE]);

John Franklin
committed
$css = $this->generateBackgroundCss(
$file,

John Franklin
committed
$item->toArray()
// Attach to head on element to create style tag in the html head.
$current_path = $this->requestStack->getCurrentRequest()->getRequestUri();
if (preg_match('/node\/(\d+)\/layout/', $current_path, $matches)) {

Jeffrey Fortune
committed
$elements = [
'#theme' => 'background_style',
'#css' => $css,
'#cache' => [
'tags' => $cache_tags,
'contexts' => $cache_contexts,
],
];

Jeffrey Fortune
committed
// Use the selector in the id to avoid collisions with multiple
// background formatters on the same page.
$id = 'picture-background-formatter-' . $selector;
$elements['#attached']['html_head'][] = [[
'#tag' => 'style',
'#value' => new CSSSnippet($css),
'#cache' => [
'tags' => $cache_tags,
'contexts' => $cache_contexts,
],

Jeffrey Fortune
committed
}
* @param Drupal\Core\Entity\EntityInterface $file
* URI of the field image.
* @param string $responsive_image_style
* Desired picture mapping to generate CSS.
* @param string $selector
* CSS selector to target.
* @param array $options
* CSS options.
* @return string
* Generated background image CSS.
*/
protected function generateBackgroundCss(EntityInterface $file, $responsive_image_style, $selector, array $options) {

Nicholas Stees
committed
if (!$file) {
return $css;
}
$css .= "background-repeat: " . $options['css_repeat'] . ";";
$css .= "background-size: " . $options['css_background_size'] . ";";
$css .= "background-position: " . $options['css_background_position'] . ";";
// $responsive_image_style holds the configuration from the responsive_image
// module for a given responsive style
// We need to check that this exists or else we get a WSOD.
if (!$responsive_image_style) {
$field_definition = $this->fieldDefinition->getFieldStorageDefinition();
$this->getLogger('bg_img_field')->error('
There is no responsive image style set for the {field_name} field on the {entity_type} entity. Please ensure
that the responsive image style is configured at <a href="{link}">{link}</a>. Then set the correct style on the
formatter for the entity display.
', [
'field_name' => $field_definition->get('field_name'),
'entity_type' => $field_definition->get('entity_type'),
'link' => $this->urlGenerator->generateFromRoute(
'entity.responsive_image_style.collection'
),
$breakpoints = $this->breakpointManager->getBreakpointsByGroup($responsive_image_style->getBreakpointGroup());
foreach (array_reverse($responsive_image_style->getKeyedImageStyleMappings()) as $breakpoint_id => $multipliers) {
if (isset($breakpoints[$breakpoint_id])) {
$multipliers = array_reverse($multipliers);
$query = $breakpoints[$breakpoint_id]->getMediaQuery();
if ($query != "") {
$css .= ' @media ' . $query . ' {';
}
foreach ($multipliers as $multiplier => $mapping) {
$multiplier = rtrim($multiplier, "x");
if ($mapping['image_mapping_type'] != 'image_style') {
continue;
}
if ($mapping['image_mapping'] == "_original image_") {
$url = $this->fileUrlGenerator->generateAbsoluteString($file->getFileUri());

John Franklin
committed
$image_style = $this->imageStyleStorage->load($mapping['image_mapping']);
$url = $image_style->buildUrl($file->getFileUri());
}
if ($multiplier != 1) {
$css .= ' @media (-webkit-min-device-pixel-ratio: ' . $multiplier . '), (min-resolution: ' . $multiplier * 96 . 'dpi), (min-resolution: ' . $multiplier . 'dppx) {';
}
$css .= $selector . ' {background-image: url(' . $url . ');}';
if ($multiplier != 1) {
$css .= '}';
}
}
if ($query != "") {
$css .= '}';