public static function Blazy::buildBreakpointAttributes in Blazy 7

Same name and namespace in other branches

1. 8 src/Blazy.php \Drupal\blazy\Blazy::buildBreakpointAttributes()

Provides re-usable breakpoint data-attributes for IMG or DIV element.

@todo deprecate for BlazyBreakpoint::attributes() at blazy:7.x-2.0.

1 call to Blazy::buildBreakpointAttributes()

BlazyManager::buildImage in src/BlazyManager.php

Build out image, or anything related, including cache, CSS background, etc.

File

src/Blazy.php, line 325

Class

Blazy

Implements BlazyInterface.

Namespace

Drupal\blazy

Code

public static function buildBreakpointAttributes(array &$attributes, array &$settings, $item = NULL) {

  // Only provide multi-serving image URLs if breakpoints are provided.
  if (empty($settings['breakpoints'])) {
    return;
  }
  $srcset = $json = $bg_sources = [];

  // https://css-tricks.com/sometimes-sizes-is-quite-important/
  // For older iOS devices that don't support w descriptors in srcset, the
  // first source item in the list will be used.
  foreach ($settings['breakpoints'] as $breakpoint) {
    $url = image_style_url($breakpoint['image_style'], $settings['uri']);

    // Supports multi-breakpoint aspect ratio with irregular sizes.
    // Yet, only provide individual dimensions if not already set.
    // See Drupal\blazy\BlazyFormatter::setImageDimensions().
    $width = self::widthFromDescriptors($breakpoint['width']);
    if (!empty($settings['_breakpoint_ratio']) && empty($settings['blazy_data']['dimensions'])) {
      $dim = self::transformDimensions($breakpoint['image_style'], $item);
      if ($width) {
        $ratio = round($dim['height'] / $dim['width'] * 100, 2);
        $json[$width] = $ratio;
      }
    }
    else {
      $ratio = $settings['blazy_data']['dimensions'][$width];
    }

    // @todo deprecate $settings['breakpoints'][$key]['url'] = $url;
    // Recheck library if multi-styled BG is still supported anyway.
    // Confirmed: still working with GridStack multi-image-style per item.
    if ($settings['background']) {

      // @todo deprecate $attributes['data-src-' . $key] = $url;
      // A new background approach for both Blazy and IO, likely picture,
      // either due to deprecated breakpoints, or picture integration.
      $bg_sources[$width] = [
        'src' => $url,
        'ratio' => $ratio,
      ];
    }
    else {
      $width = is_numeric($width) ? $width . 'w' : $width;
      $srcset[] = $url . ' ' . $width;
    }
  }
  if ($srcset) {
    $settings['srcset'] = implode(', ', $srcset);
    $attributes['srcset'] = '';
    $attributes['data-srcset'] = $settings['srcset'];
    $attributes['sizes'] = '100w';
    if (!empty($settings['sizes'])) {
      $attributes['sizes'] = trim($settings['sizes']);
      unset($attributes['height'], $attributes['width']);
    }
  }
  if ($json) {
    $settings['blazy_data']['dimensions'] = $json;
  }
  if ($bg_sources) {
    ksort($bg_sources);
    $settings['urls'] = $bg_sources;
  }
}