protected function PictureBackgroundFormatter::generate_background_css in Picture Background Formatter 8

CSS Generator Helper Function.

Parameters

ImageItem $image: URI of the field image.

array $responsive_image_style: Desired picture mapping to generate CSS.

string $selector: CSS selector to target.

Return value

string Generated background image CSS.

1 call to PictureBackgroundFormatter::generate_background_css()

PictureBackgroundFormatter::build_element in src/Plugin/Field/FieldFormatter/PictureBackgroundFormatter.php

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

File

src/Plugin/Field/FieldFormatter/PictureBackgroundFormatter.php, line 165

Class

PictureBackgroundFormatter

Plugin implementation of the 'picture_background_formatter' formatter.

Namespace

Drupal\picture_background_formatter\Plugin\Field\FieldFormatter

Code

protected function generate_background_css($image, $responsive_image_style, $selector) {
  $css = "";
  $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;
}