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

• Tick Customize field HTML
• Select DIV from the HTML element drop down

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.

• In the Views Fields section, click on the field you want to wrap the HTML element around

• Open the Rewrite Results fieldset

• Tick Rewrite the output of this field (in Drupal 8, this is Override the output of this field with custom text)
• In the Text field, add the opening and closing tags for the HTML element. e.g. <figure></figure>
• Open Replacement Patterns and you should see a token for this field. Copy the token.
• Paste the token in-between the opening and closing tags. In Drupal 7 this will look like: <figure>[field_news_blog_img]</figure>. In Drupal 8, this will look like: <figure></figure>

• Click Apply
• Save the View

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

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:

• Open the Advanced fieldset on the righthand side of the View
• Click on Theme: Information, which is second from the bottom

• Click on the field that you want to wrap the HTML element around from the list of possible templates. If it is an image field called field_image, then template will be Field Content: Image (ID: field_image) You will see the following:

<?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; ?>

• Create a new file in your theme. You will find the name that it can use next to the field that you just clicked on. The one you choose depends on how specific you want to be. If you use the first one (views-view-field.tpl.php), the template will be used for all fields. If you use the last one (views-view-field–latest-articles–page–title.tpl.php), it will be used just for this field.

• Copy and paste the code into the new file
• Wrap the HTML element around <?php print $output; ?>:

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

• Clear the cache
• The field should now be wrapped in the <figure> element

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.