Complex Layouts created simply using Display Suite Aaron Cole Director of Web Services, Stanford School of Earth, Energy & Environmental Sciences

Definitions

Regions Header Sidebar Main Body Footer

Content Main Body 1 2

Fields Title Body

Layout Title Body

Layout Options

Template Files Developer required Code push needed

Views Rewrite Done in the UI Developer not required Must be done for each display HTML required Not obvious

Panels ???

Display Suite Done in the UI Developer not required No HTML Custom per view mode

Using Display Suite

Download https://www.drupal.org/project/ds

Enable Display Suite Display Suite UI Display Suite Extras *

Select View Modes Enable view modes in the “Custom display settings” tab. Each view mode can have a custom layout Note: This tab only appears under Default.

Select a Layout Choose a view mode Select a layout Save

Field Regions Move fields into regions Save

Enable Field Templates Structure > Display Suite Extras Field Templates tab Enable Field Templates Prepare to head down the rabbit hole...

Field Options Select the cog icon Choose a field template Explore Full reset Minimal Expert Explore Update Save

Views In your Views display Show: Content / [view mode]

Manage Display

Hide Page Title Structure > Display Suite Extras Other Page Title Options Allows you to add the page title to a region and hide it from the top of the page. Sweet.

Build Your Own Layout For developers A layout is just <div> containers drush ds-build "Example layout" -- regions="Header, Left, Right, Footer"

Responsive Layouts Display Suite Bootstrap Layouts (7x) https://www.drupal.org/project/ds_bootstra p_layouts Bootstrap Layouts (8x) https://www.drupal.org/project/bootstrap_l ayouts Responsive layouts if your theme uses Twitter Bootstrap

Demo / QA

Thank you Aaron Cole email: aaronc@stanford.edu web: aaroncole.com