See filter

Displaying content – Panel Panes vs Views vs Display Suite

Wed, 16/10/2013 - 12:15

Back in the days, displaying content on your site was a simple concept. You could change some HTML, make sure all your tables close as required and hit the save button. Job done. 

These days, however, displaying content might become quite confusing, as there are so many aspects to take into account. “What code base am I using?” “But how should the divs float?” “That shouldn’t be there!”

We have all had this problem before, especially with a complex content management system like Drupal. By default you would create your content types, jam-pack them with all the fields under the sun and just let your pages be. Sure, some of the formatting on your page is not perfect, but hey - Drupal is tough and you got it to work. Good job!

As we all know this is not the case if you are building a highly complex client site, especially if you want to impress the guy. In trying to conform to your intrinsic need to over achieve, you scour the internet for alternate ways to format and display your content. From your hours of searching you get three main concepts; Panel Panes, Views and Display Suite. Each one of these concepts seem just as convincing as the next, but what which one should you use?

Panel Panes

Panels enables you to choose layouts, create panes (essentially divs) and order them with a neat drag and drop function. You can build fantastic custom layout pages with static content, however Drupal is a CMS, so static content is pretty useless to you.

Fear not - Panels has these little gems called overrides. This gives you the ability to override certain default node behaviours.

Panel overview page

Predefined templates ranging from user, node, and taxonomy term overrides

In the illustration above you will notice that there are a number of predefined templates. The one you would use the most would be the Node template. Enabling this template gives you access to all the great drag and drop features of Panel Panes with the added benefit of selection rules . With selection rules you can specify a node type and customize what fields you want to display. Selection rules can also be used for alternate display methods dependent on conditions. For instance, you could have one selection rule that states:

for node type = article and user = anonymous, display a title, summary, and a login link.

In addition to this, you can create a selection rule that will do the following:

for node type – article and user = authenticated, display title, summary, and a read more link.

There are many more selection rule conditions you can choose from; some as simple as node type filters to hard-core PHP validation.

Views

Panels take care of your layout, but when it comes to formatting, few things come close to Views. Views is probably one the most powerful display options available on Drupal. In Views you can select the order in which your fields should display, the container each field should have, and even field and label level CSS class assignment. As a CSS lover by heart, the last point makes me especially fond of Views.

Custom view formatting

Virtually unlimited options for wrapper containers and class assignment.

There is one thing to note about Views though. It is very difficult to dictate the layout of your pages with Views alone, as it only covers the display on one section of your page - your content area. It should therefore be noted that Views has be used in conjunction with display options; either good old default blocks or something a bit more complex like context.

But Panels sounds so great for layout, can’t I use that? Yes, that is an excellent point! This is how we get to my personal favourite feature of Drupal - integration. With Views you can format your content in anyway way you choose and by simply adding a “Content Pane” display, you can use your view in a panel pane. As a side note, you can expose normal views in panels as well, but the markup that comes with it is horrible. Using Content Pane displays in your panel panes give you the most control with the most user-friendly markup.

Display Suite

By default Drupal gives you the option to customise the display of each one of your content types. However, this “default” display alteration is extremely rigid and formatting options are few and far between.

Here Display Suite gives you a few more formatting and layout options with the ability to add custom code fields. Display Suite also give you the ability to define multiple displays for your content type. One display could be a “teaser” display, only showing a node’s title, summary, and read more link. Another display option could be a “full page” view. This would contain all fields of the node in the order you choose.

Once you have your list of displays you will have to choose where you want to use them. Here Display Suite has the same limitation as Views; you cannot alter where you displays will be rendered. For this reason, as with Views, you will have to use Display Suite in conjunction with blocks or context.

Formatting is also possible with Display Suite, along with more advanced options when using Display Suite extras. This gives you the option to define the format of a field as well as the container options for wrappers, labels, and fields. In most cases Display Suite would get the job done, but it cannot measure up to the formatting goliath that is Views. This is especially true when it comes to the formatting of images and rendering them with lightbox functionality.

Display suite ordering

Basic region assignment with label display options and basic formatting options. More advanced formatting and container adjustments are possible with Display Suite Extras

So what do you choose?

Honestly, you choose the one that works for you. Personally the combination of Views and Panels is probably the most powerful tool any Drupal developer can have in their arsenal. It should however be noted that Drupal is constantly changing and if you do not keep up with the times, you might miss out on some fascinating functionality.

As with most development you should never rely on only one tool to solve all your problems. As you get to know all three of these display options you will find that a combination of all three would, in a lot of cases, be your best solution.