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

2. Definitions

3. Regions
Header
Sidebar
Main Body
Footer

4. Content
Main Body 1 2

5. Fields
Title
Body

6. Layout
Title
Body

7. Layout Options

8. Template Files
Developer required
Code push needed

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

10. Panels
???

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

12. Using Display Suite

13. Download

14. Enable
Display Suite
Display Suite UI
Display Suite Extras *

15. 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.

16. Select a Layout
Choose a view mode
Select a layout
Save

17. Field Regions
Move fields into regions
Save

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

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

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

21. Manage Display

22. 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.

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

24. Responsive Layouts
Display Suite Bootstrap Layouts (7x) p_layouts
Bootstrap Layouts (8x) ayouts
Responsive layouts if your theme uses Twitter Bootstrap

25. Demo / QA

26. Thank you
Aaron Cole web: aaroncole.com