Drupal: Display Suite View Modes Example

David G - DrupalRecently I’ve been working with a webshop and immersing myself into their existing workflow for creating Drupal websites. I was brought in on projects which are mostly completed and we were fleshing out remaining pieces of a website or ideas, but by and large the groundwork of most of the website was already designed and implemented as a Drupal subtheme.

In this learning process I was exposed more to how designers create websites and was tasked with trying to create usable sites using Bootstrap, Less and Drupal modules such as Views and Display Suite. One of the designers on the project was having trouble immersing themselves in the Display Suite usage throughout a website. This blog post will highlight the differences between using a basic Views page and implementing the same View page, but leverage DS and view_modes for the same output content on the page.

The Goal

The goal of our task is to create a list of content such as faculty members, recent news posts, upcoming events, etc. In SQL the this could be any of the following simple queries:

  • Faculty Members:
    SELECT * FROM faculty f WHERE f.published = 1 ORDER BY f.last_name ASC, f.first_name ASC
  • Recent News:
    SELECT * FROM news n WHERE n.published = 1 ORDER BY f.created_at DESC
  • Upcoming Events:
    SELECT * FROM events e WHERE e.published = 1 AND e.created_at > NOW() ORDER BY e.created_at ASC

An example mockup of such is a page is as follows:

Example page with View(s) of example queries.

Example page with View(s) of example queries.

And the Views module allows us to easily express the above SQL queries in a (somewhat) user friendly GUI:

example view to get News content.

example view to get News content.

Using Views Admin and View:Fields to get our content on the Page

So by setting View filters and fields we can select out the content we want to show in each page. The view filters act as our sql WHERE clauses above, and the fields act as the SELECTed field(s) to use within our View:

Example View config using the exsisting non-Display Suite views fields configuration for a view.

Example View config using the exsisting non-Display Suite views fields configuration for a view.

This is the typical (or legacy) implementation workflow used by the existing webshop when making Views based pages.

Using Views Admin and Display Suite view_modes to get our content on the Page

This approach still uses Views to create the URL of the new page. And, it further still uses Views filters to specify the content to the show on the page. But, we no longer use View:fields to select what content to show on the page. Instead, we use Display Suite: view modes to choose as a Designer what to show on the page and to setup how to layout the content.

So here is our basic View looking very similar to the previous example:

example view to get News content.

example view to get News content using DS.

Except that now for the settings of the display settings we set a View Mode for the content type. This (view mode) is managed and configured from the Display Suite UI.

Set View Mode for views resultset.

Set View Mode for views resultset.

View Mode configuration for Events content type. This view mode is called "for_list".

View Mode configuration for Events content type. This view mode is called “for_list”.

So if we look at the Display Suite settings for this view mode we can see that we essentially have chosen the same drupal fields to display for the content type. Additionally if we want and have support from our theme we can select additional layouts for the (node) content we are displaying. For example we could easily select a 2-column, 3-column or brick based layout for every row of our view result.

Note, that in order to select a View_Mode you must first create the view mode from within Display Suite. Example view mode names for typical node content could be: “for_list”, “for_small_grid”, “highlights_example”. A view mode acts an instance of visual configuration of how content should appear to the enduser when viewing 1 piece of content.

PROS AND CONS of this Approach

In the first example our site simply uses Drupal core and Views to create a page and layout content. In the second example we abstract out the definition of what to show into a view_mode and that configuration and definition of what we’re showing in the page is now a reusable set of directives for Drupal to follow when the view_mode is set.

Here is the difference visually as an image describing the differences:

Example basic Views themeing and output without using DS.

Example basic Views themeing and output without using DS.

Example view with DS view mode per row.

Example view with DS view mode per row.

The pros to this approach are:

  • Resuable view_mode of how a piece of content should look. This is exportable and sharable across Drupal websites when using Features or the Configuration module as an example.
  • Simpler Views definitions, seperation of business logic views filters from the presentation view_mode. In building the requirements of a website if you outline what is to be shown on a page vs the logic to get the data. You can easily create the necessary N view_modes required for your full website from your design mockups.
    • This meta configuration of view_modes in your Drupal website acts as a form of long-term documentation for your website. Styling is not solely documented via CSS.

The Cons to this approach are:

  • This setup requires that you invest the time and knowledge into learning the Display Suite modules and it’s conventions and admin interface. At first this may appear as alot of extra clicking and confusing dependencies when compared to the basic Views approach. But, as outlined above there are many benefits to this meta configuration overhead both in the design and implementation of the website.

I hope you’ve found this blog post helpful and informative! Happy site developing!

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *