SlideShare a Scribd company logo
Learn Drupal's Most Powerful Site-
Building Modules: Display Suite,
Context, Views, & Panels

           By Jay Callicott
            Lead Architect
          CapitalCamp 2012
            July 27, 2012
Outline

 •   About Jay

 •   Why talk about DS, Context, Views & Panels?

 •   Breaking Down a Site Design

 •   Content vs. Pages

 •   Laying Out Blocks on a Page

 •   Walkthrough of Context, Panels, Display Suite

 •   Constructing Content in Drupal

 •   Views

 •   Use Cases
About Jay
About Jay
•   Mediacurrent Lead
    Architect
About Jay
•   Mediacurrent Lead
    Architect

•   Drupal developer
    since Drupal 4.6
About Jay
•   Mediacurrent Lead
    Architect

•   Drupal developer
    since Drupal 4.6

•   OpenChurch
    Distribution Maintainer
About Jay
•   Mediacurrent Lead
    Architect

•   Drupal developer
    since Drupal 4.6

•   OpenChurch
    Distribution Maintainer

•   @drupalninja
Why talk about DS, Context, Views
& Panels?
Why talk about DS, Context, Views
& Panels?

 • Not a lot of presentations that cover using
   these tools together
Why talk about DS, Context, Views
& Panels?

 • Not a lot of presentations that cover using
   these tools together

 • I like talking strategy/philosophy of site
   building, not just “How To”
Why talk about DS, Context, Views
& Panels?

 • Not a lot of presentations that cover using
   these tools together

 • I like talking strategy/philosophy of site
   building, not just “How To”

 • All of these tools use the UI - you don’t
   have to be a hard core developer to build
   advanced Drupal sites!
Why talk about DS, Context, Views
& Panels?

 • Not a lot of presentations that cover using
   these tools together

 • I like talking strategy/philosophy of site
   building, not just “How To”

 • All of these tools use the UI - you don’t
   have to be a hard core developer to build
   advanced Drupal sites!

 • Panels + Context + DS have = 1 million
   downloads combined
Breaking Down a Site
Design
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Blocks
Blocks



         Fields
Breaking Down a Site
Design
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Title



  Body




         Blocks
Content vs. Pages
Content vs. Pages
• Let’s clarify terminology
Content vs. Pages
• Let’s clarify terminology
• Content uses a Drupal content structure like
  a content type (also users, taxonomy, etc.)
Content vs. Pages
• Let’s clarify terminology
• Content uses a Drupal content structure like
  a content type (also users, taxonomy, etc.)

• The Amazon Homepage is a page
Content vs. Pages
• Let’s clarify terminology
• Content uses a Drupal content structure like
  a content type (also users, taxonomy, etc.)

• The Amazon Homepage is a page
• The Kindle Fire Product Page is a Product,
  therefore it is content
Content vs. Pages
• Let’s clarify terminology
• Content uses a Drupal content structure like
  a content type (also users, taxonomy, etc.)

• The Amazon Homepage is a page
• The Kindle Fire Product Page is a Product,
  therefore it is content

• The tools for constructing Content vs.
  Pages can vary
Laying Out Blocks on a Page

•   Block Admin Page

•   The default Drupal
    way to place blocks

•   Can get....messy
Context
Set visibility




Add blocks to regions
Drag and drop blocks




        Modify your
       context inline
Exportable!
Panels
Panels

• Can create arbitrary layouts within the
  content area of a page
Panels

• Can create arbitrary layouts within the
  content area of a page

• Not limited to theme’s defined regions
Panels

• Can create arbitrary layouts within the
  content area of a page

• Not limited to theme’s defined regions
• Exportable!
Panels

• Can create arbitrary layouts within the
  content area of a page

• Not limited to theme’s defined regions
• Exportable!
• Learning Curve, UI not super-intuitive
Panels Example
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Constructing Content in Drupal
The Basic Drupal Fields UI
The theme layer
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Constructing Content in Drupal
Constructing Content in Drupal


• Panels Node Template
Constructing Content in Drupal


• Panels Node Template
 • Can also layout content
Constructing Content in Drupal


• Panels Node Template
 • Can also layout content
 • Configurable arguments are great!
Constructing Content in Drupal


• Panels Node Template
 • Can also layout content
 • Configurable arguments are great!
 • UI still makes some people crazy
Panels Node Template
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Panels Node Template
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Constructing Content with Display Suite
Constructing Content with Display Suite

•   My new favorite toy!
Constructing Content with Display Suite

•   My new favorite toy!

•   Extends Drupal UI
Constructing Content with Display Suite

•   My new favorite toy!

•   Extends Drupal UI

•   More intuitive than Panels
Constructing Content with Display Suite

•   My new favorite toy!

•   Extends Drupal UI

•   More intuitive than Panels

•   Can also use Panels!
Constructing Content with Display Suite

•   My new favorite toy!

•   Extends Drupal UI

•   More intuitive than Panels

•   Can also use Panels!

•   Create custom Display modes - Important!
Constructing Content with Display Suite

•   My new favorite toy!

•   Extends Drupal UI

•   More intuitive than Panels

•   Can also use Panels!

•   Create custom Display modes - Important!

•   Exportable
Constructing Content with Display Suite

•   My new favorite toy!

•   Extends Drupal UI

•   More intuitive than Panels

•   Can also use Panels!

•   Create custom Display modes - Important!

•   Exportable

•   Create custom layouts very easily
Constructing Content with Display Suite

•   My new favorite toy!

•   Extends Drupal UI

•   More intuitive than Panels

•   Can also use Panels!

•   Create custom Display modes - Important!

•   Exportable

•   Create custom layouts very easily

•   Works well with views
Constructing Content with Display Suite

•   My new favorite toy!

•   Extends Drupal UI

•   More intuitive than Panels

•   Can also use Panels!

•   Create custom Display modes - Important!

•   Exportable

•   Create custom layouts very easily

•   Works well with views        DS Search is great too!
Panels + DS
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Create custom view
   modes here
DS Select Layout
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
DS Custom Layout
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Pulling Content
Pulling Content
•   Views! Everyone’s
    favorite UI tool
Pulling Content
•   Views! Everyone’s
    favorite UI tool

•   Views are all over the
    place!
Pulling Content
•   Views! Everyone’s
    favorite UI tool

•   Views are all over the
    place!

•   What’s a good
    strategy for using
    Views with these
    tools?
Constructing Views
Constructing Views
•   Important to Site
    Building
Constructing Views
•   Important to Site
    Building

•   Row style - Content
    vs. Views
Constructing Views
•   Important to Site
    Building

•   Row style - Content   Row Style
    vs. Views
Constructing Views
•   Important to Site
    Building

•   Row style - Content   Row Style
    vs. Views




    View Modes
Constructing Views
Constructing Views

• In Drupal 6 I used fields exclusively
Constructing Views

• In Drupal 6 I used fields exclusively
• The problem...duplication
Constructing Views

• In Drupal 6 I used fields exclusively
• The problem...duplication
 • Multiple views with same ‘theme’ and
    same ‘fields’
Constructing Views

• In Drupal 6 I used fields exclusively
• The problem...duplication
 • Multiple views with same ‘theme’ and
    same ‘fields’

 • Also inefficient because more fields =
    more joins
Constructing Views

• In Drupal 6 I used fields exclusively
• The problem...duplication
 • Multiple views with same ‘theme’ and
    same ‘fields’

 • Also inefficient because more fields =
    more joins
Constructing Views
Constructing Views
• In Drupal 7 I have gone back to
  ‘Content’ (formerly node) style output
Constructing Views
• In Drupal 7 I have gone back to
  ‘Content’ (formerly node) style output

• Delegate theming to the content type
Constructing Views
• In Drupal 7 I have gone back to
  ‘Content’ (formerly node) style output

• Delegate theming to the content type
• Custom view modes means you can theme
  differently based on the context
Constructing Views
• In Drupal 7 I have gone back to
  ‘Content’ (formerly node) style output

• Delegate theming to the content type
• Custom view modes means you can theme
  differently based on the context

• Simplify your views!
Constructing Views
• In Drupal 7 I have gone back to
  ‘Content’ (formerly node) style output

• Delegate theming to the content type
• Custom view modes means you can theme
  differently based on the context

• Simplify your views!
• Less joins!
Constructing Views
• In Drupal 7 I have gone back to
  ‘Content’ (formerly node) style output

• Delegate theming to the content type
• Custom view modes means you can theme
  differently based on the context

• Simplify your views!
• Less joins!
• More re-use
Constructing Views
• In Drupal 7 I have gone back to
  ‘Content’ (formerly node) style output

• Delegate theming to the content type
             Avoid Field Bloat! you can theme
• Custom view modes means
  differently based on the context

• Simplify your views!
• Less joins!
• More re-use
Display Suite + Views
Display Suite + Views
•   Display Suite + Views, a match made in heaven
Display Suite + Views
•   Display Suite + Views, a match made in heaven

•   DS lets you create arbitrary view modes
Display Suite + Views
•   Display Suite + Views, a match made in heaven

•   DS lets you create arbitrary view modes

•   Examples:
Display Suite + Views
•   Display Suite + Views, a match made in heaven

•   DS lets you create arbitrary view modes

•   Examples:

    •   Teaser - (default) You can use for your basic
        most common teaser
Display Suite + Views
•   Display Suite + Views, a match made in heaven

•   DS lets you create arbitrary view modes

•   Examples:

    •   Teaser - (default) You can use for your basic
        most common teaser

    •   Homepage Teaser - customize for homepage
Display Suite + Views
•   Display Suite + Views, a match made in heaven

•   DS lets you create arbitrary view modes

•   Examples:

    •   Teaser - (default) You can use for your basic
        most common teaser

    •   Homepage Teaser - customize for homepage

    •   Gallery Teaser
Display Suite + Views
•   Display Suite + Views, a match made in heaven

•   DS lets you create arbitrary view modes

•   Examples:

    •   Teaser - (default) You can use for your basic
        most common teaser

    •   Homepage Teaser - customize for homepage

    •   Gallery Teaser

        •   Article content will use image thumb, Video
            content might use 3rd party image
Display Suite + Views
•   Display Suite + Views, a match made in heaven

•   DS lets you create arbitrary view modes

•   Examples:

    •   Teaser - (default) You can use for your basic
        most common teaser

    •   Homepage Teaser - customize for homepage
                                          DS + Views
    •   Gallery Teaser

        •   Article content will use image thumb, Video
            content might use 3rd party image
Display Suite + Views
Display Suite + Views

• In the view, select ‘Content’ row style
  and use view-mode ‘Teaser’
Display Suite + Views

• In the view, select ‘Content’ row style
  and use view-mode ‘Teaser’

                Select your view mode
Display Suite + Views

 • In the view, select ‘Content’ row style
   and use view-mode ‘Teaser’

                  Select your view mode




• My favorite way to site build!
Display Suite + Views

 • In the view, select ‘Content’ row style
   and use view-mode ‘Teaser’

                 Select your view mode




• My favorite way to site build!
• View mode are exportable to features
Putting it All Together
Putting it All Together

• Display Suite is my go-to tool for
  constructing content, both ‘Full Content’
  pages and views content
Putting it All Together

• Display Suite is my go-to tool for
  constructing content, both ‘Full Content’
  pages and views content

• Context is my go-to tool for arrange blocks
  onto pages
Putting it All Together

• Display Suite is my go-to tool for
  constructing content, both ‘Full Content’
  pages and views content

• Context is my go-to tool for arrange blocks
  onto pages

• View is my go-to tool of course for creating
  lists of content
