public function LazyForm::buildForm in Lazy-load 8.3
Same name and namespace in other branches
- 8 src/Form/LazyForm.php \Drupal\lazy\Form\LazyForm::buildForm()
- 8.2 src/Form/LazyForm.php \Drupal\lazy\Form\LazyForm::buildForm()
Form constructor.
Parameters
array $form: An associative array containing the structure of the form.
\Drupal\Core\Form\FormStateInterface $form_state: The current state of the form.
Return value
array The form structure.
Overrides ConfigFormBase::buildForm
File
- src/
Form/ LazyForm.php, line 228
Class
- LazyForm
- Configure Lazy settings for this site.
Namespace
Drupal\lazy\FormCode
public function buildForm(array $form, FormStateInterface $form_state) : array {
$lazy_settings = $this
->config('lazy.settings');
$this
->getEnabledFiltersAndFields();
$form['preview'] = [
'#type' => 'details',
'#title' => $this
->t('Preview'),
'#open' => FALSE,
];
$form['preview']['spacer'] = [
'#type' => 'html_tag',
'#tag' => 'div',
'#value' => $this
->t('Following empty space is intentional. Scroll down for an image preview.'),
'#attributes' => [
'style' => 'height: 3000px;',
],
];
$form['preview']['image'] = [
'#theme' => 'image',
'#uri' => $this
->config('image.settings')
->get('preview_image'),
'#alt' => $this
->t('Preview image'),
'#title' => $this
->t('Preview image'),
'#attributes' => [
'width' => 480,
'height' => 360,
'style' => 'width: 480px; height: 360px;',
'data-lazy' => TRUE,
],
];
$form['settings'] = [
'#type' => 'vertical_tabs',
'#title' => $this
->t('Settings'),
'#parents' => [
'lazy_tabs',
],
];
$form['shared'] = [
'#type' => 'details',
'#title' => $this
->t('Shared settings'),
'#group' => 'lazy_tabs',
];
$form['shared']['preferNative'] = [
'#type' => 'checkbox',
'#title' => $this
->t('Prefer native lazy-loading'),
'#description' => $this
->t('If checked and the browser supports, native lazy-loading will be used, otherwise <em>lazysizes</em> library will be used for all browsers.'),
'#default_value' => $lazy_settings
->get('preferNative'),
'#required' => FALSE,
];
$form['shared']['skipClass'] = [
'#type' => 'textfield',
'#title' => $this
->t('skipClass'),
'#description' => $this
->t('Elements having this class name will be ignored.'),
'#default_value' => $lazy_settings
->get('skipClass'),
'#size' => 20,
'#required' => TRUE,
];
$form['shared']['placeholderSrc'] = [
'#type' => 'textfield',
'#title' => $this
->t('Placeholder image URL'),
'#description' => $this
->t('Suggestion: 1x1 pixels transparent GIF: <code>@code</code>', [
'@code' => 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',
]),
'#default_value' => $lazy_settings
->get('placeholderSrc'),
'#size' => 100,
'#maxlength' => 255,
'#required' => FALSE,
];
$form['shared']['cssEffect'] = [
'#type' => 'checkbox',
'#title' => $this
->t('Enable default CSS effect'),
'#description' => $this
->t('When it is checked the default CSS transition effect is applied with matching class names.'),
'#default_value' => $lazy_settings
->get('cssEffect'),
'#required' => FALSE,
];
$form['shared']['minified'] = [
'#type' => 'checkbox',
'#title' => $this
->t('Use minified versions.'),
'#description' => $this
->t('When it is checked the minified versions of the library files are used.'),
'#default_value' => $lazy_settings
->get('minified'),
'#return_value' => 1,
];
$js = $lazy_settings
->get('minified');
if ($js || is_null($js)) {
$js = '/lazysizes.min.js';
}
else {
$js = '/lazysizes.js';
}
$library_path = $lazy_settings
->get('libraryPath') ?? '/libraries/lazysizes';
$form['shared']['libraryPath'] = [
'#type' => 'textfield',
'#title' => $this
->t('Lazysizes library path, or URL'),
'#description' => $this
->t('For most Drupal instances, the path to the <code>lazysizes</code> plugin would be under the <em>libraries</em> folder in the web root. If you need to serve it from a different local path, or even from an external domain you can define it here:<br><br><b>Examples:</b><br>/libraries/lazysizes<br>/profiles/{your_profile}/libraries/lazysizes<br>https://example.com/libraries/lazysizes'),
'#field_suffix' => $this
->t('<b><a href=":lazysizes">%js</a></b>', [
':lazysizes' => $library_path . $js,
'%js' => $js,
]),
'#default_value' => $library_path,
'#placeholder' => '/libraries/lazysizes',
'#required' => TRUE,
];
// Set the default condition configuration.
$visibility = $lazy_settings
->get('visibility') ?? [
'id' => 'request_path',
'pages' => $lazy_settings
->get('disabled_paths') ?? '/rss.xml',
'negate' => 0,
];
$this->condition
->setConfiguration($visibility);
$form['visibility'] = [
'#type' => 'details',
'#title' => $this
->t('Visibility'),
'#description' => $this
->t('This configuration applies to both <em>image fields</em> and <em>inline images/iframes</em> on following pages.'),
'#group' => 'lazy_tabs',
];
$form += $this->condition
->buildConfigurationForm($form, $form_state);
$form['pages']['#group'] = 'visibility';
$form['negate']['#group'] = 'visibility';
$form['negate']['#title'] = $this
->t('Enable lazy-loading ONLY on specified pages.');
$form['negate']['#description'] = $this
->t('<p><strong>unchecked</strong> (default): lazy-loading is enabled on ALL pages except the specified pages.</p><p><strong>checked</strong>: lazy-loading is enabled ONLY on the specified pages.</p>');
$form['visibility']['more'] = [
'#type' => 'item',
'#title' => $this
->t('Additional settings:'),
'#markup' => '<hr>',
'#weight' => 8,
];
$form['visibility']['disable_admin'] = [
'#type' => 'checkbox',
'#title' => $this
->t('Disable lazy-loading for administration pages.'),
'#default_value' => $lazy_settings
->get('disable_admin'),
'#weight' => 9,
];
$form['visibility']['amp'] = [
'#type' => 'checkbox',
'#title' => $this
->t('Automatically disable lazy-loading for <a href=":url" title="Accelerated Mobile Pages">AMP</a> (pages with <code>?amp</code> in the query-strings).', [
':url' => 'https://www.drupal.org/project/amp',
]),
'#default_value' => 1,
'#disabled' => TRUE,
'#weight' => 10,
'#access' => $this->moduleHandler
->moduleExists('amp'),
];
$form['lazysizes'] = [
'#type' => 'details',
'#title' => $this
->t('Lazysizes configuration'),
'#description' => $this
->t('<div class="messages"><strong>lazysizes</strong> is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images <code>picture</code>/<code>srcset</code>), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster.</div><p>The plugin can be configured with the following options. Check out the <a href=":repo">official repository</a> for <a href=":doc">documentation</a> and <a href=":examples">examples</a>.</p>', [
':repo' => 'https://github.com/aFarkas/lazysizes',
':doc' => 'https://github.com/aFarkas/lazysizes/blob/gh-pages/README.md',
':examples' => 'http://afarkas.github.io/lazysizes/#examples',
]),
'#group' => 'lazy_tabs',
];
$form['lazysizes']['lazysizes_lazyClass'] = [
'#type' => 'textfield',
'#title' => $this
->t('lazyClass'),
'#description' => $this
->t('Marker class for all elements which should be lazy loaded.'),
'#default_value' => $lazy_settings
->get('lazysizes.lazyClass'),
'#required' => TRUE,
];
$form['lazysizes']['lazysizes_loadedClass'] = [
'#type' => 'textfield',
'#title' => $this
->t('loadedClass'),
'#description' => $this
->t('This class will be added to any element as soon as the image is loaded or the image comes into view. Can be used to add unveil effects or to apply styles.'),
'#default_value' => $lazy_settings
->get('lazysizes.loadedClass'),
'#required' => TRUE,
];
$form['lazysizes']['lazysizes_loadingClass'] = [
'#type' => 'textfield',
'#title' => $this
->t('loadingClass'),
'#description' => $this
->t('This class will be added to img element as soon as image loading starts. Can be used to add unveil effects.'),
'#default_value' => $lazy_settings
->get('lazysizes.loadingClass'),
'#required' => TRUE,
];
$form['lazysizes']['lazysizes_preloadClass'] = [
'#type' => 'textfield',
'#title' => $this
->t('preloadClass'),
'#description' => $this
->t('Marker class for elements which should be lazy pre-loaded after onload. Those elements will be even preloaded, if the <code>preloadAfterLoad</code> option is set to <code>false</code>.'),
'#default_value' => $lazy_settings
->get('lazysizes.preloadClass'),
'#required' => TRUE,
];
$form['lazysizes']['lazysizes_errorClass'] = [
'#type' => 'textfield',
'#title' => $this
->t('errorClass'),
'#description' => $this
->t('The error class if image fails to load'),
'#default_value' => $lazy_settings
->get('lazysizes.errorClass'),
'#required' => TRUE,
];
$form['lazysizes']['lazysizes_autosizesClass'] = [
'#type' => 'textfield',
'#title' => $this
->t('autosizesClass'),
'#description' => '',
'#default_value' => $lazy_settings
->get('lazysizes.autosizesClass'),
'#required' => TRUE,
];
$form['lazysizes']['lazysizes_srcAttr'] = [
'#type' => 'textfield',
'#title' => $this
->t('srcAttr'),
'#description' => $this
->t('The attribute, which should be transformed to <code>src</code>.'),
'#default_value' => $lazy_settings
->get('lazysizes.srcAttr'),
'#required' => TRUE,
];
$form['lazysizes']['lazysizes_srcsetAttr'] = [
'#type' => 'textfield',
'#title' => $this
->t('srcsetAttr'),
'#description' => $this
->t('The attribute, which should be transformed to <code>srcset</code>.'),
'#default_value' => $lazy_settings
->get('lazysizes.srcsetAttr'),
'#required' => TRUE,
];
$form['lazysizes']['lazysizes_sizesAttr'] = [
'#type' => 'textfield',
'#title' => $this
->t('sizesAttr'),
'#description' => $this
->t('The attribute, which should be transformed to <code>sizes</code>. Makes almost only makes sense with the value <code>"auto"</code>. Otherwise, the <code>sizes</code> attribute should be used directly.'),
'#default_value' => $lazy_settings
->get('lazysizes.sizesAttr'),
'#required' => TRUE,
];
$form['lazysizes']['lazysizes_minSize'] = [
'#type' => 'number',
'#title' => $this
->t('minSize'),
'#description' => $this
->t('For <code>data-sizes="auto"</code> feature. The minimum size of an image that is used to calculate the <code>sizes</code> attribute. In case it is under <code>minSize</code> the script traverses up the DOM tree until it finds a parent that is over <code>minSize</code>.'),
'#default_value' => $lazy_settings
->get('lazysizes.minSize'),
'#required' => TRUE,
'#attributes' => [
'min' => 0,
],
];
$form['lazysizes']['lazysizes_customMedia'] = [
'#type' => 'textarea',
'#title' => $this
->t('customMedia'),
'#description' => $this
->t('The <code>customMedia</code> option object is an alias map for different media queries. It can be used to separate/centralize your multiple specific media queries implementation (layout) from the <code>source[media]</code> attribute (content/structure) by creating labeled media queries.'),
'#default_value' => json_encode($lazy_settings
->get('lazysizes.customMedia'), JSON_FORCE_OBJECT),
'#required' => TRUE,
'#rows' => 1,
];
$form['lazysizes']['lazysizes_init'] = [
'#type' => 'checkbox',
'#title' => $this
->t('init'),
'#description' => $this
->t('By default lazysizes initializes itself, to load in view assets as soon as possible. In the unlikely case you need to setup/configure something with a later script you can set this option to <code>false</code> and call <code>lazySizes.init();</code> later explicitly.'),
'#default_value' => $lazy_settings
->get('lazysizes.init'),
'#required' => FALSE,
];
$form['lazysizes']['lazysizes_expFactor'] = [
'#type' => 'number',
'#title' => $this
->t('expFactor'),
'#description' => $this
->t('The <code>expFactor</code> is used to calculate the "preload expand", by multiplying the normal <code>expand</code> with the <code>expFactor</code> which is used to preload assets while the browser is idling (no important network traffic and no scrolling). (Reasonable values are between <code>1.5</code> and <code>4</code> depending on the <code>expand</code> option).'),
'#default_value' => $lazy_settings
->get('lazysizes.expFactor'),
'#required' => TRUE,
'#min' => 0,
'#step' => 0.1,
];
$form['lazysizes']['lazysizes_hFac'] = [
'#type' => 'number',
'#title' => $this
->t('hFac'),
'#description' => $this
->t('The <code>hFac</code> (horizontal factor) modifies the horizontal expand by multiplying the <code>expand</code> value with the <code>hFac</code> value. Use case: In case of carousels there is often the wish to make the horizontal expand narrower than the normal vertical expand option. Reasonable values are between 0.4 - 1. In the unlikely case of a horizontal scrolling website also 1 - 1.5.'),
'#default_value' => $lazy_settings
->get('lazysizes.hFac'),
'#required' => TRUE,
'#min' => 0,
'#step' => 0.1,
];
$form['lazysizes']['lazysizes_loadMode'] = [
'#type' => 'number',
'#title' => $this
->t('loadMode'),
'#description' => $this
->t("The <code>loadMode</code> can be used to constrain the allowed loading mode. Possible values are 0 = don't load anything, 1 = only load visible elements, 2 = load also very near view elements (<code>expand</code> option) and 3 = load also not so near view elements (<code>expand</code> * <code>expFactor</code> option). This value is automatically set to <code>3</code> after onload. Change this value to <code>1</code> if you (also) optimize for the onload event or change it to <code>3</code> if your onload event is already heavily delayed."),
'#default_value' => $lazy_settings
->get('lazysizes.loadMode'),
'#required' => TRUE,
'#min' => 0,
];
$form['lazysizes']['lazysizes_loadHidden'] = [
'#type' => 'checkbox',
'#title' => $this
->t('loadHidden'),
'#description' => $this
->t('Whether to load <code>visibility: hidden</code> elements. Important: lazySizes will load hidden images always delayed. If you want them to be loaded as fast as possible you can use <code>opacity: 0.001</code> but never <code>visibility: hidden</code> or <code>opacity: 0</code>.'),
'#default_value' => $lazy_settings
->get('lazysizes.loadHidden'),
'#required' => FALSE,
];
$form['lazysizes']['lazysizes_ricTimeout'] = [
'#type' => 'number',
'#title' => $this
->t('ricTimeout'),
'#description' => $this
->t('The timeout option used for the <code>requestIdleCallback</code>. Reasonable values between: 0, 100 - 1000. (Values below 50 disable the <code>requestIdleCallback</code> feature.)'),
'#default_value' => $lazy_settings
->get('lazysizes.ricTimeout'),
'#required' => TRUE,
'#min' => 0,
];
$form['lazysizes']['lazysizes_throttleDelay'] = [
'#type' => 'number',
'#title' => $this
->t('throttleDelay'),
'#description' => $this
->t('The timeout option used to throttle all listeners. Reasonable values between: 66 - 200.'),
'#default_value' => $lazy_settings
->get('lazysizes.throttleDelay'),
'#required' => TRUE,
'#min' => 0,
];
$plugins = array_keys($this->lazyLoad
->getPlugins());
$form['lazysizes']['lazysizes_plugins'] = [
'#type' => 'checkboxes',
'#title' => $this
->t('Plugins'),
'#description' => $this
->t('Review the <a href=":doc">documentation</a> before enabling any of the plugins. Enabled plugins may offer additional configuration which you can override via <code>:code</code>', [
':doc' => 'https://github.com/aFarkas/lazysizes#plugins',
':code' => 'window.lazySizesConfig',
]),
'#options' => array_combine($plugins, $plugins),
'#default_value' => $lazy_settings
->get('lazysizes.plugins'),
];
return parent::buildForm($form, $form_state);
}