3

In Drupal 7, I have a field for a custom node type that is a text list "List (text)" with a widget input type of "Check boxes/radio buttons". When displayed on the front-end the following HTML is generated:

<div class="field-items">
  <div class="field-item even">XHTML</div>
  <div class="field-item odd">CSS 3</div>
  <div class="field-item even">PHP</div>
</div>

How can I theme this output as an HTML <UL> instead? Something like this:

<ul>
  <li>XHTML</li>
  <li>CSS 3</li>
  <li>PHP</li>
</ul>

I should note that I'm overriding output using a node--custom_type.tpl.php file.

4

The "right" way of rendering a list, that is, one that interacts properly with all the other systems in Core is theme_item_list.

Code example:

// In this case, $result is a list of nodes returned from a database query.
$list = array();
$list['type'] = 'ul';
$list['title'] = 'List of nodes';
$list['attributes'] = array('class' => array('list-of-nodes'));
$list['items'] = array();
foreach($result as $record) {
  $list['items'][] = l($record->title, 'node/' . $record->nid);
}
$output = theme('item_list', $list);

This should be applicable in your node.tpl as well.

  • +1 this function is in file theme.inc so to override this (e.g. to be able to insert css classes into the <li> html tag) then, in my theme, would I: copy theme.inc into my theme's includes folder and then override this function name e.g. mytheme_item_list and edit code as required? – therobyouknow Jul 12 '13 at 11:01
  • I made a small correction, and added an example of adding a css class, see the attributes line. You don't need to copy the theme file, if you all you want is a css class, though you could re-implement THEME_item_list in your template.php if you want to do wildly different things. – Letharion Jul 12 '13 at 12:03
1

I can advise you to install Devel Themer (don't worry, you can install safely the dev version) and when you'll active you can navigate between elements and you'll have every information you need about theming.

So, active it and then select you element and check the candidate templates or/and candidate functions.

1

If you look into bartik template.php, you will find how to override taxonomy field output exactly to your expectation. This is applicable to any other field, the way you want either with UL, OL, DL, etc:

/**
 * Implements theme_field__field_type().
 */
function bartik_field__taxonomy_term_reference($variables) {
  $output = '';

  // Render the label, if it's not hidden.
  if (!$variables['label_hidden']) {
    $output .= '<h3 class="field-label">' . $variables['label'] . ': </h3>';
  }

  // Render the items.
  $output .= ($variables['element']['#label_display'] == 'inline') ? '<ul class="links inline">' : '<ul class="links">';
  foreach ($variables['items'] as $delta => $item) {
    $output .= '<li class="taxonomy-term-reference-' . $delta . '"' . $variables['item_attributes'][$delta] . '>' . drupal_render($item) . '</li>';
  }
  $output .= '</ul>';

  // Render the top-level DIV.
  $output = '<div class="' . $variables['classes'] . (!in_array('clearfix', $variables['classes_array']) ? ' clearfix' : '') . '">' . $output . '</div>';

  return $output;
}
0

You can alternatively use the Text Formatter module which allows you to set the display of fields as either an unordered or ordered list - just like your original question's layout.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.