Putting it All Together

• Display Suite is my go-to tool for
  constructing content, both ‘Full Content’
  pages and views content

• Context is my go-to tool for arrange blocks
  onto pages

• View is my go-to tool of course for creating
  lists of content

• Panels is not quite a go-to tool for me as
  much
Use Cases
• Let’s look at a couple real-world examples
• We’ll compare tools we could use to build
  these pages
Page Building Example
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
These could be your panel regions
Up here might be context or page.tpl.php




    These could be your panel regions
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Could be all context & theme regions
Content Page Example
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Likely Context blocks
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Could be a DS View pulling a custom view mode
Could be a DS View pulling a custom view mode




Additional Fields - could be Panel fields or DS
To Summarize...

• Drupal offers very powerful UI tools for
  constructing pages and content

• You can build very robust sites in Drupal
  without coding

• Hopefully you have a better understanding
  how these tools can be used, individually
  and together
That’s It!

 • Context - http://drupal.org/project/context
 • Panels - http://drupal.org/project/panels
 • Display Suite - http://drupal.org/project/ds
 • Views - http://drupal.org/project/views
 Questions?                            @drupalninja

More Related Content

ODP
Drupal - Blocks vs Context vs Panels
PPTX
Top 20 mistakes you will make on your 1st Drupal project
KEY
Simplifying End-user Drupal 7 Content Administration
PDF
Creating Dynamic Landing Pages for Drupal with Panels - Webinar
PDF
Best Practice Checklist for Building a Drupal Website
PDF
Preventing Drupal Headaches: Establishing Flexible File Paths From The Start
PDF
Media handling in Drupal (Drupalcamp Leuven 2013)
PDF
Preventing Drupal Headaches: Content Type Checklist
Drupal - Blocks vs Context vs Panels
Top 20 mistakes you will make on your 1st Drupal project
Simplifying End-user Drupal 7 Content Administration
Creating Dynamic Landing Pages for Drupal with Panels - Webinar
Best Practice Checklist for Building a Drupal Website
Preventing Drupal Headaches: Establishing Flexible File Paths From The Start
Media handling in Drupal (Drupalcamp Leuven 2013)
Preventing Drupal Headaches: Content Type Checklist

What's hot (20)

PDF
Drupal 8: Most common beginner mistakes
PDF
The Wonderful World of Drupal 8 Multilingual
PDF
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
PDF
Introduction to the Drupal - Web Experience Toolkit
PDF
Introduction to Drupal Basics
PDF
What is Drupal? And Why is it Useful? Webinar
PPTX
Drupal For Dummies
PDF
Creating a Drupal Install Profile for a Large Organization
KEY
Getting started with CSS frameworks using Zurb foundation
PDF
Using Panels Wisely - DrupalCamp Ottawa 2014
PDF
Content First – Planning Drupal Content Types
PDF
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
PPTX
Complex Content Structures and Workflow with Drupal
PDF
Responsive Web Design using ZURB Foundation
ZIP
Building a Drupal Distribution using Features, Drush Make, Installation Profi...
PDF
Site Building Checklist DrupalCamp Ottawa
PDF
Creating a Reusable Drupal Website for Higher Education - at USG Tech Day
PDF
Responsive Design in Drupal with Zen and Zen Grids
PPTX
Wordpress overview
Drupal 8: Most common beginner mistakes
The Wonderful World of Drupal 8 Multilingual
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Introduction to the Drupal - Web Experience Toolkit
Introduction to Drupal Basics
What is Drupal? And Why is it Useful? Webinar
Drupal For Dummies
Creating a Drupal Install Profile for a Large Organization
Getting started with CSS frameworks using Zurb foundation
Using Panels Wisely - DrupalCamp Ottawa 2014
Content First – Planning Drupal Content Types
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Complex Content Structures and Workflow with Drupal
Responsive Web Design using ZURB Foundation
Building a Drupal Distribution using Features, Drush Make, Installation Profi...
Site Building Checklist DrupalCamp Ottawa
Creating a Reusable Drupal Website for Higher Education - at USG Tech Day
Responsive Design in Drupal with Zen and Zen Grids
Wordpress overview
Ad

Viewers also liked (20)

PPTX
Using Display Suite / Context to Build your Drupal Site
PDF
Prescripción enfermera
PDF
Top 20 Drupal Mistakes newbies make
PPTX
Sustainable living mind maps
PPTX
Drupal 8 Vocabulary Lesson
PDF
Seoul Foreign School Plenary Session
PDF
IDG Next Generation Marketing - Keynote (Seoul Korea)
PPTX
Presentación Matricula BTP Informática
PDF
International Business Management (IBM) Focus Study: South Korea
PDF
11th WORLD CULTURAL ART SYMPOSIUM SOUTH KOREA 2013
PDF
South Korea AutoBook Preview
PDF
Smart and sustainable city case of urban transformation of seoul myounggu kang
PDF
2011 Edelman Trust Barometer: South Korea Insights
PPT
Apropiación del código escrito
PPTX
Graphics lecture#4 section view
PDF
(Pdf)2030 seoul plan
PPTX
Què és la Filosofia?
PPTX
Power BI Create lightning fast dashboard with power bi & Its Components
PPT
PDF
Best practices in Drupal 7 (Views, Panels ...)
Using Display Suite / Context to Build your Drupal Site
Prescripción enfermera
Top 20 Drupal Mistakes newbies make
Sustainable living mind maps
Drupal 8 Vocabulary Lesson
Seoul Foreign School Plenary Session
IDG Next Generation Marketing - Keynote (Seoul Korea)
Presentación Matricula BTP Informática
International Business Management (IBM) Focus Study: South Korea
11th WORLD CULTURAL ART SYMPOSIUM SOUTH KOREA 2013
South Korea AutoBook Preview
Smart and sustainable city case of urban transformation of seoul myounggu kang
2011 Edelman Trust Barometer: South Korea Insights
Apropiación del código escrito
Graphics lecture#4 section view
(Pdf)2030 seoul plan
Què és la Filosofia?
Power BI Create lightning fast dashboard with power bi & Its Components
Best practices in Drupal 7 (Views, Panels ...)
Ad

