public function BgImageFormatter::settingsForm in Background Images Formatter 8

Same name and namespace in other branches

1. 8.3 src/Plugin/Field/FieldFormatter/BgImageFormatter.php \Drupal\bg_image_formatter\Plugin\Field\FieldFormatter\BgImageFormatter::settingsForm()
2. 8.2 src/Plugin/Field/FieldFormatter/BgImageFormatter.php \Drupal\bg_image_formatter\Plugin\Field\FieldFormatter\BgImageFormatter::settingsForm()

Returns a form to configure settings for the formatter.

Invoked from \Drupal\field_ui\Form\EntityDisplayFormBase to allow administrators to configure the formatter. The field_ui module takes care of handling submitted form values.

Parameters

array $form: The form where the settings form is being included in.

\Drupal\Core\Form\FormStateInterface $form_state: The current state of the form.

Return value

array The form elements for the formatter settings.

Overrides ImageFormatter::settingsForm

1 call to BgImageFormatter::settingsForm()

ResponsiveBgImageFormatter::settingsForm in modules/responsive_bg_image_formatter/src/Plugin/Field/FieldFormatter/ResponsiveBgImageFormatter.php

Returns a form to configure settings for the formatter.

1 method overrides BgImageFormatter::settingsForm()

ResponsiveBgImageFormatter::settingsForm in modules/responsive_bg_image_formatter/src/Plugin/Field/FieldFormatter/ResponsiveBgImageFormatter.php

Returns a form to configure settings for the formatter.

File

src/Plugin/Field/FieldFormatter/BgImageFormatter.php, line 265

Class

BgImageFormatter

Class BgImageFormatter.

Namespace

Drupal\bg_image_formatter\Plugin\Field\FieldFormatter

Code

