Display comma-separated list of taxonomy terms?

In my node.tpl.php template, I want to print out a list of taxonomy terms (the taxonomy is called "channels."). If I use:

<?php print render($content['field_channel']); ?>

It works, obviously, but the best I can do to get them inline is to use CSS to float them left. I would like them to be separated by commas. Any ideas?

Answers 7

  • You could try theming the field using field.tpl.php or theme_field().

    As an example (using field.tpl.php):

    1. Copy field.tpl.php to your theme directory from "modules/field/theme"
    2. Make a copy of that file and rename it to field--field-channel.tpl.php
    3. Edit the file however you like.

    As a quick/dirty example for this to work, field--field-channel.tpl.php could look like:

    <div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
      <?php if (!$label_hidden) : ?>
        <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</div>
      <?php endif; ?>
      <div class="field-items"<?php print $content_attributes; ?>>
        <?php foreach ($items as $delta => $item) : ?>
          <div style="display:inline;" class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>>
            <?php 
              print render($item);
              // Add comma if not last item
              if ($delta < (count($items) - 1)) {
                print ','; 
              }
            ?>
          </div>
        <?php endforeach; ?>
      </div>
    </div>
    

    There are probably multiple ways to accomplish this using the .tpl file, but this is just one option. I recommend adding a class to the DIV instead of a style and make the changes in your stylesheet instead of using inline styles.


  • The Text Formatter module is now available for Drupal 7, and lets you do this without custom theme work.

    This module provides a field display formatter to render field values as HTML or comma-separated lists. This can currently be used on all core field types (text, long text, number, list, and taxonomy reference etc..) and some contributed fields. (see below).

    For multi-value fields, each field value becomes a list item. For long text fields, each line becomes a list item.


  • Here's one way to use the theme_field approach (add it to your template.php file):

    /**
     * Implements theme_field()
     *
     * Make field items a comma separated unordered list
     */
    function THEMENAME_field__NAME_OF_FIELD__NAME_OF_CONTENT_TYPE($variables) {
      $output = '';
    
      // Render the label, if it's not hidden.
      if (!$variables['label_hidden']) {
        $output .= '<div class="field-label"' . $variables['title_attributes'] . '>' . $variables['label'] . ':&nbsp;</div>';
      }
    
      // Render the items as a comma separated inline list
      $output .= '<ul class="field-items"' . $variables['content_attributes'] . '>';
      for ($i=0; $i < count($variables['items']); $i++) {
        $output .= '<li>'. drupal_render($variables['items'][$i]);
        $output .= ($i == count($variables['items'])-1) ? '</li>' : ', </li>';
      }
      $output .= '</ul>';
    
      return $output;
    }
    

  • You can do this easily just in CSS:

    .field-type-taxonomy-term-reference .field-items .field-item {
      display: inline-block;
      *display: inline;
      *zoom: 1;
    }
    .field-type-taxonomy-term-reference .field-items .field-item:after {
      content: ", ";
    }
    .field-type-taxonomy-term-reference .field-items .field-item:last-child:after {
      content: "";
    }
    


  • <?php
    if ($node->taxonomy) {
        foreach($node->taxonomy as $term) {
            if ($term->vid == 3) { // the id of the vocabulary
                $my_terms[] = l(
                    t($term->name),
                    'taxonomy/term/' . $term->tid
                );
            }
        }
    }
    
    if ($my_terms) { ?>
        <div class="clear-block">
            <div class="terms">
                <?php print implode(", ", $my_terms); ?>
            </div>
        </div>
    <?php } ?>
    

  • Even easier for delimiter and the wrapper, you use the Taxonomy Formatter module: http://drupal.org/project/taxonomy_formatter

    More details from project page:

    This is a small module written to provide a custom formatter for taxonomy items. The default formatters both output the terms wrapped in divs. This module adds a new formatter that allows you to specify the element type, the wrapper type, classes for both, the separator used, and if they link to the term pages or not. This gives much more customizable layout options.


Related Questions