public function TextOverlayImageEffect::buildConfigurationForm in Image Effects 8

Same name and namespace in other branches
8.3 src/Plugin/ImageEffect/TextOverlayImageEffect.php \Drupal\image_effects\Plugin\ImageEffect\TextOverlayImageEffect::buildConfigurationForm()
8.2 src/Plugin/ImageEffect/TextOverlayImageEffect.php \Drupal\image_effects\Plugin\ImageEffect\TextOverlayImageEffect::buildConfigurationForm()
Form constructor.
Plugin forms are embedded in other forms. In order to know where the plugin form is located in the parent form, #parents and #array_parents must be known, but these are not available during the initial build phase. In order to have these properties available when building the plugin form's elements, let this method return a form element that has a #process callback and build the rest of the form in the callback. By the time the callback is executed, the element's #parents and #array_parents properties will have been set by the form API. For more documentation on #parents and #array_parents, see \Drupal\Core\Render\Element\FormElement.
Parameters

array $form: An associative array containing the initial structure of the plugin form.
\Drupal\Core\Form\FormStateInterface $form_state: The current state of the form. Calling code should pass on a subform state created through \Drupal\Core\Form\SubformState::createForSubform().
Return value

array The form structure.
Overrides PluginFormInterface::buildConfigurationForm
File

src/Plugin/ImageEffect/TextOverlayImageEffect.php, line 189
Class

TextOverlayImageEffect: Overlays text on the image, defining text font, size and positioning.
Namespace

Drupal\image_effects\Plugin\ImageEffect
Code