public function settingsForm(array $form, FormStateInterface $form_state) {
  $element = [];
  $settings = $this
    ->getSettings();
  $element['image_style'] = [
    '#title' => $this
      ->t('Image style'),
    '#type' => 'select',
    '#default_value' => $settings['image_style'],
    '#empty_option' => $this
      ->t('None (original image)'),
    '#options' => image_style_options(),
    '#description' => $this
      ->t('Select <a href="@href_image_style">the image style</a> to apply on images', [
      '@href_image_style' => Url::fromRoute('image.style_add')
        ->toString(),
    ]),
  ];

  // Fieldset for css settings.
  $element['css_settings'] = [
    '#type' => 'fieldset',
    '#title' => $this
      ->t('Default CSS Settings'),
    '#description' => $this
      ->t('Default CSS settings for outputting the background property.
                These settings will be concatenated to form a complete css statementthat uses the "background"
                property. For more information on the css background property see
                http://www.w3schools.com/css/css_background.asp"'),
  ];

  // The selector for the background property.
  $element['css_settings']['bg_image_selector'] = [
    '#type' => 'textarea',
    '#title' => $this
      ->t('Selector(s)'),
    '#description' => $this
      ->t('A valid CSS selector that will be used to apply the background image. One per line.
                      If the field is a multivalue field, the first line will be applied to the first value,
                      the second to the second value... and so on. Tokens are supported.'),
    '#default_value' => $settings['css_settings']['bg_image_selector'],
  ];

  // The token help relevant to this entity type.
  if (isset($form['#entity_type'])) {
    $element['css_settings']['token_help'] = [
      '#theme' => 'token_tree_link',
      '#token_types' => [
        'user',
        $form['#entity_type'],
      ],
    ];
  }
  else {
    $element['css_settings']['token_help'] = [
      '#theme' => 'token_tree_link',
    ];
  }

  // The selector for the background property.
  $element['css_settings']['bg_image_z_index'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Z Index'),
    '#description' => $this
      ->t('The z-index property specifies the stack order of an element. An element with greater stack order is
                      always in front of an element with a lower stack order. Note: z-index only works on positioned
                      elements (position:absolute, position:relative, or position:fixed)'),
    '#default_value' => $settings['css_settings']['bg_image_z_index'],
  ];

  // The selector for the background property.
  $element['css_settings']['bg_image_color'] = [
    '#type' => 'textarea',
    '#title' => $this
      ->t('Color'),
    '#description' => $this
      ->t('The background color formatted as any valid css color format (e.g. hex, rgb, text, hsl)
                      [<a href="@url">css property: background-color</a>]. One per line. If the field is a multivalue
                      field, the first line will be applied to the first value, the second to the second value...
                      and so on.', [
      '@url' => 'https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient',
    ]),
    '#default_value' => $settings['css_settings']['bg_image_color'],
  ];

  // The selector for the background property.
  $element['css_settings']['bg_image_x'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Horizontal Alignment'),
    '#description' => $this
      ->t('The horizontal alignment of the background image formatted as any valid css alignment.
                      [<a href="http://www.w3schools.com/css/pr_background-position.asp">
                      css property: background-position
                      </a>]'),
    '#default_value' => $settings['css_settings']['bg_image_x'],
  ];

  // The selector for the background property.
  $element['css_settings']['bg_image_y'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Vertical Alignment'),
    '#description' => $this
      ->t('The vertical alignment of the background image formatted as any valid css alignment.
                      [<a href="http://www.w3schools.com/css/pr_background-position.asp">
                      css property: background-position
                      </a>]'),
    '#default_value' => $settings['css_settings']['bg_image_y'],
  ];

  // The selector for the background property.
  $element['css_settings']['bg_image_attachment'] = [
    '#type' => 'radios',
    '#title' => $this
      ->t('Background Attachment'),
    '#description' => $this
      ->t('The attachment setting for the background image.
                      [<a href="http://www.w3schools.com/css/pr_background-attachment.asp">
                      css property: background-attachment
                      </a>]'),
    '#options' => [
      FALSE => $this
        ->t('Ignore'),
      'scroll' => 'Scroll',
      'fixed' => 'Fixed',
    ],
    '#default_value' => $settings['css_settings']['bg_image_attachment'],
  ];

  // The background-repeat property.
  $element['css_settings']['bg_image_repeat'] = [
    '#type' => 'radios',
    '#title' => $this
      ->t('Background Repeat'),
    '#description' => $this
      ->t('Define the repeat settings for the background image.
                      [<a href="http://www.w3schools.com/css/pr_background-repeat.asp">
                      css property: background-repeat
                      </a>]'),
    '#options' => [
      FALSE => $this
        ->t('Ignore'),
      'no-repeat' => $this
        ->t('No Repeat'),
      'repeat' => $this
        ->t('Tiled (repeat)'),
      'repeat-x' => $this
        ->t('Repeat Horizontally (repeat-x)'),
      'repeat-y' => $this
        ->t('Repeat Vertically (repeat-y)'),
    ],
    '#default_value' => $settings['css_settings']['bg_image_repeat'],
  ];

  // The background-size property.
  $element['css_settings']['bg_image_background_size'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Background Size'),
    '#description' => $this
      ->t('The size of the background (NOTE: CSS3 only. Useful for responsive designs)
                      [<a href="http://www.w3schools.com/cssref/css3_pr_background-size.asp">
                      css property: background-size
                      </a>]'),
    '#default_value' => $settings['css_settings']['bg_image_background_size'],
  ];

  // background-size:cover suppor for IE8.
  $element['css_settings']['bg_image_background_size_ie8'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Add background-size:cover support for ie8'),
    '#description' => $this
      ->t('The background-size css property is only supported on browsers that support CSS3.
                      However, there is a workaround for IE using Internet Explorer\'s built-in filters
                      (http://msdn.microsoft.com/en-us/library/ms532969%28v=vs.85%29.aspx).
                      Check this box to add the filters to the css. Sometimes it works well, sometimes it doesn\'t.
                      Use at your own risk'),
    '#default_value' => $settings['css_settings']['bg_image_background_size_ie8'],
  ];

  // Add gradient to background-image.
  $element['css_settings']['bg_image_gradient'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Gradient'),
    '#description' => $this
      ->t('Apply this background image gradient css.
                  Example: linear-gradient(red, yellow)
                  [<a href="https://www.w3schools.com/css/css3_gradients.asp">Read about gradients</a>]'),
    '#default_value' => $settings['css_settings']['bg_image_gradient'],
  ];

  // The media query specifics.
  $element['css_settings']['bg_image_media_query'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Media Query'),
    '#description' => $this
      ->t('Apply this background image css using a media query. CSS3 Only. Useful for responsive designs.
                      Example: only screen and (min-width:481px) and (max-width:768px)
                      [<a href="http://www.w3.org/TR/css3-mediaqueries/">Read about media queries</a>]'),
    '#default_value' => $settings['css_settings']['bg_image_media_query'],
  ];
  $element['css_settings']['bg_image_important'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Add "!important" to the background property.'),
    '#description' => $this
      ->t('This can be helpful to override any existing background image or color properties added by the theme.'),
    '#default_value' => $settings['css_settings']['bg_image_important'],
  ];
  $element['css_settings']['bg_image_path_format'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Image Path Format'),
    '#options' => [
      'absolute' => $this
        ->t('Absolute'),
      'relative' => $this
        ->t('Relative'),
    ],
    '#description' => $this
      ->t('Defaults to absolute URLs, however relative URLs maybe solve issues with mixed content errors on websites being served on HTTPS.'),
    '#default_value' => $settings['css_settings']['bg_image_path_format'],
  ];
  return $element;
}