protected function BgImgFieldFormatter::generateBackgroundCss in Background Image Field 8

CSS Generator Helper Function.

Parameters

object $image: URI of the field image.

string $responsive_image_style: Desired picture mapping to generate CSS.

string $selector: CSS selector to target.

array $options: CSS options.

Return value

string Generated background image CSS.

1 call to BgImgFieldFormatter::generateBackgroundCss()

BgImgFieldFormatter::buildElement in src/Plugin/Field/FieldFormatter/BgImgFieldFormatter.php

Build the inline css style based on a set of files and a selector.

File

src/Plugin/Field/FieldFormatter/BgImgFieldFormatter.php, line 273

Class

BgImgFieldFormatter

Plugin implementation of the 'image' formatter.

Namespace

Drupal\bg_img_field\Plugin\Field\FieldFormatter

Code

protected function generateBackgroundCss($image, $responsive_image_style, $selector, array $options) {
  $css = "";
  $css .= $selector . '{';
  $css .= "background-repeat: " . $options['css_repeat'] . ";";
  $css .= "background-size: " . $options['css_background_size'] . ";";
  $css .= "background-position: " . $options['css_background_position'] . ";";
  $css .= '}';

  // $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->logger
      ->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' => Url::fromRoute('entity.responsive_image_style.collection')
        ->toString(),
    ]);
  }
  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 . ' {';
        }
        foreach ($multipliers as $multiplier => $mapping) {
          $multiplier = rtrim($multiplier, "x");
          if ($mapping['image_mapping_type'] != 'image_style') {
            continue;
          }
          if ($mapping['image_mapping'] == "_original image_") {
            $url = file_create_url($image
              ->getFileUri());
          }
          else {
            $url = ImageStyle::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;
}