display suite: a themers perspective
TRANSCRIPT
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.
Source: http://www.jyvesgarden.com/blog/display-suite-vs-panels
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
Getting Started
Getting Started
View Mode
New View
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
<?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
Source: http://www.jyvesgarden.com/blog/display-suite-vs-panels
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