Blair Wadman 5 minute read

How to wrap a Drupal Views field in any HTML element

In Drupal Views, you can wrap a field in a basic element (such as div, span, H1, H2, p, strong). But sometimes you are going to need to wrap a field in an HTML element that is not available in the list. For example, if you have an image field that and need to wrap in a <figure> element (this is the example we will use for this tutorial). This can be pretty confusing at first, but fortunately there are a few methods available to get the job done.

Wrapping in a basic HTML element

Before we start with the methods to wrap the field in any HTML element we want, let's have a look at how you use the basic elements available in Views by default. In a View, click on a field and you’ll see the Style Settings fieldset.

This example is an image field.

Open the Style Settings fieldset and you will see the first option - Customise field HTML

If you go and inspect the display of the View, you will see the div has been added with a class of field-content.

<div class=“field-content”>
  <img src=“image.jpg" width="198" height="110">
</div>

You can take this further and add a class to the above div. Go back to the Style Settings for a field, select Customize field HTML and then Create a CSS class.

This will create the following HTML:

<div class=“field-content figure”>
  <img src=“image.jpg" width="198" height="110">
</div>

So we can add any class to a field and use that for styling. But what we really want is to wrap the image field in a <figure> html element, like so:

<figure>
   <img src=“image.jpg" width="198" height="110">
</figure>

There is no option for figure in the HTML element dropdown.

There are two ways to achieve this.

  1. Create a template
  2. Rewrite the result

Let’s take a look at how to do both.

Method 1. Rewrite the result

The first method is to use the rewrite the result option in the field in Views.

And now if you look at the result, the field will be wrapped in the

<

figure> element.

Method 2. Create a template

The second approach is to create a template for the field and add that to your theme. This will output the result of the field and you can add any HTML you like to the template.

Steps to create the template:

<?php

/**
 * @file
 * This template is used to print a single field in a view.
 *
 * It is not actually used in default Views, as this is registered as a theme
 * function which has better performance. For single overrides, the template is
 * perfectly okay.
 *
 * Variables available:
 * - $view: The view object
 * - $field: The field handler object that can process the input
 * - $row: The raw SQL result that can be used
 * - $output: The processed output that will normally be used.
 *
 * When fetching output from the $row, this construct should be used:
 * $data = $row->{$field->field_alias}
 *
 * The above will guarantee that you'll always get the correct data,
 * regardless of any changes in the aliasing that might happen if
 * the view is modified.
 */
?>
<?php print $output; ?>

<figure>
  <?php print $output; ?>
</figure>

I find the first approach (rewrite the result) an easier approach because you don’t need to mess around with creating template fields and you can do it all in the Views UI. As with a lot of things in Drupal, despite being confusing at first, Drupal is so flexible that there is generally a way to make it do what you need it to do.