3

Is it possible for D7 to display several taxonomy fields inline with some separator between them? I want to have a node with 2 category types, say, a song with a Year and a Singer. Now the taxonomy displays in a column:

Year: 1999
Singer: Britney Spears

And I want it to appear inline with some separator:

Year: 1999 |separator| Singer: Britney Spears

I've found a similar question but it deals with displaying one multivalued taxonomy field. That's not quite what I want. So where should I look and what I should override to display several types of taxonomy fields inline?

Update: after spending 2 days on that I've done it using node.tpl.php and field.tpl.php. It's always better to print your separators outright. Relying on CSS is good but not when there are guys using IE6 out there (I've seen one as late as 2011). Not that I did the best solution ever here (I'm lousy with the code) but still it works and at least does what I want it to do. I did the following:

1) copied node.tpl.php from modules\node to sites\all\themes\mytheme. 2) used $content variable to find all taxonomy fields:

$taxonomy_field_names = array();
$all_field_names = array_keys($content);
foreach($all_field_names as $i => $value)
{
    $field_name = $all_field_names[$i];
    $field_type_name = '#field_type';

    //if content contains an array with $field_name and it is an array itself
    //and has an item #field_type of taxonomy_term_reference
    //it is a taxonomy field
    if(is_array($content[$field_name]) &&
        array_key_exists($field_type_name, $content[$field_name]) &&
        $content[$field_name][$field_type_name] == 'taxonomy_term_reference')
    {
        $taxonomy_field_names[] = $all_field_names[$i];
    }
} unset($i);

3) hid them to prevent rendering:

//hiding taxonomy fields
$count_taxonomy_fields = count($taxonomy_field_names);
for($i = 0; $i < $count_taxonomy_fields; $i++)
{
    hide($content[$taxonomy_field_names[$i]]);
}

4) after rendering $content I rendered taxonomy fields:

//rendering taxonomy fields
for($i = 0; $i < $count_taxonomy_fields; $i++)
{
    //printing a separator after each of the fields except the very last
    if($i < $count_taxonomy_fields - 1)
    {
        $content[$taxonomy_field_names[$i]]['#separator'] = '&bull;';
    }
    print render($content[$taxonomy_field_names[$i]]);
}

5) copied field.tpl.php from modules\field to sites\all\themes\mytheme and renamed it field--taxonomy-term-reference.tpl.php (affects all ). After setting $content[$taxonomy_field_names[$i]]['#separator'] at the previous step one can use it as $element['#separator'] in field--taxonomy-term-reference.tpl.php:

<?php if (isset($element['#separator'])): ?>
<span class="field-item-separator"><?php print $element['#separator']?></span>
<?php endif; ?>

6) added the following lines to sites\all\themes\mytheme\css\fields.css:

.field-type-taxonomy-term-reference .field-item {
   float:left;
}

To people who answered my question I offer my sincere thanks.

4

Option 1: Pure CSS. Assuming that you have your Content type's display options are set so that all the taxonomy reference fields are next to each other, you would simply display each of the divs that wrap each taxonomy field as an inline element, then use the + selector and :before pseudo-element to add your separator between each field.

These two special selectors are supported in most web browsers, but you might want to check whether they can be used in older browsers your site may need to support.

For example, if each taxonomy field is wrapped with a div having the class "field-type-taxonomy-reference" and your nodes have a div with the class "node-type" wrapping them, your CSS would look something like this:

//make the taxonomy fields and their contents display as inline elements
.node-type .field-taxonomy-reference,
.node-type .field-taxonomy-reference * {
  display: inline;
}

//add a pipe separator between two taxonomy fields
.node-type .field-taxonomy-reference + .field-taxonomy-reference:before {
  display: inline;
  content: " | ";
}

Option 2: edit the HTML with a custom field template. Copy the field.tpl.php file from Drupal core into your theme and rename it field--taxonomy-reference.tpl.php. This would affect all taxonomy reference fields across your entire site, which may not be desirable. You can also implement template_preprocess_field() in your theme's template.php to add a new template suggestion for only the nodes (and fields) that you want to have affected by this template. For example:

function YOURTHEME_preprocess_field(&$vars) {
  $variables['theme_hook_suggestions'] = array('field__' . $element['#field_type'] . '__' . $element['#bundle']);
}

This would allow you to use a field template named field--taxonomy-reference--news-article.tpl.php to affect all taxonomy reference fields on a node type named "new article". One the documentation page for template_preprocess_field() you can see a few other variables that are available for you to check (such as field name). You could make multiple fields with different names (and types) across multple node types use the same field template like this:

function YOURTHEME_preprocess_field(&$vars) {
  $field_names = array('field_name_a', 'field_name_b', 'field_name_c');

  if(in_array($element['#field_name'], $field_names) {
    $variables['theme_hook_suggestions'] = array('field__inline-style');
  }
}

This would allow you to use one template named "field--inline-style.tpl.php" for the fields named "field_name_a", "field_name_b", etc.

0

You have a few different options for this.

Option 1: CSS and Node Template -- You can simply use CSS to display the fields inline (e.g., using floats or display: inline-block). Then you can create a template file specific to the node type and print the separator between the two fields.

Option 2: Field and Node Templates -- You could also use the approach described in the answer you linked to in your question and apply it to both fields, making them display inline. Then in a template file specific to the node type you can print both fields, with the separator in between.

Option 3: Use a custom theme function -- You could also use a custom theme function for either the node type or the fields to accomplish the same thing, displaying the fields inline and printing a separator in between.

I suggest going with whichever approach sounds easiest to you. Often times people are more comfortable tackling issue in one manner over another, equally correct, manner.

  • I can't find what to override. :-) Node.tpl.php doesn't have the variable $terms defined in it. Using fields like in the answer I linked is kinda a bad approach for me because I actually have about 10 categories for a node, so overriding 10 field.tpl.php's may be an overkill. As for using custom template function, I don't know what hook to use again. – Ari Linn Mar 15 '12 at 20:27
0

There is an easier solution for the delimiter, at least: Taxonomy Formatter module: http://drupal.org/project/taxonomy_formatter

But, here is some theme override code, which you add to your theme.php file:

function NAMEOFYOURTHEME_field__taxonomy_term_reference($vars) {
  $output = '';

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

  // Render the items.
  $output .= '<ul class="field-items"' . $vars['content_attributes'] . '>';
  foreach ($vars['items'] as $delta => $item) {

    // Set a delimiter, in this case a comma
    $delimiter = ' | ';

    // If the item is the last in the array remove the comma
    if (end($vars['items']) === $item) {
      $delimiter = '';
    }

    $classes = 'field-item ' . ($delta % 2 ? 'odd' : 'even');

    // Output each taxonomy term item, with the delimiter on the end
    $output .= '<li title="Term Description should show here...themephp"  class="' . $classes . '"' . $vars['item_attributes'][$delta] . '>' . drupal_render($item) . $delimiter . '</li>';
  }

  $output .= '</ul>';
  // Render the top-level wrapper element.
  $tag = $vars['label_hidden'] ? 'div' : 'section';
  $output = "<$tag class=\"" . $vars['classes'] . '"' . $vars['attributes'] . '>' . $output . "</$tag>";

  return $output;
}
?>

I am not the author of that code (not a PHP programmer), but found it in looking for a similar solution.

In my case, I need the taxonomy term description to show on hover of the term -- so, simply in the TITLE attribute. I need this for both the node display and node form.

If anyone can help me with that, I'd be soooo grateful. I've been researching, experimenting, posting for weeks!

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.