web-dev-qa-db-ja.com

ノード編集フォームのラジオボタンフィールドにテーマを設定する方法

ラジオボタンフィールドがノードの追加/編集フォームにレンダリングされる標準的な方法は、クラスを持つラッパーdivがあることです。

form-item form-type-radio form-item-mymodule-imglayout-und

内部には、入力要素とラベル要素があります。これを変更するためにどこにフックするのですか？ラッパーdivにクラスを持たせたい：

form-item form-type-radio form-item-mymodule-imglayout-und mycustomclass

また、カスタムクラスは、ボタンが表すオプションに依存するか、または連続する必要があります。最初、2番目、3番目など

追加情報：

私のポイントは、それが表すオプションに応じて、各ラジオボタンに異なる大きな背景画像を追加できるようにすることです。以下のように-各ラジオボタンには、オプションを視覚的に表す関連画像があります。

enter image description here

7themingformshooks
3
camcam

これは、カスタムモジュールに実装できるこの問題の可能な解決策です

function mymodule_preprocess_radio (&$variables) {
  $element = &$variables['element'];
  if ((isset($element['#name'])) && substr($element['#name'],0,18) == 'mymodule_imglayout') {
    $variables['theme_hook_suggestion'] = 'radio__imglayout';
  }
}

function theme_radio__imglayout($variables) {
  $element = $variables['element'];
  $element['#attributes']['type'] = 'radio';
  element_set_attributes($element, array('id', 'name', '#return_value' => 'value'));

  if (isset($element['#return_value']) && $element['#value'] !== FALSE && $element['#value'] == $element['#return_value']) {
    $element['#attributes']['checked'] = 'checked';
  }
  _form_set_class($element, array('form-radio'));

  $output = '<input' . drupal_attributes($element['#attributes']) . ' />';
  $id = $element['#id'];
  $mydiv = "<div class = 'imglayout {$id}'></div>";
  return   $mydiv .'<br/>'. $output  ;
}

function mymodule_theme($existing, $type, $theme, $path) {
   return array(
     'radio__imglayout' => array(
       'render element' => 'element',
     ),
  );
}

$mydivには別個のクラスがあり、<input>要素と<label>要素の前に配置されるため、左にフロートし、それぞれに幅と高さ、および別個の背景画像を指定するだけです。ラジオの真上に表示されます（最初は望んでいたほどではありませんが、それはマイナーです）。

2
camcam

あなたがする必要があるのは、フォーム配列を変更することだけだと思います。これは、独自のhook_form_alter実装で実現できます。

例えば：

function YOURMODULE_form_alter(&$form, &$form_state, $form_id) {
    if($form_id == 'YOUR_CONTENT_TYPE_node_form') {
        $form['YOUR_ELEMENT_NAME']['#attributes']['class'][] = 'your-custom-class';
    }
}
2
Alex Petrov

私はこれをテーマレイヤーで次のテーマ関数で達成しました：

function THEME_form_element($variables) {
  $element = &$variables['element'];

  // This function is invoked as theme wrapper, but the rendered form element
  // may not necessarily have been processed by form_builder().
  $element += array(
    '#title_display' => 'before',
  );

  // Add element #id for #type 'item'.
  if (isset($element['#markup']) && !empty($element['#id'])) {
    $attributes['id'] = $element['#id'];
  }
  // Add element's #type and #name as class to aid with JS/CSS selectors.
  $attributes['class'] = array('form-item');
  if (!empty($element['#type'])) {
    $attributes['class'][] = 'form-type-' . strtr($element['#type'], '_', '-');
  }
  if (!empty($element['#name'])) {
    $attributes['class'][] = 'form-item-' . strtr($element['#name'], array(' ' => '-', '_' => '-', '[' => '-', ']' => ''));
  }
  // Add a class for disabled elements to facilitate cross-browser styling.
  if (!empty($element['#attributes']['disabled'])) {
    $attributes['class'][] = 'form-disabled';
  }
  if (isset($element['#type']) && isset($element['#return_value']) && $element['#type'] == 'radio') {
    $attributes['class'][] = 'form-radio-option-' . drupal_html_class($element['#return_value']);
  }
  $output = '<div' . drupal_attributes($attributes) . '>' . "\n";

  // If #title is not set, we don't display any label or required marker.
  if (!isset($element['#title'])) {
    $element['#title_display'] = 'none';
  }
  $prefix = isset($element['#field_prefix']) ? '<span class="field-prefix">' . $element['#field_prefix'] . '</span> ' : '';
  $suffix = isset($element['#field_suffix']) ? ' <span class="field-suffix">' . $element['#field_suffix'] . '</span>' : '';

  switch ($element['#title_display']) {
    case 'before':
    case 'invisible':
      $output .= ' ' . theme('form_element_label', $variables);
      $output .= ' ' . $prefix . $element['#children'] . $suffix . "\n";
      break;

    case 'after':
      $output .= ' ' . $prefix . $element['#children'] . $suffix;
      $output .= ' ' . theme('form_element_label', $variables) . "\n";
      break;

    case 'none':
    case 'attribute':
      // Output no label and no required marker, only the children.
      $output .= ' ' . $prefix . $element['#children'] . $suffix . "\n";
      break;
  }

  if (!empty($element['#description'])) {
    $output .= '<div class="description">' . $element['#description'] . "</div>\n";
  }

  $output .= "</div>\n";

  return $output;
}

これは theme_form_element をオーバーライドし、値ベースのクラスを各一意の無線要素コンテナに割り当てます。

0
tmsimont