How to add more image styles to an image element in a content type

Question

I have a image field in my content type. In that field the images should be saved in two image sizes. As an example when I uploaded a photo it should save as two photos. One for 200x200 px and one for 360x360 px.

When I change the function settingsForm(array $form, FormStateInterface $form_state) in ImageWidget.php as below it applies to the all image tags in content types.

public function settingsForm(array $form, FormStateInterface $form_state) {

    $element = parent::settingsForm($form, $form_state);

    $element['preview_image_style'] = [
      '#title' => t('Preview image style'),
      '#type' => 'select',
      '#options' => image_style_options(FALSE),
      '#empty_option' => '<' . t('no preview') . '>',
      '#default_value' => $this->getSetting('preview_image_style'),
      '#description' => t('The preview image will be shown while editing the content.'),
      '#weight' => 15,
    ];

    $element['main_image_style'] = [
      '#title' => t('Main image style'),
      '#type' => 'select',
      '#options' => image_style_options(FALSE),
      '#empty_option' => '<' . t('no preview') . '>',
      '#default_value' => $this->getSetting('main_image_style'),
      '#description' => t('The main image will be shown when opening the popup.'),
      '#weight' => 14,
    ];

    return $element;
}

I need to do this only for a selected content types selected image field. Is there a way to do this?

Answer 1

Instead of altering the default field widget of the image fields, you should create an own custom field widget.

You may either extend the existing widget, or create it from the scratch by copying the image field widget's code to your own widget.

Then you will be able to just select that widget for your images that require two image styles to be selected, while other image fields can still use the default widget.

Edit:

For defining the different image styles for output to the end user (within your slider), you will be better off to creating a custom field formatter with according settings and output and choosing this formatter in "Manage display" of your content type. A good starting point once again is the existing field formatter.