Handling View Modes and Regions with Display Suite in Drupal 7

This tutorial is part of the "Using Display Suite in Drupal 7" series. Check out the latest tutorials from the series homepage, a new part will be published weekly over the next few weeks. Join the series newsletter to stay up to date.

In the previous tutorial, we jumped right into using Display Suite. We selected a layout and configured fields for the Teaser and "Full content" view mode. In this tutorial, we’ll look at how to create a custom view mode, use view modes within the Views module, custom wrappers and custom CSS classes.

What is a view mode? View modes allow you to display content types in multiple ways. For example, the Article content type comes with a Teaser and "Full content" view mode. When you go to an article content page (node/1) you’ll be shown the "Full content" view mode of the article. Whereas if you view the article node on the homepage, you'll be shown the Teaser view mode of the article.

Later on in this tutorial, we'll create a custom view mode that will be used for a "Latest articles" block that will be created with Views.

Custom View Mode

Let's go ahead and create a custom view mode called "Block teaser" for the Article content type.

How To

1. Go to Structure -> "Display Suite" (admin/structure/ds) and click on the "View modes" tab.

2. Click on the "Add a view mode" link and add "Block teaser" to the label and check the Node checkbox. Once you've completed the form click on the Save button.

Can you create a custom view mode without Display Suite?

Yes, you can a create custom view mode by implementing the hook_entity_info_alter function. View modes are part of the entity system, and Display Suite just offers a UI.

For a light weight solution check out the Entity view modes module.

Configure View Mode

We need to configure our new custom view mode. 

How To

1. Go to Structure -> "Display Suite" (admin/structure/ds) and click on "Manage display" within the Article row.

2. Click on the "Custom display settings" vertical tab and check the "Block teaser" checkbox, then click on Save.

3. Click on the "Block teaser" link in the right hand corner to configure the view mode.

4. Click on the "Layout for article in block teaser" vertical tab, and select the "Two column stacked" layout and click on Save.

5. Move the Title field into the Header region. Click on the cog icon and change the Link drop-down to Yes.

6. Move the Image field into the Left region. Click on the cog icon and change the "Image style" drop-down to Thumbnail and the "Link image to" drop-down to Content.

7. Move the Body field into the Right region. Select Trimmed from the Format drop-down list. Click on the cog icon and set the "Trim length" to 100.

8. Move the "Read more" field into the Footer region. 

Once all fields have been placed, scroll to the bottom and click on Save. Your field placement should look like the image below:

Create Latest Articles Block

We have created and configured a custom view mode, now it's time to use the view mode within a view. Let's go ahead and create a block with Views.

Before we begin, make sure you have downloaded and installed the Views and "Views UI" module.

How To

1. Go to Structure -> Views (admin/structure/views) and click on "Add new view", and fill in the Views settings using Table 2-1.

Table 2-1. Views settings for the "Latest articles" block.

2. Once the form has been filled out, click on "Continue & edit".

3. Now that we have created a view, we have to tell Views to use the "Block teaser" view mode. From the Views edit page, click on Fields in the Format area.

4. Within the pop-up select "Display Suite" and click on "Apply (all displays)".

5. Click on the "Default view mode" drop-down box and select "Block teaser", then click on "Apply (all displays)".

6. Once you have finished configuring the view click on Save.

At this point, we have created a block view, and we have configured the view mode. Next, add the "Latest articles" block to a theme region so you can see it in action.

How To

1. Go to Structure -> Blocks (admin/structure/block).

2. Find the "View: Latest articles" block and add it to the "Sidebar second" region. Scroll to the bottom and click on "Save blocks".

3. Go to the homepage and check out the new "Latest articles" block in action.

CSS Classes on Regions

Display Suite allows you to define custom CSS classes for regions and fields. In this section, we'll just focus on applying custom CSS classes to the "Latest articles" block view. latest-articles-left for the left region and latest-articles-right for the right.

If you view the HTML source of the "Latest articles" block, you'll see that there is a generic group-left and group-right class on a wrapper DIV. For designers, this is not helpful if you are trying to target an element.

Let's go ahead and add extra CSS classes.

How To

1. Go to Structure -> "Display Suite" (admin/structure/ds) and click on the "CSS classes" tab.

2. In the "CSS classes for regions" text area add the following code, then click on the "Save configuration" button.

latest-articles-left|Latest articles left
latest-articles-right|Latest articles right

3. Go to Structure -> "Display Suite" and click on "Manage display" within the Article row. Click on "Block teaser" in the top right corner.

4. Click on the "Custom classes" vertical tab option and you should see the CSS classes within the select boxes.

5. Select the "Latest articles left" class within the "Class for left" drop-down box and "Latest articles right" class within the "Class for right" drop-down box. Once everything has been selected click on Save.

Now if you refresh the homepage and view the HTML source you should see the custom CSS classes within the wrapping DIV.

Region Wrappers

The last feature I want to demonstrate in this tutorial is how to assign different wrapper tags around regions. By default, Display Suite uses the DIV tag to wrap all regions.

Custom region wrappers allow you to use different tags for specific regions. For example, you could use HEADER for the header region and FOOTER for the footer region.

Let's now do that to the "Latest articles" block.

How To

1. Go to Structure -> "Display Suite" (admin/structure/ds) and click on "Manage display" within the Article row. Click on "Block teaser" in the top right corner.

2. Click on the "Custom wrappers" vertical tab option.

3. Select Header within the "Wrapper for Header" drop-down list and Footer within the "Wrapper for Footer" drop-down list. Finally, select Article within the "Layout wrapper" drop-down list.

Your selected options should look like the image below:

Go back to the homepage and view the source. You should be able to see the wrapper tags.

Tutorial Summary

In this tutorial, we looked into some specific Display Suite functionality. You learnt how to create a custom view mode and then use them within Views. You also learnt a few tricks on how you can change certain CSS classes and markup without writing any custom code.

If you have any questions, please leave a comment.

This tutorial is part of the "Using Display Suite in Drupal 7" series. Check out the latest tutorials from the series homepage, a new part will be published weekly over the next few weeks. Join the series newsletter to stay up to date.