Перейти к основному содержанию

Флажки и переключатели в виде изображения

PS Лучше всего добавить новый элемент Webform.

Как создать такую ​​веб-форму:

Флажки и переключатели как изображения

Я создаю новую сущность под названием «Wizard Option» с помощью консоли Drupal, чтобы избежать ненужного URL-адреса по умолчанию с помощью node.
Вот поля, которые я использую, но при необходимости вы можете добавить другие на свой дисплей:

  • Название опции
  • Поле изображения для соответствующего варианта изображения
  • Текстовое поле списка, используемое для фильтрации параметров по категории.

Я использую радиокнопки объекта веб-формы или флажки, если это несколько вариантов.
Каждый раз, когда эти элементы формы будут использоваться, мой код будет ожидать вывода изображения.

В конфигурации каждой радиокнопки / флажка я использую пользовательские представления drupal для получения моих параметров, и я указываю в той же конфигурации параметр для отправки в это представление, который соответствует ключу моей категории текстового поля списка.

Пользовательское представление имеет эту категорию как контекстный фильтр.

А в настраиваемом модуле mywizard я использовал этот код:

mywizard.module

function mywizard_webform_element_webform_entity_radios_alter(array &$element, \Drupal\Core\Form\FormStateInterface $form_state, array $context) {
  // add a flag to specify that we want to render label with background image
  $element['#attributes']['label-with-image'] = 'true';
}
function mywizard_webform_element_webform_entity_checkboxes_alter(array &$element, \Drupal\Core\Form\FormStateInterface $form_state, array $context) {
  // add a flag to specify that we want to render label with background image
  $element['#attributes']['label-with-image'] = 'true';
}

function mywizard_preprocess_form_element(&$variables) {
  // if the flag is available we use a special theme function to render the label
  if (array_key_exists('label-with-image', $variables['element']['#attributes'])) {
    $variables['label']['#theme'] = 'form_element_label__with_image';
  }
}

function mywizard_preprocess_form_element_label__with_image(&$variables) {
    $element = $variables['element'];
    $parts = explode('-',$element['#id']);
    // this is the way I found to retrieve the entity id chosen by the user
    $id = end($parts);
    $node = \Drupal::entityTypeManager()->getStorage('wizard_option')->load($id);
    $path = $node->field_image->entity->getFileUri();
    $url = \Drupal\image\Entity\ImageStyle::load('medium')->buildUrl($path);
    
    $variables['attributes']['style'][] = 'background-image: url("' . $url . '");';
    $variables['attributes']['style'][] = 'background-position: center center;';
    $variables['attributes']['style'][] = 'background-size: cover;';
    $variables['attributes']['class'][] = 'wizard-option';    
}

И добавьте этот файл twig в папку своей темы:
form-element-label - with-image.html.twig

{{ attach_library('yourtheme/labelimages') }}
<label{{ attributes }}>
  <span class="wizard-option-text">{{ title }}</span>
</label>

в вашем css скрыть такой ввод с помощью этого правила css

input[label-with-image=true] {
    display: none;
}

Если вы хотите перевести свою веб-форму, и вы используете текстовое поле поля для классификации своих радиокнопок / или флажка, вам нужно будет применить патч Drupal Core:

https://www.drupal.org/node/2451657#267

А также для исправления самой Webform:

https://www.drupal.org/node/2878842

Оригинал: https://www.drupal.org/docs/8/modules/webform/webform-cookbook/checkboxes-radio-buttons-as-images