Krimson

Content visualization with Display SuiteDrupal Meetup Singapore1st March 2011

O hi!

Matthias Vandermaesen

Drupal Ninja from Belgium

@netsensei

Wordpress

Krimson

http://www.krimson.be

Krimson

Mollom

Http://www.mollom.com

Pandion

Http://pandion.im

Teach you how to control Drupal's output of content in a fast, easy and efficient way.

Subject of the day

The problem

Let's take a look at an example...

The problem

The problem

Modern websites have/are...Complex layoutsStacked, columns, column spanning,...

Grid systems

Various layoutsContent detail pages, overview pages, landing pages, Frontpage,...

DynamicElements are removed or added dynamically

Path, logged in, session,...

The problem

Where do I show stuff on my site?When does it have to be shown?How will it be shown?Who can see stuff on my site?...

Two core concepts

Two important concepts:ContextWhen will/should content be shown?

If vars A, B, C then show elements 1, 2, 3

LayoutWhere will/should content be shown?

Where on your site =/= where in your layoutWhere on your site refers to a context

Our challenge

Our challenge

Translate a static design, wireframes, requirements into a fully fledged Drupal based website

Two core concepts

Today I'm only going to talk about controlling 'where' content gets placed in your layout

Drupals' limitations

Limitations

Limitation #1: Controlling how objects get displayedLimited number of build modes

Hard to order fields within a build modeFrontend Backend

Clunky interface

Hard to add extra content in a build mode

Hard to order fields

Hard to position fields

Limitations

Limitation #2: Controlling Views2 row style plugins: Fields & Node

Fields hellOrder fields

Different Views displays ~ variations of content

Theming hellViews needs more

Template galore

Limitations

Limitation #3: Theming LayerTemplate suggestions hellHerding cats

node-...tpl.php, page-...tpl.php,...

Easy to mingle business / presentational logicClutter op you tpl's and template.php with extra PHP

Classic: if path = x then show z

Base themes (like Zen) don't always make it easier

Theming hell

Limitations

Limitation #5: no central commandImageCache formatting

Views displays

CCK displays

Block management

Formatter settings

...

The problem

Inefficient development

Not user friendly / flexibleContent editors might be deterred

MaintainabilityUpgrade without breaking

Hard to debug

SecurityPHP Filter: no-no!

The problem

Drupal can do better!

Contrib to the rescue

Contrib to the rescue

Context

Display Suite

Panels

Spaces

Sections

Delta

Display Suite

http://drupal.org/project/ds

Display Suite

DS is an API that other modules can use to store and manipulate display data for objects (nodes, users, comments etc).

Display Suite

Demonstration

Display Suite

Define custom build modes per Drupal object

Define custom fields (with token support)

Define custom field groups

Support for formatters

Plugins alter build modes @ runtime

It's an API : DS itself doesn't do anything

Display Suite + ...

ND, ND_contribNode display, CCK integration, Fivestar,...

VD :: Views display integration

CD :: Comments display integration

UD :: User display integration

...

http://drupal.org/node/644662

In D7 => DS Extra's

Display Suite + ...

ND, ND_contribNode display, CCK integration, Fivestar,...

VD :: Views display integration

CD :: Comments display integration

UD :: User display integration

...

http://drupal.org/node/644662

In D7 => DS Extra's

Display Suite

What is a build mode?A display definition for an object (Teaser, Full node,...)

How should it be displayed

In D7: Build mode = View mode

Build mode ~ Layout

Layout: 5 regions :: header, footer, left, middle, rightHold Object properties (CCK fields,...)

Hold DS Custom fields

Hold Blocks

Display Suite

Formatter supportFormats individual CCK fieldsDefines How will this field be displayed

Custom formatters modulehttp://drupal.org/project/custom_formattersWrite your own formatters

ImageCache formattershttp://drupal.org/project/imagecacheCaches images / based on CCK ImageField

Integrates with CCK, DS, Views, Panels,...

Display Suite

Build modesTake over the default build modes

Define your own custom build modes

Integrates with Views row stylesViews fields vs Node object

Comes with minimal CSS for DS regionsEasy positioning of regions so you don't have to

Consistent styling

Display Suite

DS manages the display of Drupal objects ...Easy management at object level

Stylesheet delightFew basic predefined styles (regions)

Completely overrideable

Template suggestions in your themeReduce overriden tpl's for extra classes,...

Unless you want to add extra variables

Display Suite

... DS does not control your entire page layoutPanels + Panels Everywhere modules

... DS is not context aware!Context module + DS for node displays

Views integration

DS Plugins for @ runtime changes

Custom DS fields

Display Suite

Questions?

Matthias Vandermaesen@netsenseiHttp://www.krimson.be

Click to edit the title text format

Click to edit the outline text formatSecond Outline LevelThird Outline LevelFourth Outline LevelFifth Outline LevelSixth Outline LevelSeventh Outline LevelEighth Outline LevelNinth Outline Level