display suite: a themers perspective

Display SuiteA Themer’s Perspective

By Danté TaylorMediacurrent Creative

Director@ThemeMaster

Key Assumptions

You are familiar using Views Module

You are familiar with Fields & Content Types

You understand basic theming concepts

You understand how to install Drupal modules

Panels is not your only friend

http://www.flickr.com/photos/26658572@N03/2500158621

Can’t We All Just Get Along

Display Suite Purpose

Display Suite allows you to take full control over how your content is displayed using a drag and drop interface.

Arrange your nodes, views, comments, user data etc. the way you want without having to work your way through dozens of template files.

Packaged with predefined list of layouts

Source: http://drupal.org/project/ds

Module Maintainer

Written by Kristof De Jaeger

Experienced web developer ever since PHP 3 came out. He got hooked on Drupal after experimenting with tons of other frameworks including writing his own - who didn't right ? He has written a dozen modules, writes patches for Drupal core and will review every single line of code that goes out into production. He's not afraid to dive into code and research best performance practices in order to save kittens. His passion is so big he got a Druplicon tattoo on his wrist. Talk about dedication! Thinks a day should have 36 hours so he can finally release that one rock album to conquer the world and retire on his own private island. Builds arcade machines in the meantime to relive his childhood.

http://krimson.be/about/kristof-de-jaeger

Statistics & Reach

Maintenance Status: Actively maintained Development Status: Under active development Reported Installs: 21,846 active sites Downloads: 84,275 Last modified: April 14, 2012 Stable Version: 7.x-1.5 Ranked: 113 out of 9728

Source: http://drupal.org/project/ds

Panels vs. Display Suite

The Display Suite always starts with a single object such as a node and offers a way to configure its display by rearranging the fields for that node in a fixed 5 column layout.

Panels is focused on combining different objects such as blocks, nodes, Views etc. together in a variety of layouts.

As mentioned, Panels Pages offer the option to change the layout of the detail page of a node and you have the option to create several variants based on arguments.

Source: http://www.jyvesgarden.com/blog/display-suite-vs-panels

Panels vs. Display Suite

With the Display Suite you can define the layout of your node detail, but it does not take any arguments.

Double nesting: In DS, you can put your fields in one of the 5 regions, but inside those regions, you can also group them together in fieldgroups.

Panels is restricted to one level of grouping.


Key Concepts

View Modes

Key Concepts

View Modes

Code Fields

Key Concepts

View Modes

Code Fields

Styles

What are view modes?

View Modes

View modes are another name for layouts in Display Suite

They control how the page will be render via templates

You are allowed to create custom templates

Unlike the Panalizer Module you can’t mange display the size placement of regions through the UI. Although using CSS it is possible to achieve similar results

What are code fields?

Code Fields

For Display Suite code fields are like what cck and and block api is for drupal core.

They all you to add custom and system generated variables directly to multiple entity types.

You can also access any variable that your theme templates have access to using dynamic fields

What are DS Styles?

Display Suite Styles

Display suite styles all you to add custom classes to DS regions

They allow you to add custom styles to individual fields

Functions a lot like panels and skinr style options

$ drush dl ds

Getting Started

View Mode

New View

How do you add custom Layouts?

Custom Layouts

<?phpfunction ds_article() { return array( 'label' => t('Article Layout'), 'regions' => array( 'header' => t('Header'), 'middle' => t('Content'), 'footer' => t('Footer') ), // Add this line if there is a default css file. 'css' => TRUE, );}?>

themes/demo/ds_article/article.inc

Custom Layouts

.ds-header{float:none;width:100%

}.ds-content{

float:none;width:100%

}.ds-footer{

float:none;width:100%

}

themes/demo/ds_article/article.css

Custom Layouts<section class="article-wrapper <?php print $classes;?> clearfix">

<?php if (isset($title_suffix['contextual_links'])): ?> <?php print render($title_suffix['contextual_links']); ?> <?php endif; ?>

<?php if ($header): ?> <header class="ds-header<?php print $header_classes; ?>"> <?php print $header; ?> </header> <?php endif; ?>

<?php if ($middle): ?> <section class="yb-main-content-wrapper"> <div class="ds-content<?php print $middle_classes; ?>"> <?php print $middle; ?> </div> </section> <?php endif; ?>

<?php if ($footer): ?> <footer class="ds-footer<?php print $footer_classes; ?>"> <?php print $footer; ?> </footer> <?php endif; ?>

</section>

ds_article/article.tpl.php

Custom Layouts

ds_article/article.tpl.php

Where To Get Help

http://www.youtube.com/user/swentieman

http://groups.drupal.org/display-suite

http://vimeo.com/15863937

http://drupal.org/node/644706

http://krimson.be


http://www.youtube.com/user/swentieman

http://groups.drupal.org/display-suite

http://vimeo.com/15863937

http://drupal.org/node/644706

http://krimson.be/

Don’t Forget to:

Clear Your CacheHappy Theming!

Mediacurrent helps organizations architect custom websites by leveraging our proven processes and deep expertise in Drupal.

@mediacurrent mediacurrent.com

display suite: a themers perspective

Technology