View modes allow site builders to display the same piece of content in various ways. Drupal ships with a bunch of them out of the box like Teaser, “Full content”, RSS and much more. There is even one for the search result page called “Search result”. However, the two most prominent are Teaser and “Full content”.
The “Full content” view mode is the one used to display content on its “node/123” page. It’s the one you’ll customise the most. Teaser, on the other hand, is used to display a summarised or trimmed down version of an article.
You can create as many view modes as necessary. But like many things in Drupal, they can be created in a few ways. They can be implemented using code and with a module or two.
In this tutorial, you’ll learn how to create view modes in three ways: using hook_entity_info_alter(), using Display Suite and Entity view modes.
Using hook_entity_info_alter()
If you know how to write code and don’t want to install yet another module. Then I would recommend that you use hook_entity_info_alter() to implement your view mode.
How-to
1 . Create a custom module and implement the hook_entity_info_alter() hook. The example below creates a view mode called “Block feature”.
/**
* Implements hook_entity_info_alter().
*/
function MODULE_entity_info_alter(&$entity_info) {
$entity_info['node']['view modes']['block_feature'] = array(
'label' => t('Block feature'),
'custom settings' => TRUE,
);
}
2. Once you’ve implemented the hook, go to the “Manage display” page on any content type and you should see “Block feature” tab in the top right corner.
3. You can even configure Drupal to use a different template file for the view mode. This will make customising it much easier, especially if you need to add some custom code.
Implement the hook_preprocess_node() and add the following code in it.
/**
* Implements hook_preprocess_node().
*/
function MODULE_preprocess_node(&$variables) {
if($variables['view_mode'] == 'block_feature') {
$variables['theme_hook_suggestions'][] = 'node__' . $variables['type'] . '__block_feature';
}
}
Go into your theme and make a copy of the node.tpl.php file and then rename it to node--article--block-feature.tpl.php. Now Drupal will use the node--article--block-feature.tpl.php file just for the custom view mode.
Using Entity view modes
“Entity view modes” is a light-weight module that allows a site builder to create view modes from Drupal’s administration section. If you don’t like to write code and prefer doing it via an interface then this module is for you.
How-to
1. To use the module, just download and install “Entity view modes“.
If you use Drush, run the following command:
$ drush dl entity_view_mode $ drush en entity_view_mode
2. Go to Configuration, “Entity view modes” and click “Add new view mode” in the Node section.
3. Enter in the name of the view mode in Label and click on Save.
Now you have your brand new shiny view mode ready to go.
If you need a quick and easy way of defining view modes and you don’t want to write any code, then use “Entity view modes”.
Using Display Suite
The third and final way to create custom view modes is by using the Display Suite module. The module not only allows you to manage view modes, but you can also create custom fields and layouts for content types.
You should only use this module for view modes if you already have it installed. Don’t use it just to create them, “Entity view modes” is a better solution and it’s light-weight. But if you’ve decided on using Display Suite to customise content, by all means use it.
How-to
1. To use the module, just download and install Display Suite and Display Suite UI.
If you use Drush, run the following command:
$ drush dl ds $ drush en ds ds_ui
2. Go to Structure, “Display Suite” and click on “View modes” tab.
3. Click on “Add a view mode” and enter in a name in Label, select Node from Entities and then click on Save.
Now the new view mode should be visible from the “Manage display” page.
Summary
More often than not, I already have Display Suite enabled on projects and I use it to manage view modes. But if you’ve decided against using it, then look at using “Entity view modes” or implement your view modes using code. In Drupal you always have options.
This is a well-written intro / guide for Drupal content view-modes. Thanks for mentioning & explaining all the options — pretty those who are just getting started with their own content view-modes will find this helpful.
Thanks for the feedback.
thanks for writing such a wonderful article. it is very helpful, easy to understand and simple. thank you
Very good!!
Thanks for collect all the methods together and describe, when each method correct to applyed for Drupal site
Personally I only use the one (or maybe Display suite for some projects), Entity view mode have a great UI & work wit all entity types, but the biggest issue is that all these view modes are defined in 1 variable & that cause problems if you use features to deploy site updates.
Great article as usual
views mode would be useful when image plugins are not supported in views but in content displays(manage display). I usually create view mode for gallery/album content type and set image plugin settings there (ex – photoswipe which do not play well with views) and later use rendered node in views. Simple. 🙂
Thanks for the tip.
Nice easy post. Can I show a view of my own choice through a view mode? I am trying to attach a node form to a view. When user submits the form, the view below should update in realtime. Both things will be done via ajax. I have tried few modules. There is one module ajax form entity. It does exactly what I want, but it has no option to attach a view. Instead it has an option to show a view mode. Here are more details about my problem. https://drupal.stackexchange.com/questions/238447/attach-or-embed-node-add-form-to-a-view
If only this module allows to attach a view, its perfect. There is another good module https://www.drupal.org/project/ajax_views_refresh but unfortunately it is not for D7.
Hi Umair,
Can I show a view of my own choice through a view mode?
You can do this using Display Suite block field or a module such as, https://www.drupal.org/project/viewsreference
I am trying to attach a node form to a view. When user submits the form, the view below should update in realtime.
I’ve never done this, so I don’t know how you’d do it.
Cheers,
Ivan
Thank you. I am stuck with a code and need little help. What should I add at ajax_command_replace(‘#target_div_id_of_view_to_update .view’,$view1),
ajax_command_replace(‘#target_div_id_of_afb_form_to_replace’,render($newform)) in the below code. I tried to find the div id using inspect element in firefox, but did not find it.
Here is the full code
function modulename_form_alter (&$form, &$form_state, $form_id) {
switch ($form_id) {
case ‘form_id_of_your_afb_form’:
$form[‘#validate’] = array();
$form[‘ajax-submit’][‘#ajax’][‘callback’] = ‘modulename_create_callback’;
}
}
function modulename_create_callback($form, &$form_state) {
// load view
$view1 = views_embed_view(‘view_name’,’view_display_name’,$view_arguments_as_required);
// replace the afb form with a clean form
$newform = afb_ajax_handler($form, $form_state);
$commands = array(
ajax_command_replace(‘#target_div_id_of_view_to_update .view’,$view1),
ajax_command_replace(‘#target_div_id_of_afb_form_to_replace’,render($newform)),
);
$form[‘#type’] = ‘ajax’;
$form[‘#commands’] = $commands;
return $form;
}
Hi Umair,
It’s best to ask this question over at https://drupal.stackexchange.com/.
Cheers,
Ivan