How to change the markup for a field

Question

I'd like to change the output from the field formatter view from the Field API. I'd like a cleaner markup without unnecessary tags. What's the best way to clean up field formatter view output? Many thanks.

Ideally to change from this:

<div class="field field--name-field-visualisation field--type-mango-maker field--label-above">
    <div class="field__label">Visualisation:&nbsp;</div>
    <div class="field__items">
        <div class="field__item even">
            <div class="something"></div>
        </div>
    </div>
</div>

to this:

<div class="field field--name-field-visualisation field--type-mango-maker field--label-above">
    <div class="field__label">Visualisation:&nbsp;</div>
    <div class="something"></div>
</div>

heres my hook_function_field_formatter_view function:

function mango_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items, $display) {

  $output[0] = array(
    '#theme' => 'container',
    '#attributes' => array(
      'class' => array('something'),
    ),
  );
  return $output;
}

Answer 1

If you want to change output of the field in a Views, use Semantic Views

You can also turn on the Theme Developer module, check which .tpl is used to display piece of content you want to change and then create this file in a way you want.

Another modules that provide similar functionalities are:

Quickest solution, just turn this module and forget about drupal's nested divs:

Fences

More complex, this lets you to set up fields markup - for views as well as full node:

Semantic CCK

The most complex, apart from fields markup, this lets you to set up columns, headers, footers etc. inside of full node view, as well some views integration:

Display Suite

Answer 2

I recently came to this same obstacle and managed to find a solution. @15dk51 did an excellent job of explaining the answer to this.

Removing divs added by render and node.tpl.php

Best solution I found was installing Fences which has effectively removed allot of the "drupal rendered" css classes which seem unnecessary when building your own theme.

I hope this helps.

Answer 3

I always lean to templates when I can. Using templates is a great way to control the markup of your fields or other elements in a Drupal friendly way.

More than likely you would be looking at creating a file called "field--name-field-visualisation.tpl.php" or whatever your field name is.

Reference: https://api.drupal.org/api/drupal/modules!field!theme!field.tpl.php/7.x

Couple things to help when using .tpl template files... Depending on your site configuration, you may have to add theme hook suggestions to "$variables" in your theme file. Also, kpr() or dpm() is your magic for finding what's available how to print it in your template file.

Don't forget to clear cache when you create a new template file!

Related reading: https://www.drupal.org/docs/7/theming/template-theme-hook-suggestions

Answer 4

There are two crucial guides I'd like to warmly recommend to you: Core templates and Template suggestions.

You want to completely customize the markup of one field. Then you need to find your current theme's or base theme's field.tpl.php file and duplicate that into your theme's /templates folder. Then you can rename it along the following patterns (choose one) to selectively customize the output for only one desired field (instead of overriding markup globally for all fields):

field--FIELD-NAME--NODE-TYPE.tpl.php
field--NODE-TYPE.tpl.php
field--FIELD-NAME.tpl.php
field--FIELD-TYPE.tpl.php

---

Additionally (and this only is an extra step after you tried to tweak things with the above options) you can also provide your own custom field formatter to fine-tune the field value output even more.

See the answers to How do I write an additional field formatter for an existing field?, which will tell you to implement hook_field_formatter_info() and hook_field_formatter_view(), both.