Learn how to customize the HTML markup on fields and labels.

We’ll cover the following:

How to change the element used in fields and labels
How to add custom CSS classes
How to add or remove default classes
And how to remove HTML markup

Transcript

Trainer (00:00):
When you are building a view, a lot of time will be spent customising the fields, and that’s for both block and page displays. The fields are what users see and naturally you will spend a fair bit of time customising the rendered fields. So if we scroll up and click on Image in the fields section, then click on Style Settings, you’ll see that you have the ability to customise the field and label HTML and the wrapper HTML that wraps both the field and the label. And you can also control what classes are added.

Trainer (00:36):
Let’s first, take a look at customising the field HTML. So click on Customise Field HTML, from the HTML element dropdown, you can change what HTML element will be used. And if we close this popup, let’s inspect the image field and see what HTML is generated. So right click on the image and then click on Inspect. By default, we have a div wrapping the image with the class of field dash content. Now, if we go back to the image and customise the HTML and check Customised Field HTML, and from HTML element, select Span, and we’ll also add in a custom CSS class. To do that, just check create a CSS class and then enter in article dash dash image, and click on Apply. And if we scroll down into the previous section and inspect the image, we can see the span element with our new class of article dash dash image.

Trainer (01:46):
Let’s go back into the field. And another thing you can do which is useful is from the HTML element, you can remove the HTML that wraps the field. To do that, select none, then click on apply. And if we inspect the image, you’ll notice that the element wrapping the field is no longer there, but we still have the element that wraps both the label and the field but the div with the field dash content class is no longer there.

Trainer (02:23):
Let’s go back into the field again. The label HTML can be customised the same way and the element that wraps both the label and the field can be customised the same way as well. If we check these two check boxes, you can see that we can select an HTML element and we can also add in custom CSS classes. Let’s further customise the image field by removing the wrapping element. And this is the div that wraps the label and the field. So make sure you check customised field and label wrapper HTML and from the element dropdown, select None, and click on Apply. And if we scroll down and inspect the image, you’ll notice that we no longer have a wrapping div. We just have a link and image. We have fully removed the markup that the Views field is generating.

Trainer (03:28):
Let’s go back into the field and take a look at the other options. We’ll first remove the customizations and make sure added default classes is checked because what this does is… Let me just first apply the changes. And if we inspect the image, the default classes are the classes here on the wrapping element and the field dash content class. And if we have a label, let’s take a look at the tags field as an example, it’ll add these label classes in as well. However, if we remove these classes, so let’s go back into image and uncheck Add Default Classes. But if we customise the field HTML and add in a custom class, so to do that, just check Create a CSS Class, and let’s add in our article dash dash image class back in, then click on Apply. And if we inspect the image, then our article image class will be the only one visible. So this option should only be used if you do not want to use the default classes and instead use your own.

Trainer (04:43):
Let’s go back into the image field and the final option we’ll look at in the style settings section is Use Field Template. If this is checked, then Views will use the field template when rendering the field. It’ll also add generic field classes. This is an advanced option and you’d only use it if you are styling the fields in a specific way. But let’s give it a test, so make sure you check Use Field Template, then click on Apply. And if we inspect the image again, you should see these extra divs with generic field classes. But let’s go back and revert everything to default settings. Scroll up, click on image and uncheck Customised Field HTML and check Add Default Classes.