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.
| Settings | Value |
| View name | Latest articles |
| Show | Content of type Article sorted by Newest first |
| Create a page |
Uncheck checkbox
|
| Create a block | Check checkbox |
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.
Great article – probably the best I have read and far easier to understand than even most of the videos.
Well done Ivan – keep up the good work.
Thanks a lot.
great tutorial!
Have you tried using Display Suite for custom view modes and using Context for displaying block or menus based on certain conditions?
I have trouble with those two working together. In other words when I apply custom view mode, I lose context for blocks in other region.
I have used Context a lot in the past, but never to manage a block within a custom view mode. I would look at the condition code and see if “full” view mode has been hard coded.
Let me know how you go.
Yes, it’s ‘full’ 🙂
This issue referers to ongoing work on http://drupal.org/node/1154382
In context module, implementation of hook_node_view still uses $view_mode hardcoded with ‘full’.
Thanks,
E.
Awesome
Yes, ‘full’ is hardcoded as $view_mode variable in context_node_view hook function.
I created custom implementation of hook_node_view in a separate module and it works now but currently I also hardcoded view_mode name.
It would be great if I could call a function to return view modes for full node view and evaluate.
Thanks for pointing me in right direction,
Emil
Hello – great tutorial – again. I have a following issue -would like to display Datatables table (as a result of querying external table – so I don’t know how to make a view with that) in a block, that would not be in a main content? I hope I am clear.
Anyway – thank you and I find your work very helpfull. Regards!
DS can only be used to modify the display of an entity (node, user, etc). From my understanding, you want to display table data from a generic MySQL table using Views, right?
There are two modules that make it really easy to expose tables to Views, http://drupal.org/project/views_schema and http://drupal.org/project/schema_views. They both do the same thing but in 2 different ways.
Look at http://drupal.org/project/views_schema first.
I will study these two.
Do you perhaps have an idea of how can i incorporate MySQL views (about 50 of them on external MySQL database – ) into the drupal? So that I can choose a view from a drop down menu and the queries based on that view would get executed.
I don’t want to rewrite all of those queries in the code.
I am sorry if this is not the right place to ask but I found many useful information on your side.
Regards
I have never integrated MySQL views with the Views module. So I can’t help you sorry. 🙁
Hi! Thanks for the tutorial! Have a question – can’t find solution second day. Is there some way to wrap elements inside of region? For example i have three divs in header region and i need to wrap first two divs in other element (div, span – dont matter). I tried to customize it with views but no results =(
Thanks
I don’t think you can do this via the admin section. 🙁 I would create a custom display suite template and use a region as the “wrapper”.
“Adding custom layouts to your theme”, https://drupal.org/node/1098068
Thanks a lot! Tryed to find solution with theming with templates customization, but tried to add wrappers with jquery =) Bad way, but it is the only way i could find.
Hi Ivan, you site is a great resource for me too very thk!
I used DS in a project but i have a problem with language, its compatible with this?
I launch a node display from a views and i see ok in languages, but i swith to one language to other dont
redirect fine and dont display correct.
You can say thing?
Very thks for all.
See you
Miguel
Unfortunately I have little experience developing multilingual Drupal websites.
Ask this question in the Display Suite issue queue. https://drupal.org/project/issues/ds
hello, is there a way to add custom layout to a field collection form field embedded in a node edit form
I’ve tryed applying the method of creating a display suite template, but this way just work on a single field collection item create/edit form, not the one embedded on the parent node creation/edition
please any sugestion is welcome, thanks in advance
I have never had to modify a field collection form using Display Suite. I have used Display Suite to change the look of a field collection entity when render.
But I think you’re referring to the field collection form within a node add/edit page right?
Found this issue in the issue queue:
https://drupal.org/node/1670150