How to restrict a field choice allowing only one to be populated?

Question

On a basic page I have two similar fields. One for an image and the other for a video.

Either can be populated, but preferably not both, as I don't not want two fields to be displayed on the front end. I also want consistency across multiple view modes with only one being displayed in teasers etc

This trouble is, some editors do not appreciate the reasons and populate both fields, so I need to method for limiting this.

With D7 I found a good solution by using Conditional Fields module. By using a select list (for the file type). the corresponding field input would be exposed in the admin and the same field would be displayed on the frontend. Even if both fields were populated, only the current selection would display.

The D8 version of conditional_fields does not yet have this functionality, and may not get it. See my issue

I am therefore looking for an alternative method and hoped one of the experts here might some suggestions. I am looking for something simple and could not consider anything unsuitable for an untrained editor.

Answer 1

A bit confusing because it is rare for me to attempt any coding.

For this example I will pretend the content type is "Article".

First go to manage fields, and add a new field of list (text) to your content type. Let's say the possible values are "video" and "image". So For allowed values list, put

image|image
video|video

In /themes/your_theme_name/your_theme_name.theme add the following

/**
 * Implements hook_form_FORM_ID_alter().
 */
function your_theme_name_form_node_article_edit_form_alter(&$form, \Drupal\Core\Form\FormStateInterface &$form_state, $form_id) {
  $form['field_image']['#states'] = [
    'visible' => [
      'select[name="field_select"]' => ['value' => 'image']
    ]
  ];
  $form['field_video']['#states'] = [
     'visible' => [
       'select[name="field_select"]' => ['value' => 'video']
    ]
  ];
}

• Replace your_theme_name with your actual theme name.
• Replace article with your actual content type name.
• Replace field_select with the machine name of your select field.
• Replace field_image with the machine name of your image field.
• Replace field_video with the machine name of your video field.

Lastly, clear and flush all cache to see changes.

_{Source: Drupal 8 - Conditionally hide a form field}