- Issue #2752865 by tjwelde, lilee, killua99: Support PICTURE element for the responsive image.

Blazy 8.x-1.0-dev, 2016-11-12

-----------------------------

- #2752865 by tjwelde, lilee, killua99: Support PICTURE element for the

  responsive image.

Blazy 8.x-1.0-dev, 2016-11-10

-----------------------------

- Triggered packager.

 * Overrides variables for responsive-image.html.twig templates.

 */

function blazy_preprocess_responsive_image(&$variables) {

  // Do not proceed if picture element.

  if (!$variables['output_image_tag']) {

    return;

  }

  $config = Blazy::getConfig();

  // Do not proceed if disabled globally, or not a Blazy formatter.

  }

  // We are here either using Blazy, or core Responsive image formatters.

  // Is picture element.

  if (!$variables['output_image_tag']) {

    // Prepare all <picture> [data-srcset] attributes on <source> elements.

    _blazy_preprocess_responsive_image_picture_sources($variables);

    // Fetches the picture element fallback URI, and empty it later.

    $fallback_uri = $variables['img_element']['#srcset'][0]['uri'];

    // Cleans up the no-longer relevant attributes for controlling element.

    unset($variables['attributes']['data-srcset'], $variables['img_element']['#attributes']['data-srcset']);

    $variables['img_element']['#srcset'] = '';

    // Prevents invalid IMG tag when one pixel placeholder is disabled.

    $variables['img_element']['#uri'] = Blazy::PLACEHOLDER;

  }

  else {

    $srcset = $variables['attributes']['srcset'];

    $srcset_values = $srcset->value();

    $fallback_uri = $variables['img_element']['#uri'];

    $variables['attributes']['data-srcset'] = $srcset_values;

  $variables['img_element']['#attributes']['class'][] = 'b-lazy b-responsive';

    $variables['img_element']['#attributes']['data-srcset'] = $srcset_values;

    $variables['img_element']['#attributes']['srcset'] = '';

  }

  // Blazy needs controlling element to have a fallback [data-src], else error.

  $variables['img_element']['#attributes']['data-src'] = $fallback_uri;

  $variables['img_element']['#attributes']['class'][] = 'b-lazy b-responsive';

  $variables['img_element']['#attributes']['data-src'] = $variables['img_element']['#uri'];

  // Only replace fallback image URI with 1px placeholder, if so configured.

  // This will prevent downloading the fallback image.

  if ($config['one_pixel']) {

    $variables['img_element']['#uri'] = Blazy::PLACEHOLDER;

  }

  $variables['img_element']['#attached']['drupalSettings']['blazy'] = $config['blazy'];

}

/**

 * Adds [data-srcset] attribute to picture source element to support lazyload.

 */

function _blazy_preprocess_responsive_image_picture_sources(&$variables) {

  /** @var \Drupal\Core\Template\Attribute $source */

  foreach ($variables['sources'] as &$source) {

    $srcset = $source['srcset'];

    $srcset_values = $srcset->value();

    $source->setAttribute('data-srcset', $srcset_values);

    $source->removeAttribute('srcset');

  }

}

/**

 * Implements hook_preprocess_field().

 */

      '#type'          => 'checkbox',

      '#title'         => $this->t('One pixel placeholder'),

      '#default_value' => $config->get('one_pixel'),

      '#description'   => $this->t('By default a one pixel image is the placeholder for lazyloaded Responsive image. Useful to perform a lot better. Uncheck to disable, and use Drupal-managed smallest/fallback image style instead. Be sure to add proper dimensions or at least min-height/min-width via CSS accordingly to avoid layout reflow since Aspect ratio is not supported with Responsive image yet.'),

      '#description'   => $this->t('By default a one pixel image is the placeholder for lazyloaded Responsive image. Useful to perform a lot better. Uncheck to disable, and use Drupal-managed smallest/fallback image style instead. Be sure to add proper dimensions or at least min-height/min-width via CSS accordingly to avoid layout reflow since Aspect ratio is not supported with Responsive image yet. Disabling this will result in downloading fallback image as well for non-PICTURE element (double downloads).'),

    ];

    $form['blazy'] = [

      // Aspect ratio to fix layout reflow with lazyloaded images responsively.

      // This is outside 'lazy' to allow non-lazyloaded iframes use this too.

      if (!empty($settings['width']) && !empty($settings['ratio']) && in_array($settings['ratio'], ['enforced', 'fluid'])) {

      if (!empty($settings['width'])) {

        if (!empty($settings['ratio']) && in_array($settings['ratio'], ['enforced', 'fluid'])) {

          $padding_bottom = isset($settings['padding_bottom']) ? $settings['padding_bottom'] : round((($settings['height'] / $settings['width']) * 100), 2);

          $attributes['style'] = 'padding-bottom: ' . $padding_bottom . '%';

          $settings['_breakpoint_ratio'] = $settings['ratio'];

        }

        // Only output dimensions for non-responsive images.

        $image_attributes['height'] = $settings['height'];

        $image_attributes['width']  = $settings['width'];

      }

      if (!empty($settings['lazy'])) {

        $image['#uri'] = static::PLACEHOLDER;

    // Image is optional for Video, and Blazy CSS background images.

    if ($image) {

      $image_attributes['height'] = $settings['height'];

      $image_attributes['width']  = $settings['width'];

      $image_attributes['alt'] = isset($item->alt) ? $item->alt : NULL;

      // Do not output an empty 'title' attribute.

        '#type'        => 'select',

        '#title'       => $this->t('Responsive image'),

        '#options'     => $this->getResponsiveImageOptions(),

        '#description' => $this->t('Responsive image style for the main stage image is more reasonable for large images. Only expecting multi-serving IMG, but not PICTURE element. Not compatible with breakpoints and aspect ratio, yet. Leave empty to disable.'),

        '#description' => $this->t('Responsive image style for the main stage image is more reasonable for large images. Works with multi-serving IMG, or PICTURE element. Not compatible with breakpoints and aspect ratio, yet. Leave empty to disable.'),

        '#access'      => $this->getResponsiveImageOptions(),

        '#weight'      => -100,

      ];