Cleaning up Markup with Display Suite and Media 2.x

The Goal

By default, Drupal outputs a TON of HTML for everything. Sometimes this is helpful, sometimes it is not. Display Suite is one module that allows for controlling how much HTML needs to be wrapped around each piece of content. With Display Suite, you can pare down the HTML for most situations and add wrappers back into the code as needed.

Media 2.x

Media 2.x is a great module for managing media files such as images and videos, but it's a little cumbersome and it adds even more markup than Drupal around files. Again, Display Suite comes to the rescue and allows you to only add as much as you need.

Example

Our example uses a simple content type with one image field. We will fill in a sentence or two for the body, and upload the Drupal logo as an image (using Media 2.x, this is technically a File field).

Example Page

Image may be NSFW.
Clik here to view.

Drupal's Example Page HTML

Image may be NSFW.
Clik here to view.

Display Suite Controlled Example Page HTML

Image may be NSFW.
Clik here to view.

How To

Configuring Display Suite

We are going to enable Display Suite and Display Suite Extras.

One of the options for Display Suite Extras is Field Templates. Field Templates allow you to customize each field and it has a great interface which extends the traditional Drupal interface well.

Selecting Minimal will provide a single wrapper for each field which is my preference. You could also select Full Reset which shows no wrappers. This setting will save you a lot of time since any new fields for content types that use Display Suite for layout will use this setting. It can be overridden on a per field basis as well.

Image may be NSFW.
Clik here to view.

Configuring a Content Type

The next step is to configure a content type. For the settings above to take hold, the content type will need to use display suite for it's layout. Even if you don't want a complex layout, you have a few options.

The option we will select is Reset. Save the page and you will see plenty of new options. Reset is a great option for stripping most of the markup from your page. You can also select a more complex layout if you want multiple columns, etc.

Once we have all the advanced settings, we would be done. You can look at your page source and it will be significantly cleaned up.

Image may be NSFW.
Clik here to view.

Setting Up Media 2.x fields

If we are using Media 2.x for images and videos, we have a few more steps.

The first step is to go back to the content type Manage Display tab and select Rendered File as the Format option. This allows Media 2.x to take over rendering the file. Next, you select a View Mode for the file. This View Mode is NOT the same as the View Mode for the content type, it's the file's View Mode. Please see the Media 2.x documentation for more information about how this works.

The Display Suite portion comes in when you select the Minimal or Full Reset Field Template.

Some Media 2.x Configuration

At this point we need to configure Media 2.x a bit. You can see more about this in the Media 2.x documentation, but here is a quick overview, highlighting the bits that Display Suite helps us with.

Manage File Entity Display

Media 2.x makes Files into Entities that are fieldable like content types. Because of this, we can apply Display Suite as the layout, selecting Reset again. This will give us the same control over all the markup Media 2.x dumps into the code by default.

You must select a View Mode that matches the View Mode for the Rendered File in the previous step, in this case Teaser.

Image may be NSFW.
Clik here to view.

Manage File Entity File Display

Now we get to configure the way the actual file is displayed. File entities have file fields which is where the actual image or video is stored.

On this edit screen, we select the image display and choose an Image Style to use to render this image when the Teaser View Mode is used. In this case we'll just select Medium since it's a built in Drupal Image Style. You can create your own as well and select them here.

Image may be NSFW.
Clik here to view.

What if you want more markup in some situations?

You can select Expert from the field's display options and specify all sorts of settings for wrapper divs.

Why go to all this hassle?

I like cleaner markup.

Also, sometimes the default Drupal markup gets in the way. Media 2.x markup makes it impossible to wrap the field in a link. This makes working with Views more difficult than just using a Drupal Image field. Media 2.x however offers so many other benefits, it's a shame it can also have these drawbacks.

These solutions give you back control and do so in a way that is consistent with both Drupal and with each other.

The philosophy is that the content pieces control their appearance. This means that content types are where you define how that content is laid out and styled. Similarly, File Types are where you determine how Files are styled.

Compare this to a mish-mash of templates, overrides, Panels, etc. I think this is a much easier to understand process.