Skip to content
Snippets Groups Projects

Fix Background Image Field Formatter Dependencies and Image Loading

Merged Fix Background Image Field Formatter Dependencies and Image Loading
issue/bg_img_field-3484950:8.x-2.x into 8.x-2.x
Merged Nicholas Stees requested to merge issue/bg_img_field-3484950:8.x-2.x into 8.x-2.x
Compare
and
2 files
+ 86
− 56
Compare changes
  • Side-by-side
  • Inline
Files
2
src/Plugin/Field/FieldFormatter/BgImgFieldFormatter.php
+ 85
− 55
@@ -2,22 +2,23 @@
namespace Drupal\bg_img_field\Plugin\Field\FieldFormatter;
use Drupal\Core\Entity\EntityInterface;
use Drupal\bg_img_field\Component\Render\CSSSnippet;
use Drupal\Core\Cache\Cache;
use Drupal\Core\Entity\EntityInterface;
use Drupal\Core\Entity\EntityStorageInterface;
use Drupal\Core\Entity\EntityTypeManagerInterface;
use Drupal\Core\Field\FieldDefinitionInterface;
use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\File\FileSystemInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\responsive_image\Plugin\Field\FieldFormatter\ResponsiveImageFormatter;
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
use Drupal\bg_img_field\Component\Render\CSSSnippet;
use Drupal\Core\Image\ImageFactory;
use Drupal\Core\Logger\LoggerChannelTrait;
use Drupal\Core\Field\FieldDefinitionInterface;
use Drupal\Core\Entity\EntityStorageInterface;
use Drupal\Core\Utility\LinkGeneratorInterface;
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
use Drupal\Core\Session\AccountInterface;
use Symfony\Component\DependencyInjection\ContainerInterface;
use Drupal\Core\Url;
use Drupal\Core\File\FileSystemInterface;
use Drupal\Core\Image\ImageFactory;
use Drupal\Core\Utility\LinkGeneratorInterface;
use Drupal\responsive_image\Plugin\Field\FieldFormatter\ResponsiveImageFormatter;
use Symfony\Component\DependencyInjection\ContainerInterface;
/**
* Plugin implementation of the 'image' formatter.
@@ -55,6 +56,13 @@ class BgImgFieldFormatter extends ResponsiveImageFormatter implements ContainerF
*/
protected $imageFactory;
/**
* The entityTypeManager service.
*
* @var \Drupal\Core\Entity\EntityStorageInterface
*/
protected $entityTypeManager;
/**
* Constructor for the Background Image Formatter.
*
@@ -85,6 +93,8 @@ class BgImgFieldFormatter extends ResponsiveImageFormatter implements ContainerF
* The file system.
* @param \Drupal\Core\Image\ImageFactory $imageFactory
* The image factory.
* @param \Drupal\Core\Entity\EntityTypeManagerInterface $entityTypeManager
* The entity type manager.
*/
public function __construct(
$plugin_id,
@@ -98,6 +108,9 @@ class BgImgFieldFormatter extends ResponsiveImageFormatter implements ContainerF
EntityStorageInterface $image_style_storage,
LinkGeneratorInterface $link_generator,
AccountInterface $current_user,
FileSystemInterface $fileSystem,
ImageFactory $imageFactory,
EntityTypeManagerInterface $entityTypeManager
) {
parent::__construct(
$plugin_id,
@@ -114,6 +127,7 @@ class BgImgFieldFormatter extends ResponsiveImageFormatter implements ContainerF
);
$this->logger = $this->getLogger('bg_img_field');
$this->entityTypeManager = $entityTypeManager;
$this->fileSystem = $fileSystem;
$this->imageFactory = $imageFactory;
}
@@ -122,12 +136,23 @@ class BgImgFieldFormatter extends ResponsiveImageFormatter implements ContainerF
* {@inheritdoc}
*/
public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
$container = parent::create($container, $configuration, $plugin_id, $plugin_definition);
return $container;
}
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('file_system'),
$container->get('image.factory'),
$container->get('entity_type.manager')
);
}
/**
* {@inheritdoc}
@@ -180,12 +205,13 @@ class BgImgFieldFormatter extends ResponsiveImageFormatter implements ContainerF
$elements = [];
$entity = $items->getEntity();
$file_storage = $this->entityTypeManager->getStorage('file');
// Load the files to render.
$files = [];
foreach ($items->getValue() as $item) {
$files[] = [
'file' => $this->fileSystem->load($item['target_id']),
'file' => $file_storage->load($item['target_id']),
'item' => $item,
];
}
@@ -295,9 +321,13 @@ class BgImgFieldFormatter extends ResponsiveImageFormatter implements ContainerF
* @return string
* Generated background image CSS.
*/
protected function generateBackgroundCss($image, $responsive_image_style, $selector, array $options) {
protected function generateBackgroundCss($file, $responsive_image_style, $selector, array $options) {
$css = "";
if (!$file) {
return $css;
}
$css .= $selector . '{';
$css .= "background-repeat: " . $options['css_repeat'] . ";";
$css .= "background-size: " . $options['css_background_size'] . ";";
@@ -323,45 +353,45 @@ class BgImgFieldFormatter extends ResponsiveImageFormatter implements ContainerF
else {
$breakpoints = \Drupal::service('breakpoint.manager')->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 . ' {';
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 = \Drupal::service('file_url_generator')->generateAbsoluteString($file->getFileUri());
} else {
// Use image style URL generation instead of ImageFactory->load()
$image_style = $this->entityTypeManager->getStorage('image_style')->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 .= '}';
}
}
foreach ($multipliers as $multiplier => $mapping) {
$multiplier = rtrim($multiplier, "x");
if ($mapping['image_mapping_type'] != 'image_style') {
continue;
}
if ($mapping['image_mapping'] == "_original image_") {
$url = \Drupal::service('file_url_generator')->generateAbsoluteString($image->getFileUri());
}
else {
$url = $this->imageFactory->load($mapping['image_mapping'])->buildUrl($image->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 .= '}';
}
}
}
}
}
return $css;
}