public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
  $form = [];
  if ($this
    ->getTextimageFactory()) {

    // Preview effect.
    list($success, $preview) = $this
      ->buildPreviewRender($this->configuration);
    $form['preview'] = [
      '#type' => 'item',
      '#title' => $this
        ->t('Preview'),
      '#theme' => 'image_effects_text_overlay_preview',
      '#success' => $success,
      '#preview' => $preview,
    ];

    // Preview bar.
    $form['preview_bar'] = [
      '#type' => 'container',
      '#attributes' => [
        'class' => [
          'container-inline',
        ],
      ],
    ];

    // Refresh button.
    $form['preview_bar']['preview'] = [
      '#type' => 'button',
      '#value' => $this
        ->t('Refresh preview'),
      '#name' => 'preview',
      '#ajax' => [
        'callback' => [
          $this,
          'processAjaxPreview',
        ],
      ],
    ];

    // Visual aids.
    $form['preview_bar']['debug_visuals'] = [
      '#type' => 'checkbox',
      '#title' => $this
        ->t('Visual aids in preview'),
      '#default_value' => FALSE,
    ];
  }

  // Settings.
  $form['settings'] = [
    '#type' => 'vertical_tabs',
    '#tree' => FALSE,
  ];

  // Text default.
  $form['text_default'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Text default'),
    '#group' => 'settings',
  ];
  $form['text_default']['text_string'] = [
    '#type' => 'textarea',
    '#title' => $this
      ->t('Default text'),
    '#default_value' => $this->configuration['text_string'],
    '#description' => $this
      ->t('Enter the default text string for this effect. You can also enter tokens, that will be resolved when applying the effect. <b>Note:</b> only global tokens can be resolved by standard Drupal Image field formatters and widgets. The Textimage module provides a formatter that can also resolve node, file and user tokens.'),
    '#rows' => 3,
    '#required' => TRUE,
  ];
  if ($token_tree_builder = $this
    ->getTokenTreeBuilder()) {
    $form['text_default']['tokens'] = $token_tree_builder
      ->buildAllRenderable();
  }

  // Strip HTML tags.
  $form['text_default']['strip_tags'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Strip HTML tags'),
    '#description' => $this
      ->t("If checked, HTML tags will be stripped from the text. For example, '<kbd>&lt;p&gt;Para1&lt;/p&gt;&lt;!-- Comment --&gt; Para2</kbd>' will be converted to '<kbd>Para1 Para2</kbd>'."),
    '#default_value' => $this->configuration['text']['strip_tags'],
  ];

  // Decode HTML entities.
  $form['text_default']['decode_entities'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Decode HTML entities'),
    '#description' => $this
      ->t("If checked, HTML entities will be decoded. For example, '<kbd>&amp;quot;Title&amp;quot;:&amp;nbsp;One</kbd>' will be converted to <kbd>'&quot;Title&quot;: One</kbd>'."),
    '#default_value' => $this->configuration['text']['decode_entities'],
  ];

  // Font settings.
  $form['font'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Font settings'),
    '#group' => 'settings',
  ];
  $form['font']['uri'] = $this->fontSelector
    ->selectionElement([
    '#title' => $this
      ->t('Font'),
    '#description' => $this
      ->t('Select the font to be used in this image.'),
    '#default_value' => $this->configuration['font']['uri'],
  ]);
  $form['font']['size'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Size'),
    '#description' => $this
      ->t('Enter the size of the text to be generated.'),
    '#default_value' => $this->configuration['font']['size'],
    '#maxlength' => 5,
    '#size' => 3,
    '#required' => TRUE,
    '#min' => 1,
  ];
  $form['font']['angle'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Rotation'),
    '#maxlength' => 4,
    '#size' => 4,
    '#field_suffix' => $this
      ->t('&deg;'),
    '#description' => $this
      ->t('Enter the angle in degrees at which the text will be displayed. Positive numbers rotate the text clockwise, negative numbers counter-clockwise.'),
    '#default_value' => $this->configuration['font']['angle'],
    '#min' => -360,
    '#max' => 360,
  ];
  $form['font']['color'] = [
    '#type' => 'image_effects_color',
    '#title' => $this
      ->t('Font color'),
    '#description' => $this
      ->t('Set the font color.'),
    '#allow_opacity' => TRUE,
    '#default_value' => $this->configuration['font']['color'],
  ];

  // Outline.
  $form['font']['stroke'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Outline / Shadow'),
    '#description' => $this
      ->t('Optionally add an outline or shadow around the font. Enter the information in pixels.'),
  ];
  $stroke_options = [
    'outline' => $this
      ->t('Outline'),
    'shadow' => $this
      ->t('Shadow'),
  ];
  $form['font']['stroke']['mode'] = [
    '#type' => 'radios',
    '#title' => $this
      ->t('Mode'),
    '#options' => $stroke_options,
    '#default_value' => $this->configuration['font']['stroke_mode'],
  ];
  $form['font']['stroke']['top'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Top'),
    '#default_value' => $this->configuration['font']['outline_top'],
    '#maxlength' => 2,
    '#size' => 3,
    '#field_suffix' => 'px',
    '#min' => 0,
    '#states' => [
      'visible' => [
        ':radio[name="data[font][stroke][mode]"]' => [
          'value' => 'outline',
        ],
      ],
    ],
  ];
  $form['font']['stroke']['right'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Right'),
    '#default_value' => $this->configuration['font']['outline_right'],
    '#maxlength' => 2,
    '#size' => 3,
    '#field_suffix' => 'px',
    '#min' => 0,
    '#states' => [
      'visible' => [
        ':radio[name="data[font][stroke][mode]"]' => [
          'value' => 'outline',
        ],
      ],
    ],
  ];
  $form['font']['stroke']['bottom'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Bottom'),
    '#default_value' => $this->configuration['font']['outline_bottom'],
    '#maxlength' => 2,
    '#size' => 3,
    '#field_suffix' => 'px',
    '#min' => 0,
    '#states' => [
      'visible' => [
        ':radio[name="data[font][stroke][mode]"]' => [
          'value' => 'outline',
        ],
      ],
    ],
  ];
  $form['font']['stroke']['left'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Left'),
    '#default_value' => $this->configuration['font']['outline_left'],
    '#maxlength' => 2,
    '#size' => 3,
    '#field_suffix' => 'px',
    '#min' => 0,
    '#states' => [
      'visible' => [
        ':radio[name="data[font][stroke][mode]"]' => [
          'value' => 'outline',
        ],
      ],
    ],
  ];
  $form['font']['stroke']['x_offset'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Horizontal offset'),
    '#default_value' => $this->configuration['font']['shadow_x_offset'],
    '#maxlength' => 3,
    '#size' => 3,
    '#field_suffix' => 'px',
    '#min' => 1,
    '#states' => [
      'visible' => [
        ':radio[name="data[font][stroke][mode]"]' => [
          'value' => 'shadow',
        ],
      ],
    ],
  ];
  $form['font']['stroke']['y_offset'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Vertical offset'),
    '#default_value' => $this->configuration['font']['shadow_y_offset'],
    '#maxlength' => 3,
    '#size' => 3,
    '#field_suffix' => 'px',
    '#min' => 1,
    '#states' => [
      'visible' => [
        ':radio[name="data[font][stroke][mode]"]' => [
          'value' => 'shadow',
        ],
      ],
    ],
  ];
  $form['font']['stroke']['width'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Horizontal elongation'),
    '#default_value' => $this->configuration['font']['shadow_width'],
    '#maxlength' => 2,
    '#size' => 3,
    '#field_suffix' => 'px',
    '#min' => 0,
    '#states' => [
      'visible' => [
        ':radio[name="data[font][stroke][mode]"]' => [
          'value' => 'shadow',
        ],
      ],
    ],
  ];
  $form['font']['stroke']['height'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Vertical elongation'),
    '#default_value' => $this->configuration['font']['shadow_height'],
    '#maxlength' => 2,
    '#size' => 3,
    '#field_suffix' => 'px',
    '#min' => 0,
    '#states' => [
      'visible' => [
        ':radio[name="data[font][stroke][mode]"]' => [
          'value' => 'shadow',
        ],
      ],
    ],
  ];
  $form['font']['stroke']['color'] = [
    '#type' => 'image_effects_color',
    '#title' => $this
      ->t('Color'),
    '#description' => $this
      ->t('Set the outline/shadow color.'),
    '#allow_opacity' => TRUE,
    '#default_value' => $this->configuration['font']['stroke_color'],
  ];

  // Text settings.
  $form['text'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Text settings'),
    '#group' => 'settings',
  ];

  // Max characters.
  $form['text']['maximum_chars'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Maximum characters'),
    '#description' => $this
      ->t('The maximum allowed characters of text. Text longer than this will be trimmed. Leave blank for no limit.'),
    '#default_value' => $this->configuration['text']['maximum_chars'],
    '#maxlength' => 4,
    '#size' => 5,
    '#min' => 0,
  ];
  $form['text']['excess_chars_text'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t("Excess text"),
    '#default_value' => $this->configuration['text']['excess_chars_text'],
    '#description' => $this
      ->t('Text to append to the end of the source text, after trimming.'),
    '#states' => [
      'visible' => [
        ':input[name="data[text][maximum_chars]"]' => [
          '!value' => '',
        ],
      ],
    ],
  ];

  // Inner width.
  $form['text']['maximum_width'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Maximum width'),
    '#field_suffix' => $this
      ->t('px'),
    '#description' => $this
      ->t('Maximum width of the text image, inclusive of padding. Text lines wider than this will be wrapped. Set to 0 to disable wrapping. <b>Note:</b> in case of rotation, the width of the final image rendered will differ, to accommodate the rotation. If you need a strict width/height, add image resize/scale/crop effects afterwards.'),
    '#default_value' => $this->configuration['text']['maximum_width'],
    '#maxlength' => 4,
    '#size' => 4,
    '#min' => 0,
  ];
  $form['text']['fixed_width'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Fixed width?'),
    '#description' => $this
      ->t('If checked, the width will always be equal to the maximum width.'),
    '#default_value' => $this->configuration['text']['fixed_width'],
    '#states' => [
      'visible' => [
        ':input[name="data[text][maximum_width]"]' => [
          '!value' => 0,
        ],
      ],
    ],
  ];

  // Text alignment.
  $form['text']['align'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Text alignment'),
    '#options' => [
      'left' => $this
        ->t('Left'),
      'center' => $this
        ->t('Center'),
      'right' => $this
        ->t('Right'),
    ],
    '#default_value' => $this->configuration['text']['align'],
    '#description' => $this
      ->t('Select how the text should be aligned within the resulting image. The default aligns to the left.'),
  ];

  // Line spacing (Leading).
  $form['text']['line_spacing'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Line spacing (Leading)'),
    '#field_suffix' => $this
      ->t('px'),
    '#default_value' => $this->configuration['text']['line_spacing'],
    '#maxlength' => 4,
    '#size' => 4,
    '#description' => $this
      ->t('Specify the space in pixels to be added between text lines (Leading). Can be negative.'),
  ];
  $form['text']['case_format'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Case format'),
    '#options' => [
      '' => $this
        ->t('Default'),
      'upper' => $this
        ->t('UPPERCASE'),
      'lower' => $this
        ->t('lowercase'),
      'ucwords' => $this
        ->t('Uppercase Words'),
      'ucfirst' => $this
        ->t('Uppercase first'),
    ],
    '#description' => $this
      ->t('Convert the input text to a desired format. The default makes no changes to input text.'),
    '#default_value' => $this->configuration['text']['case_format'],
  ];

  // Layout settings.
  $form['layout'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Layout settings'),
    '#group' => 'settings',
  ];

  // Position.
  $form['layout']['position'] = [
    '#type' => 'details',
    '#open' => TRUE,
    '#title' => $this
      ->t('Position'),
  ];
  $form['layout']['position']['placement'] = [
    '#type' => 'radios',
    '#title' => $this
      ->t('Placement'),
    '#options' => [
      'left-top' => $this
        ->t('Top left'),
      'center-top' => $this
        ->t('Top center'),
      'right-top' => $this
        ->t('Top right'),
      'left-center' => $this
        ->t('Center left'),
      'center-center' => $this
        ->t('Center'),
      'right-center' => $this
        ->t('Center right'),
      'left-bottom' => $this
        ->t('Bottom left'),
      'center-bottom' => $this
        ->t('Bottom center'),
      'right-bottom' => $this
        ->t('Bottom right'),
    ],
    '#theme' => 'image_anchor',
    '#default_value' => implode('-', [
      $this->configuration['layout']['x_pos'],
      $this->configuration['layout']['y_pos'],
    ]),
    '#description' => $this
      ->t('Position of the text on the underlying image.'),
  ];
  $form['layout']['position']['x_offset'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Horizontal offset'),
    '#field_suffix' => 'px',
    '#description' => $this
      ->t('Additional horizontal offset from placement.'),
    '#default_value' => $this->configuration['layout']['x_offset'],
    '#maxlength' => 4,
    '#size' => 4,
  ];
  $form['layout']['position']['y_offset'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Vertical offset'),
    '#field_suffix' => 'px',
    '#description' => $this
      ->t('Additional vertical offset from placement.'),
    '#default_value' => $this->configuration['layout']['y_offset'],
    '#maxlength' => 4,
    '#size' => 4,
  ];

  // Overflow action.
  $form['layout']['position']['overflow_action'] = [
    '#type' => 'radios',
    '#title' => $this
      ->t('Overflow'),
    '#default_value' => $this->configuration['layout']['overflow_action'],
    '#options' => [
      'extend' => $this
        ->t('<b>Extend image.</b> The underlying image will be extended to fit the text.'),
      'crop' => $this
        ->t('<b>Crop text.</b> Only the part of the text fitting in the image is rendered.'),
      'scaletext' => $this
        ->t('<b>Scale text.</b> The text will be scaled to fit the underlying image.'),
    ],
    '#description' => $this
      ->t('Action to take if text overflows the underlying image.'),
  ];
  $form['layout']['position']['extended_color'] = [
    '#type' => 'image_effects_color',
    '#title' => $this
      ->t('Extended background color'),
    '#description' => $this
      ->t('Set the color to be used when extending the underlying image.'),
    '#allow_null' => TRUE,
    '#allow_opacity' => TRUE,
    '#default_value' => $this->configuration['layout']['extended_color'],
    '#states' => [
      'visible' => [
        ':radio[name="data[layout][position][overflow_action]"]' => [
          'value' => 'extend',
        ],
      ],
    ],
  ];

  // Padding.
  $form['layout']['padding'] = [
    '#type' => 'details',
    '#open' => TRUE,
    '#title' => $this
      ->t('Padding'),
    '#description' => $this
      ->t('Specify the padding in pixels to be added around the generated text.'),
  ];
  $form['layout']['padding']['top'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Top'),
    '#field_suffix' => $this
      ->t('px'),
    '#default_value' => $this->configuration['layout']['padding_top'],
    '#maxlength' => 4,
    '#size' => 4,
  ];
  $form['layout']['padding']['right'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Right'),
    '#field_suffix' => $this
      ->t('px'),
    '#default_value' => $this->configuration['layout']['padding_right'],
    '#maxlength' => 4,
    '#size' => 4,
  ];
  $form['layout']['padding']['bottom'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Bottom'),
    '#field_suffix' => $this
      ->t('px'),
    '#default_value' => $this->configuration['layout']['padding_bottom'],
    '#maxlength' => 4,
    '#size' => 4,
  ];
  $form['layout']['padding']['left'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Left'),
    '#field_suffix' => $this
      ->t('px'),
    '#default_value' => $this->configuration['layout']['padding_left'],
    '#maxlength' => 4,
    '#size' => 4,
  ];

  // Background color.
  $form['layout']['background_color'] = [
    '#type' => 'image_effects_color',
    '#title' => $this
      ->t('Background color'),
    '#description' => $this
      ->t('Select the color you wish to use for the background of the text.'),
    '#allow_null' => TRUE,
    '#allow_opacity' => TRUE,
    '#default_value' => $this->configuration['layout']['background_color'],
  ];
  return $form;
}
You are here
