Want to implement this in Drupal 8, then check out How to Use Switch View Mode Sub-module for an updated version of this tutorial.
When it comes to managing the look and feel of a content page, nothing can beat Display Suite. It’s become an essential module for when you need to change the layout and fields on a node or any entity page.
Today I want to talk about a piece of functionality that you may not be aware of in Display Suite. It’s the ability to switch the view mode will be used for an individual node.
Let me explain, when you go to a node page (node/1) the “Full content” view mode is displayed. But, you can only have a single version of this view mode for each content type.
Display Suite can be setup to allow authors to select a specific view mode on an individual node.
Instead of displaying “Full content”, you could, on a select group of nodes use another view mode called “Feature landing page”.
This functionality is not exclusive to Display Suite. You can do similar stuff using Panels or Panelizer.
In this tutorial, we’ll create a custom view mode called “Full content feature” and we’ll allow an editor to select which one will be used on individual nodes.
Getting Started
I’ll assume you have a basic setup of Display Suite and you have customised the “Full content” view mode.
The functionality that we’re after is stored in the “Display Suite Extras” sub-module and not in the main module.
So go ahead and enable the “Display Suite Extras” sub-module.
Create View Mode
The first piece to the puzzle is to create a new view mode called “Full content feature”.
Let’s go ahead and do that now.
1. Go to Structure, Display Suite and click on the “View modes” tab.
If you can’t see a “Display Suite” link on the Structure page, then make sure you enable the “Display Suite UI” sub-module.
2. Click on “Add a view mode” and enter in “Full content feature” into the Label field and check the Node checkbox. Then click on Save.
Now that we have a new view mode go ahead and configure it by defining a layout and add a few fields.
Configure “View mode per node” option
1. Now go to Structure, Display Suite and this time click on the Extras tab next to List.
The Extras link will only appear if you enable the “Display Suite Extras” and “Display Suite UI” sub-module.
2. Click on Other and then check the “View mode per node” checkbox.
Then click on “Save configuration”.
Select Different View Mode
Now that we’ve configured everything, head over to Content, “Add content” and click on Article. Scroll down and you should see a vertical tab called “Display settings”.
If you can’t see this vertical tab, then you’ll need to be assigned the “Switch view modes on CONTENT TYPE” permission; each content type will get its own permission.
Then select a specific view mode from the “View mode” drop-down list and save the node form.
That’s it, the specified view mode should be displaying instead of the standard “Full content”.
Before we finish up, you can also display a different view mode by passing a GET parameter on the node page.
If you add v?full_content_feature after node/1 so it’s node/1?v=full_content_feature, it’ll switch to the view mode specified in the v GET parameter.
Summary
If you’ve never enabled the Extras sub-module, have a play around with it. It’s got a lot of neat little tricks that are very useful. Also spend a bit of time researching what’s available in the sub-module.
Tutorial FAQ
Q: I created a custom view mode but can’t select it from the “View mode” drop-down list on the node form.
For view modes to appear in this drop-down list you must select it from the “Custom display settings” vertical tab on the “Manage display” page.
Q: I tried to create a URL alias for node/1?v=full_content_feature but it didn’t work. How can I get clean URLs to work?
You can not create a URL alias with a GET parameter in the URL. This is a limitation with Drupal.
If you need full control over the URLs, then look at implementing all of this functionality using Panels.
Q: I checked the “View mode per node” checkbox, but I can’t see the “Display settings”vertical tab on the Article content type?
To access the vertical tab, you need to assign roles the “Switch view modes on CONTENT TYPE” permission. Each content type will get its own permission.
Awesome post, Ivan.
I kept on using multiple “Context” / “Delta” solutions but the ability to set the display suite view mode when the admin is editing the node itself is a far more intelligent solution.
That’s twice now I needed to know how to do what I knew I wanted to do but didn’t know how.
Each time a carefully worded question led to your blog (your SEO must be good, too), and I got exactly the answer in an easy-to-follow format.
Thanks x 2.
Thanks, this explains well how can you control the layout of a single node using DS. I know we can do it in code, and it is not a good idea of having hundreths of templates, but there is always the little page that does not conform to the general patterns. this tutorial does not digress, of to the sequence of actions you need to do that. it helped me that i know ds well, though.
perfect walk-through. simple and straightforward. thanks Ivan
Thanks.
I believe I have followed your tutorial exactly, but at this step “Select Different View Mode
Now that we’ve configured everything, head over to Content, “Add content” and click on Article. Scroll down and you should see a vertical tab called “Display settings”.”
I don’t see the vertical tab regardless of which content type I try.
I do not have page manager enabled, so that’s not overriding it.
Any help you can give would be very appreciated.
Meg
Hi Meg,
I’ve never had this problem. The way I would debug it is to look out for PHP or JS errors.
Another thing you could do is try setting this up on a brand new Drupal site. Another module could be breaking it.
Cheers,
Ivan
Turns out it was a permissions issue. When I enabled the DS extras, I apparently didn’t enable the functionality in permissions/roles. Since I’m admin, this usually doesn’t matter much–but in this case it did.
Thanks for your quick response!
Meg
Hi Meg,
Don’t be embarrassed it’s how you learn.
I’ll update the tutorial and FAQ to help others, thanks.
Cheers,
Ivan
I ran into this too, and it was not a permissions issue. I had to go to Home » Administration » Structure » Content types and click on Display Suite, then choose which view modes my article could choose from. Once I had more than one checked, I saw the Display Settings tab when I edited/created an article.
Hi, how can I choose what “custom view mode” is used when display the node on its own page?
As default, when we access “/node/ID” => Drupal 8 use “full content” view mode to show content, but I don’t want to use it, I want to use my “custom view mode” for all node of specific content type.
Thanks.
Hi Huy,
To change which view mode is used, I think “full content” is hard coded, you’ll have to write custom code.
Look at how the node_view() function does it. You may have to implement “hook_entity_view_display_alter”.
You can have different “Full content” configurations for each content type. So I’m not sure why you’d go to the trouble of changing it.
Good luck.
Cheers,
Ivan
Drupal 8.5.3, DS 8.x-3.1, DS Extras enabled
As admin, visiting Structure->Display Suite->Displays tab, one sees only 3 sub-tabs: List, Settings, Emergency. There is no “Extras” tab, making these instructions impossible to use.
Hi Jamie,
This tutorial is for the Drupal 7 version of Display Suite. Go to https://www.webwash.net/?p=681 for an updated version in Drupal 8.
Cheers,
Ivan