Similar to Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels (20)

PPTX
Wp nhcc portfolio
PPTX
Designing & Developing for Content in WordPress
PDF
Girl geek-drupal-intro-jan23-2012
PDF
Intro to Drupal
PDF
Montreal Girl Geeks: Intro to Drupal
PPTX
Drupal: Northeastern University Libraries website
PPTX
Blogging with drupal
KEY
Introduction to Drupal
PDF
Building a Great User Experience for Content Editors in Drupal 8
PPTX
Customizing WordPress Themes
PPTX
Drupal: Organizing Content for Multiple Audiences
PDF
Building Drupal sites that content authors love
KEY
Efficient theming in Drupal
PDF
Creating Landing Pages for Drupal 8
PDF
Introduction to Drupal
PPTX
Drupal: Mitigating Risk with Multiple Content Creators
PPTX
SPSHawaii: Navigation: A Step Towards Success in SharePoint
PPT
Bootstrap + Drupal Commerce in less than 45 minutes!
PDF
Getting started with dev tools (05 09-17, santa monica) upload
PDF
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
Wp nhcc portfolio
Designing & Developing for Content in WordPress
Girl geek-drupal-intro-jan23-2012
Intro to Drupal
Montreal Girl Geeks: Intro to Drupal
Drupal: Northeastern University Libraries website
Blogging with drupal
Introduction to Drupal
Building a Great User Experience for Content Editors in Drupal 8
Customizing WordPress Themes
Drupal: Organizing Content for Multiple Audiences
Building Drupal sites that content authors love
Efficient theming in Drupal
Creating Landing Pages for Drupal 8
Introduction to Drupal
Drupal: Mitigating Risk with Multiple Content Creators
SPSHawaii: Navigation: A Step Towards Success in SharePoint
Bootstrap + Drupal Commerce in less than 45 minutes!
Getting started with dev tools (05 09-17, santa monica) upload
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond

More from Mediacurrent (20)

PDF
Penn State News: Pivoting to Decoupled Drupal with Gatsby
PDF
Evolving How We Measure Digital Success in Higher Ed
PDF
Penn State scales static Drupal to new heights
PDF
Delivering Meaningful Digital Experiences in Higher Ed
PDF
Content Strategy: Building Connections with Your Audience
PDF
Decoupled Drupal and Gatsby in the Real World
PDF
A Better Way to Build and Manage Sites with Rain for Drupal 9
PPTX
Drupal Security: What You Need to Know
PDF
Leveraging Design Systems to Streamline Web Projects
PPTX
Reimagining Your Higher Ed Web Strategy
PPTX
How to Digitally Transform Higher Ed with Drupal
PPTX
Is my website accessible? Common mistakes (and how to fix them)
PDF
Managing Images In Large Scale Drupal 8 & 9 Websites
PDF
Paragraphs v Layout Builder - The Final Showdown
PDF
MagMutual.com: On the JAMStack with Gatsby and Drupal 8
PDF
Creating an Organizational Culture of Giving Back to Drupal
PPTX
Level Up Your Team: Front-End Development Best Practices
PPTX
Best Practices for Moving to Drupal 9
PPTX
How to Prove Marketing ROI: Overcoming Digital Marketing Challenges
PDF
Prepare Your Drupal 9 Action Plan
Penn State News: Pivoting to Decoupled Drupal with Gatsby
Evolving How We Measure Digital Success in Higher Ed
Penn State scales static Drupal to new heights
Delivering Meaningful Digital Experiences in Higher Ed
Content Strategy: Building Connections with Your Audience
Decoupled Drupal and Gatsby in the Real World
A Better Way to Build and Manage Sites with Rain for Drupal 9
Drupal Security: What You Need to Know
Leveraging Design Systems to Streamline Web Projects
Reimagining Your Higher Ed Web Strategy
How to Digitally Transform Higher Ed with Drupal
Is my website accessible? Common mistakes (and how to fix them)
Managing Images In Large Scale Drupal 8 & 9 Websites
Paragraphs v Layout Builder - The Final Showdown
MagMutual.com: On the JAMStack with Gatsby and Drupal 8
Creating an Organizational Culture of Giving Back to Drupal
Level Up Your Team: Front-End Development Best Practices
Best Practices for Moving to Drupal 9
How to Prove Marketing ROI: Overcoming Digital Marketing Challenges
Prepare Your Drupal 9 Action Plan

Recently uploaded (20)

PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
PDF
DevOps & Developer Experience Summer BBQ
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PPTX
breach-and-attack-simulation-cybersecurity-india-chennai-defenderrabbit-2025....
PPTX
Cloud computing and distributed systems.
PDF
KodekX | Application Modernization Development
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
PDF
CIFDAQ's Market Insight: SEC Turns Pro Crypto
PDF
Transforming Manufacturing operations through Intelligent Integrations
PDF
Modernizing your data center with Dell and AMD
PDF
REPORT: Heating appliances market in Poland 2024
PDF
CIFDAQ's Teaching Thursday: Moving Averages Made Simple
PDF
Sensors and Actuators in IoT Systems using pdf
PDF
Omni-Path Integration Expertise Offered by Nor-Tech
PDF
[발표본] 너의 과제는 클라우드에 있어_KTDS_김동현_20250524.pdf
PDF
Event Presentation Google Cloud Next Extended 2025
PDF
CIFDAQ's Market Wrap: Ethereum Leads, Bitcoin Lags, Institutions Shift
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PPTX
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
PPTX
Telecom Fraud Prevention Guide | Hyperlink InfoSystem
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
DevOps & Developer Experience Summer BBQ
Understanding_Digital_Forensics_Presentation.pptx
breach-and-attack-simulation-cybersecurity-india-chennai-defenderrabbit-2025....
Cloud computing and distributed systems.
KodekX | Application Modernization Development
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
CIFDAQ's Market Insight: SEC Turns Pro Crypto
Transforming Manufacturing operations through Intelligent Integrations
Modernizing your data center with Dell and AMD
REPORT: Heating appliances market in Poland 2024
CIFDAQ's Teaching Thursday: Moving Averages Made Simple
Sensors and Actuators in IoT Systems using pdf
Omni-Path Integration Expertise Offered by Nor-Tech
[발표본] 너의 과제는 클라우드에 있어_KTDS_김동현_20250524.pdf
Event Presentation Google Cloud Next Extended 2025
CIFDAQ's Market Wrap: Ethereum Leads, Bitcoin Lags, Institutions Shift
20250228 LYD VKU AI Blended-Learning.pptx
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
Telecom Fraud Prevention Guide | Hyperlink InfoSystem

Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels

  • 1. Learn Drupal's Most Powerful Site- Building Modules: Display Suite, Context, Views, & Panels By Jay Callicott Lead Architect CapitalCamp 2012 July 27, 2012
  • 2. Outline • About Jay • Why talk about DS, Context, Views & Panels? • Breaking Down a Site Design • Content vs. Pages • Laying Out Blocks on a Page • Walkthrough of Context, Panels, Display Suite • Constructing Content in Drupal • Views • Use Cases
  • 4. About Jay • Mediacurrent Lead Architect
  • 5. About Jay • Mediacurrent Lead Architect • Drupal developer since Drupal 4.6
  • 6. About Jay • Mediacurrent Lead Architect • Drupal developer since Drupal 4.6 • OpenChurch Distribution Maintainer
  • 7. About Jay • Mediacurrent Lead Architect • Drupal developer since Drupal 4.6 • OpenChurch Distribution Maintainer • @drupalninja
  • 8. Why talk about DS, Context, Views & Panels?
  • 9. Why talk about DS, Context, Views & Panels? • Not a lot of presentations that cover using these tools together
  • 10. Why talk about DS, Context, Views & Panels? • Not a lot of presentations that cover using these tools together • I like talking strategy/philosophy of site building, not just “How To”
  • 11. Why talk about DS, Context, Views & Panels? • Not a lot of presentations that cover using these tools together • I like talking strategy/philosophy of site building, not just “How To” • All of these tools use the UI - you don’t have to be a hard core developer to build advanced Drupal sites!
  • 12. Why talk about DS, Context, Views & Panels? • Not a lot of presentations that cover using these tools together • I like talking strategy/philosophy of site building, not just “How To” • All of these tools use the UI - you don’t have to be a hard core developer to build advanced Drupal sites! • Panels + Context + DS have = 1 million downloads combined
  • 13. Breaking Down a Site Design
  • 17. Blocks Fields
  • 18. Breaking Down a Site Design
  • 20. Title Body Blocks
  • 22. Content vs. Pages • Let’s clarify terminology
  • 23. Content vs. Pages • Let’s clarify terminology • Content uses a Drupal content structure like a content type (also users, taxonomy, etc.)
  • 24. Content vs. Pages • Let’s clarify terminology • Content uses a Drupal content structure like a content type (also users, taxonomy, etc.) • The Amazon Homepage is a page
  • 25. Content vs. Pages • Let’s clarify terminology • Content uses a Drupal content structure like a content type (also users, taxonomy, etc.) • The Amazon Homepage is a page • The Kindle Fire Product Page is a Product, therefore it is content
  • 26. Content vs. Pages • Let’s clarify terminology • Content uses a Drupal content structure like a content type (also users, taxonomy, etc.) • The Amazon Homepage is a page • The Kindle Fire Product Page is a Product, therefore it is content • The tools for constructing Content vs. Pages can vary
  • 27. Laying Out Blocks on a Page • Block Admin Page • The default Drupal way to place blocks • Can get....messy
  • 30. Drag and drop blocks Modify your context inline
  • 33. Panels • Can create arbitrary layouts within the content area of a page
  • 34. Panels • Can create arbitrary layouts within the content area of a page • Not limited to theme’s defined regions
  • 35. Panels • Can create arbitrary layouts within the content area of a page • Not limited to theme’s defined regions • Exportable!
  • 36. Panels • Can create arbitrary layouts within the content area of a page • Not limited to theme’s defined regions • Exportable! • Learning Curve, UI not super-intuitive
  • 40. Constructing Content in Drupal The Basic Drupal Fields UI
  • 44. Constructing Content in Drupal • Panels Node Template
  • 45. Constructing Content in Drupal • Panels Node Template • Can also layout content
  • 46. Constructing Content in Drupal • Panels Node Template • Can also layout content • Configurable arguments are great!
  • 47. Constructing Content in Drupal • Panels Node Template • Can also layout content • Configurable arguments are great! • UI still makes some people crazy
  • 53. Constructing Content with Display Suite
  • 54. Constructing Content with Display Suite • My new favorite toy!
  • 55. Constructing Content with Display Suite • My new favorite toy! • Extends Drupal UI
  • 56. Constructing Content with Display Suite • My new favorite toy! • Extends Drupal UI • More intuitive than Panels
  • 57. Constructing Content with Display Suite • My new favorite toy! • Extends Drupal UI • More intuitive than Panels • Can also use Panels!
  • 58. Constructing Content with Display Suite • My new favorite toy! • Extends Drupal UI • More intuitive than Panels • Can also use Panels! • Create custom Display modes - Important!
  • 59. Constructing Content with Display Suite • My new favorite toy! • Extends Drupal UI • More intuitive than Panels • Can also use Panels! • Create custom Display modes - Important! • Exportable
  • 60. Constructing Content with Display Suite • My new favorite toy! • Extends Drupal UI • More intuitive than Panels • Can also use Panels! • Create custom Display modes - Important! • Exportable • Create custom layouts very easily
  • 61. Constructing Content with Display Suite • My new favorite toy! • Extends Drupal UI • More intuitive than Panels • Can also use Panels! • Create custom Display modes - Important! • Exportable • Create custom layouts very easily • Works well with views
  • 62. Constructing Content with Display Suite • My new favorite toy! • Extends Drupal UI • More intuitive than Panels • Can also use Panels! • Create custom Display modes - Important! • Exportable • Create custom layouts very easily • Works well with views DS Search is great too!
  • 65. Create custom view modes here
  • 72. Pulling Content • Views! Everyone’s favorite UI tool
  • 73. Pulling Content • Views! Everyone’s favorite UI tool • Views are all over the place!
  • 74. Pulling Content • Views! Everyone’s favorite UI tool • Views are all over the place! • What’s a good strategy for using Views with these tools?
  • 76. Constructing Views • Important to Site Building
  • 77. Constructing Views • Important to Site Building • Row style - Content vs. Views
  • 78. Constructing Views • Important to Site Building • Row style - Content Row Style vs. Views
  • 79. Constructing Views • Important to Site Building • Row style - Content Row Style vs. Views View Modes
  • 81. Constructing Views • In Drupal 6 I used fields exclusively
  • 82. Constructing Views • In Drupal 6 I used fields exclusively • The problem...duplication
  • 83. Constructing Views • In Drupal 6 I used fields exclusively • The problem...duplication • Multiple views with same ‘theme’ and same ‘fields’
  • 84. Constructing Views • In Drupal 6 I used fields exclusively • The problem...duplication • Multiple views with same ‘theme’ and same ‘fields’ • Also inefficient because more fields = more joins
  • 85. Constructing Views • In Drupal 6 I used fields exclusively • The problem...duplication • Multiple views with same ‘theme’ and same ‘fields’ • Also inefficient because more fields = more joins
  • 87. Constructing Views • In Drupal 7 I have gone back to ‘Content’ (formerly node) style output
  • 88. Constructing Views • In Drupal 7 I have gone back to ‘Content’ (formerly node) style output • Delegate theming to the content type
  • 89. Constructing Views • In Drupal 7 I have gone back to ‘Content’ (formerly node) style output • Delegate theming to the content type • Custom view modes means you can theme differently based on the context
  • 90. Constructing Views • In Drupal 7 I have gone back to ‘Content’ (formerly node) style output • Delegate theming to the content type • Custom view modes means you can theme differently based on the context • Simplify your views!
  • 91. Constructing Views • In Drupal 7 I have gone back to ‘Content’ (formerly node) style output • Delegate theming to the content type • Custom view modes means you can theme differently based on the context • Simplify your views! • Less joins!
  • 92. Constructing Views • In Drupal 7 I have gone back to ‘Content’ (formerly node) style output • Delegate theming to the content type • Custom view modes means you can theme differently based on the context • Simplify your views! • Less joins! • More re-use
  • 93. Constructing Views • In Drupal 7 I have gone back to ‘Content’ (formerly node) style output • Delegate theming to the content type Avoid Field Bloat! you can theme • Custom view modes means differently based on the context • Simplify your views! • Less joins! • More re-use
  • 95. Display Suite + Views • Display Suite + Views, a match made in heaven
  • 96. Display Suite + Views • Display Suite + Views, a match made in heaven • DS lets you create arbitrary view modes
  • 97. Display Suite + Views • Display Suite + Views, a match made in heaven • DS lets you create arbitrary view modes • Examples:
  • 98. Display Suite + Views • Display Suite + Views, a match made in heaven • DS lets you create arbitrary view modes • Examples: • Teaser - (default) You can use for your basic most common teaser
  • 99. Display Suite + Views • Display Suite + Views, a match made in heaven • DS lets you create arbitrary view modes • Examples: • Teaser - (default) You can use for your basic most common teaser • Homepage Teaser - customize for homepage
  • 100. Display Suite + Views • Display Suite + Views, a match made in heaven • DS lets you create arbitrary view modes • Examples: • Teaser - (default) You can use for your basic most common teaser • Homepage Teaser - customize for homepage • Gallery Teaser
  • 101. Display Suite + Views • Display Suite + Views, a match made in heaven • DS lets you create arbitrary view modes • Examples: • Teaser - (default) You can use for your basic most common teaser • Homepage Teaser - customize for homepage • Gallery Teaser • Article content will use image thumb, Video content might use 3rd party image
  • 102. Display Suite + Views • Display Suite + Views, a match made in heaven • DS lets you create arbitrary view modes • Examples: • Teaser - (default) You can use for your basic most common teaser • Homepage Teaser - customize for homepage DS + Views • Gallery Teaser • Article content will use image thumb, Video content might use 3rd party image
  • 103. Display Suite + Views
  • 104. Display Suite + Views • In the view, select ‘Content’ row style and use view-mode ‘Teaser’
  • 105. Display Suite + Views • In the view, select ‘Content’ row style and use view-mode ‘Teaser’ Select your view mode
  • 106. Display Suite + Views • In the view, select ‘Content’ row style and use view-mode ‘Teaser’ Select your view mode • My favorite way to site build!
  • 107. Display Suite + Views • In the view, select ‘Content’ row style and use view-mode ‘Teaser’ Select your view mode • My favorite way to site build! • View mode are exportable to features
  • 108. Putting it All Together
  • 109. Putting it All Together • Display Suite is my go-to tool for constructing content, both ‘Full Content’ pages and views content
  • 110. Putting it All Together • Display Suite is my go-to tool for constructing content, both ‘Full Content’ pages and views content • Context is my go-to tool for arrange blocks onto pages
  • 111. Putting it All Together • Display Suite is my go-to tool for constructing content, both ‘Full Content’ pages and views content • Context is my go-to tool for arrange blocks onto pages • View is my go-to tool of course for creating lists of content
  • 112. Putting it All Together • Display Suite is my go-to tool for constructing content, both ‘Full Content’ pages and views content • Context is my go-to tool for arrange blocks onto pages • View is my go-to tool of course for creating lists of content • Panels is not quite a go-to tool for me as much
  • 113. Use Cases • Let’s look at a couple real-world examples • We’ll compare tools we could use to build these pages
  • 117. These could be your panel regions
  • 118. Up here might be context or page.tpl.php These could be your panel regions
  • 121. Could be all context & theme regions
  • 126. Could be a DS View pulling a custom view mode
  • 127. Could be a DS View pulling a custom view mode Additional Fields - could be Panel fields or DS
  • 128. To Summarize... • Drupal offers very powerful UI tools for constructing pages and content • You can build very robust sites in Drupal without coding • Hopefully you have a better understanding how these tools can be used, individually and together
  • 129. That’s It! • Context - http://drupal.org/project/context • Panels - http://drupal.org/project/panels • Display Suite - http://drupal.org/project/ds • Views - http://drupal.org/project/views Questions? @drupalninja

