Display Suite and Views Together in Drupal

drupal display suit views

Display Suite is one of our very favorite Drupal modules.

We love how easy it is for even new Drupal users to control their content layouts with Display Suite.

In this tutorial, we’ll show you how you can use Display Suite together with Views. This allows you to create complex pages, controlling both the output and layout, without knowing any code.

  • Go to Structure > Content types and click Manage Display next to a content type.
  • Unless you change it, you’re going to be redesigning the “Default” view mode for this content type.
media_1386614981920.png
  • You’ll see the Display Suite options at the bottom of this screen.
media_1386614119733.png
  • Choose the Select a layout option. In this example, I choose Two column.
media_1386614143932.png
  • Click Save.
  • The fields can now be placed into Left and Right regions to reflect the two column layout:
media_1386614450017.png
  • Click Save to complete the Display Suite changes.
  • Go to Structure > Views and edit the view that you want to use with Display Suite.
  • In the Format area, click the Show area, as shown below (note that Display Suite doesn’t work with all Views formats)
media_1386614212718.png
  • Choose Display Suite as an option
  • Click Apply (all displays)
media_1386614259728.png
  • Choose the options you want for Display Suite. The most important setting is the view mode – make sure you select the same one as did at the start of the tutorial.
media_1386614295059.png
  • Click Apply (all displays)
  • You should now see that your two column layout has been applied to your view:
media_1386614486586.png

Author

  • Steve Burge

    Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Article Rating
Subscribe
Notify of
1 Comment
Oldest
Newest
Inline Feedbacks
View all comments
soumya
soumya
4 years ago

Thank you

1
0
Would love your thoughts, please comment.x
()
x