public function BlazyAdminBase::breakpointsForm in Blazy 7

Same name and namespace in other branches

1. 8.2 src/Form/BlazyAdminBase.php \Drupal\blazy\Form\BlazyAdminBase::breakpointsForm()
2. 8 src/Form/BlazyAdminBase.php \Drupal\blazy\Form\BlazyAdminBase::breakpointsForm()

Defines re-usable breakpoints form.

See also

https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-sr...

http://ericportis.com/posts/2014/srcset-sizes/

http://www.sitepoint.com/how-to-build-responsive-images-with-srcset/

1 call to BlazyAdminBase::breakpointsForm()

BlazyAdminFormatter::buildSettingsForm in src/Form/BlazyAdminFormatter.php

Defines re-usable form elements.

File

src/Form/BlazyAdminBase.php, line 164

Class

BlazyAdminBase

A base for blazy admin integration to have re-usable methods in one place.

Namespace

Drupal\blazy\Form

Code

public function breakpointsForm(array &$form, $definition = []) {
  $settings = isset($definition['settings']) ? $definition['settings'] : [];
  $title = t('Leave Breakpoints empty to disable multi-serving images. <small>If provided, Blazy lazyload applies. Ignored if Picture is provided.<br /> If only two is needed, simply leave the rest empty. At any rate, the last should target the largest monitor. <br>Choose an <b>Aspect ratio</b> and use an image effect with <b>CROP</b> in its name for all styles for best performance. <br>It uses <strong>max-width</strong>, not <strong>min-width</strong>.</small>');
  $form['sizes'] = [
    '#type' => 'textfield',
    '#title' => t('Sizes'),
    '#description' => t('E.g.: (min-width: 1290px) 1290px, 100vw. Use sizes to implement different size image (different height, width) on different screen sizes along with the <strong>w (width)</strong> descriptor below. Ignored by Picture.'),
    '#weight' => 114,
    '#attributes' => [
      'class' => [
        'form-text--sizes',
      ],
    ],
    '#prefix' => '<h2 class="form__title form__title--breakpoints">' . $title . '</h2>',
  ];
  $breakpoints = $this
    ->breakpointElements($definition);
  $headers = [
    t('Breakpoint'),
    t('Image style'),
    t('Max-width/Descriptor'),
  ];
  $form['breakpoints'] = [
    '#type' => 'container',
    '#tree' => TRUE,
    '#header' => $headers,
    '#attributes' => [
      'class' => [
        'form-wrapper--table',
        'form-wrapper--table-breakpoints',
      ],
    ],
    '#weight' => 115,
    '#enforced' => TRUE,
  ];
  $form['breakpoints']['header'] = [
    '#type' => 'container',
    '#attributes' => [
      'class' => [
        'form-wrapper--table-header',
      ],
    ],
  ];
  foreach ($headers as $header) {
    $form['breakpoints']['header'][$header] = [
      '#type' => 'item',
      '#markup' => $header,
    ];
  }
  foreach ($breakpoints as $breakpoint => $elements) {
    foreach ($elements as $key => &$element) {
      if ($key != 'breakpoint') {
        $value = isset($settings['breakpoints'][$breakpoint][$key]) ? $settings['breakpoints'][$breakpoint][$key] : '';
        $element['#default_value'] = $value;
      }
      $form['breakpoints'][$breakpoint][$key] = $element;
    }
  }
}