Editor's Notes

  • #2: \n
  • #3: 1. Today I will attempt to give a good overview of how Context, Panels, Display Suite and Views work together on a site.\n2. I’ll talk pros and cons and about my strategy with using these tools\n3. I have lots of screenshots and examples to illustrate how to use these tools to construct a site\n
  • #4: \n
  • #5: \n
  • #6: \n
  • #7: \n
  • #8: 1. Over 1 million downloads and yet a lot of people I talk to at these camps don’t use these tools regularly or don’t know a lot about them\n
  • #9: 1. Over 1 million downloads and yet a lot of people I talk to at these camps don’t use these tools regularly or don’t know a lot about them\n
  • #10: 1. Over 1 million downloads and yet a lot of people I talk to at these camps don’t use these tools regularly or don’t know a lot about them\n
  • #11: 1. Over 1 million downloads and yet a lot of people I talk to at these camps don’t use these tools regularly or don’t know a lot about them\n
  • #12: 1. One way to deconstruct a site design is to see blocks and fields\n2. A block can be just about anything, a blurb of information, a dynamic list, a menu, a field\n3. A field is pulling a specific piece of information from a piece of content \n\n
  • #13: 1. One way to deconstruct a site design is to see blocks and fields\n2. A block can be just about anything, a blurb of information, a dynamic list, a menu, a field\n3. A field is pulling a specific piece of information from a piece of content \n\n
  • #14: 1. One way to deconstruct a site design is to see blocks and fields\n2. A block can be just about anything, a blurb of information, a dynamic list, a menu, a field\n3. A field is pulling a specific piece of information from a piece of content \n\n
  • #15: 1. One way to deconstruct a site design is to see blocks and fields\n2. A block can be just about anything, a blurb of information, a dynamic list, a menu, a field\n3. A field is pulling a specific piece of information from a piece of content \n\n
  • #16: 1. Even if you have a simple page you might still think of it this way\n
  • #17: 1. Even if you have a simple page you might still think of it this way\n
  • #18: 1. We just talked about dividing a page design into blocks and fields. I also separate Content from Pages.\n
  • #19: 1. We just talked about dividing a page design into blocks and fields. I also separate Content from Pages.\n
  • #20: 1. We just talked about dividing a page design into blocks and fields. I also separate Content from Pages.\n
  • #21: 1. We just talked about dividing a page design into blocks and fields. I also separate Content from Pages.\n
  • #22: 1. We just talked about dividing a page design into blocks and fields. I also separate Content from Pages.\n
  • #23: 1. Let’s talk tools!\n2. We’ll talk Pages first, what are our options for laying out blocks on a page?\n3. This is a Drupal 6 example of the Admin Block Page and an example of where it can get messy.\n
  • #24: 1. Context in my view is a lot better for laying out blocks\n2. More of a learning curve perhaps, but can be more organized\n
  • #25: 1. This is a OpenChurch ‘global’ context example illustrating how blocks are arranged into theme regions\n2. There are more options than just blocks\n
  • #26: 1. The Admin module has a nice UI tool for modifying contexts inline\n2. And Contexts are exportable!\n
  • #27: 1. I have given some presentations on Features several times and so a big emphasis for me is exportability\n
  • #28: 1. Now Let’s talk Panels\n2. An aside, “Panels Everywhere” controls the whole page’s layout and is interesting although outside of the scope of this discussion.\n
  • #29: 1. Now Let’s talk Panels\n2. An aside, “Panels Everywhere” controls the whole page’s layout and is interesting although outside of the scope of this discussion.\n
  • #30: 1. Now Let’s talk Panels\n2. An aside, “Panels Everywhere” controls the whole page’s layout and is interesting although outside of the scope of this discussion.\n
  • #31: 1. Now Let’s talk Panels\n2. An aside, “Panels Everywhere” controls the whole page’s layout and is interesting although outside of the scope of this discussion.\n
  • #32: 1. Panels does have a nicer inline editing option called IPE which is illustrated here on the homepage\n
  • #33: 1. Panels does have a nicer inline editing option called IPE which is illustrated here on the homepage\n
  • #34: 1. Now let’s talk tools to build content\n2. Can arrange fields just using the Drupal UI and you have some flexibility\n3. This is exportable to Features\n
  • #35: 1. You can also use your theme to customize content\n2. Can have more control\n3. You have configuration store in code, version control, etc.\n4. This is pretty straight forward until you have to do ‘dynamic’ things, then things can get hairy\n
  • #36: 1. Now let’s look at how Panels can be used for building content pages\n2. When I figured out Panels node template I stopped using the theme layer at all for nodes or user customizations\n3. Not going to cover Panelizer\n
  • #37: 1. Now let’s look at how Panels can be used for building content pages\n2. When I figured out Panels node template I stopped using the theme layer at all for nodes or user customizations\n3. Not going to cover Panelizer\n
  • #38: 1. Now let’s look at how Panels can be used for building content pages\n2. When I figured out Panels node template I stopped using the theme layer at all for nodes or user customizations\n3. Not going to cover Panelizer\n
  • #39: 1. Now let’s look at how Panels can be used for building content pages\n2. When I figured out Panels node template I stopped using the theme layer at all for nodes or user customizations\n3. Not going to cover Panelizer\n
  • #40: 1. This illustrates the friendlier inline editor we saw earlier\n
  • #41: 1. This illustrates the friendlier inline editor we saw earlier\n
  • #42: 1. This is another way to edit that same page we were looking at\n2. This screen is more controversial, some people like it, some hate it\n3. Panelizer is probably a more friendly way to handle this\n
  • #43: \n
  • #44: \n
  • #45: \n
  • #46: \n
  • #47: \n
  • #48: \n
  • #49: \n
  • #50: \n
  • #51: \n
  • #52: 1. This is pretty cool...\n
  • #53: 1. Drupal comes with a couple, ‘Default’ and ‘Teaser’, many modules add additional view modes as well\n2. This screen just determines where the new view mode will show up\n
  • #54: 1. DS gives you new layout options on the Drupal Manage Display Page\n2. It’s interesting that Panels & DS layouts are interchangeable\n
  • #55: 1. This is a custom layout I defined in the theme layer which is pretty easy (works with Panels too)\n
  • #56: 1. This is a custom layout I defined in the theme layer which is pretty easy (works with Panels too)\n
  • #57: 1. We’ve talked tools for building pages and content, now let’s talk about pulling content\n
  • #58: 1. We’ve talked tools for building pages and content, now let’s talk about pulling content\n
  • #59: 1. We’ve talked tools for building pages and content, now let’s talk about pulling content\n
  • #60: 1. Most developers know Views, but I want to talk a little strategy\n2. In Drupal 4-5 I used to use node and I would find out pretty quick that the customer wanted to display content differently depending on the ‘context’ of where the content was being displayed. Having 1 ‘Teaser’ display mode was not enough. This led to node.tpl.php craziness!\n
  • #61: 1. Most developers know Views, but I want to talk a little strategy\n2. In Drupal 4-5 I used to use node and I would find out pretty quick that the customer wanted to display content differently depending on the ‘context’ of where the content was being displayed. Having 1 ‘Teaser’ display mode was not enough. This led to node.tpl.php craziness!\n
  • #62: 1. Most developers know Views, but I want to talk a little strategy\n2. In Drupal 4-5 I used to use node and I would find out pretty quick that the customer wanted to display content differently depending on the ‘context’ of where the content was being displayed. Having 1 ‘Teaser’ display mode was not enough. This led to node.tpl.php craziness!\n
  • #63: 1. Most developers know Views, but I want to talk a little strategy\n2. In Drupal 4-5 I used to use node and I would find out pretty quick that the customer wanted to display content differently depending on the ‘context’ of where the content was being displayed. Having 1 ‘Teaser’ display mode was not enough. This led to node.tpl.php craziness!\n
  • #64: \n
  • #65: \n
  • #66: \n
  • #67: \n
  • #68: \n
  • #69: \n
  • #70: \n
  • #71: \n
  • #72: \n
  • #73: \n
  • #74: \n
  • #75: \n
  • #76: 1. The main reason why I wanted to bring up views was to talk about views & DS\n
  • #77: 1. The main reason why I wanted to bring up views was to talk about views & DS\n
  • #78: 1. The main reason why I wanted to bring up views was to talk about views & DS\n
  • #79: 1. The main reason why I wanted to bring up views was to talk about views & DS\n
  • #80: 1. The main reason why I wanted to bring up views was to talk about views & DS\n
  • #81: 1. The main reason why I wanted to bring up views was to talk about views & DS\n
  • #82: 1. The main reason why I wanted to bring up views was to talk about views & DS\n
  • #83: 1. The main reason why I wanted to bring up views was to talk about views & DS\n
  • #84: \n
  • #85: \n
  • #86: \n
  • #87: \n
  • #88: 1. I use Panels primarily for page layouts where the layout is different enough to justify\n2. The Panels UI is just too outside of the Drupal UI, mixing Panels with Context is confusing\n
  • #89: 1. I use Panels primarily for page layouts where the layout is different enough to justify\n2. The Panels UI is just too outside of the Drupal UI, mixing Panels with Context is confusing\n
  • #90: 1. I use Panels primarily for page layouts where the layout is different enough to justify\n2. The Panels UI is just too outside of the Drupal UI, mixing Panels with Context is confusing\n
  • #91: 1. I use Panels primarily for page layouts where the layout is different enough to justify\n2. The Panels UI is just too outside of the Drupal UI, mixing Panels with Context is confusing\n
  • #92: \n
  • #93: 1. Could be a panel\n2. Could use context for some persistent elements\n
  • #94: 1. Could be a panel\n2. Could use context for some persistent elements\n
  • #95: 1. Could be a panel\n2. Could use context for some persistent elements\n
  • #96: 1. Could be a panel\n2. Could use context for some persistent elements\n
  • #97: 1. Let’s Look at this page again\n2. This could all be context\n3. A tie breaker for me is how different this is from the normal layout of the rest of the site\n
  • #98: 1. Let’s Look at this page again\n2. This could all be context\n3. A tie breaker for me is how different this is from the normal layout of the rest of the site\n
  • #99: 1. Here is a content page example\n
  • #100: 1. Here is a content page example\n
  • #101: 1. Here is a content page example\n
  • #102: 1. Here is a content page example\n
  • #103: 1. Here is a content page example\n
  • #104: \n
  • #105: \n