Render multiple taxonomy term input as unordered list

Question

We have a content type allowing input from taxonomy term lists, and some fields allow multiple values. When there are multiple values, the output always seems to string them together inline, as much as will fit the available display width. We are aware of the option "separated" with the option of commas, spaces, or slashes, but that still renders multiple terms on the same line if they fit.

What's desired is to render multiple terms in a one-item-per-line list, preferably an unordered list with or without bullets. I tried looking at the CSS but all I could do was to add bullets, although it still rendered multiple terms inline. Suggestions? Thanks.

Answer 1

This may not fit your need exactly, but did you know that the Separator in the 'Multiple field settings' accepts html?

That means that you could use "<br />" as the separator, and they'll render on different lines, even if they are not in a list.

Would that be enough for your needs or do you need a list?

====================== Edit based on comments =======

Maybe just a simple css rule added to your theme then that places the break there for you:

.your-content-type .your-field-class a {
    display: block;
}

It looks, based on your comments, that the above example may be something like this for you:

.node-content-type .field-name-field-client a {
        display: block;
}

That should do it for you. The 'block' (vs inline) display will put each link on a separate line. If you do that, you can remove all the commas and other separators, or those will appear on separate lines too (because of the block display of the link).

** Note: I added one more selector (the content type selector) to make this rule even more specific. Based on the rule above, this 'display: block' property will be applied only to nodes of this specific content type (so if you use this tag somewhere else, they won't just come out on separate lines unexpectedly). Does that make sense?

To find what the content-type class for your node is, look into the page source again and find the line that looks like this:

<div id="node-62828" class="node node-content-type view-mode-full node-by-viewer clearfix">

The content type should be the second word in the class... in Drupal, all pages have the content type they belong to as a class, so that's awesome for theming!!

Finally, after changing your css, you may not see the result right away - you may need to clear your cache before your change will be applied.

Hope this helps!

Answer 2

You can always theme fields as you want - just use fields suggestion templates and wrap them as you want. The default field suggestion file should be named like field--machine_name.tpl.php for D7 and single '-' for D6.

You can get more information for field templates at https://api.drupal.org/api/drupal/modules!field!theme!field.tpl.php/7

You can loop through all items in the $items[] array the field contains in the case of multi- value field and wrap them as it is required.

The theme template will work for field output throughout the system where field is rendered!

I hope this helps!

Answer 3

Getting back to this after several years! (Original motivation was my own desire to change the display, but eventually the client requested it.) Since Display Suite is being used in the display of the field items, the best solution was to enable DS "expert field templates," then enable the expert field template for just this one field item in the page, and apply DS configuration as shown in the screen capture; note that settings under "Manage Display" are significantly expanded due to enabling expert field templates:

This solution is based on an answer is this post: https://www.drupal.org/node/1141524 but my specific settings had to be a little different to accomplish the desired result.