ready. set. drupal! an intro to drupal 8, part 1
DESCRIPTION
In this two part series, we'll give you a quick introduction to the Drupal 8 out-of-the-box site building experience. This course is for people who are completely new to Drupal. You might be a developer or a decision maker, but you need to know what makes Drupal tick, and fast. In part 1, you’ll get an in depth overview of the platform, a status update on the latest version, and the tools you need to get up to speed. This course includes: Presentations: We've condensed the most essential information about Drupal into this quick course. Demos: Watch me completing specific tasks as I build a site. Tutorials: Download step-by-step guides and try out the tasks yourself. No matter your experience level or background, this course will get you familiar with the next up-and-coming version of Drupal. Want to sign up for part 2? Register here: https://www.acquia.com/resources/webinars/ready-set-drupal-intro-drupal-8-part-2TRANSCRIPT
![Page 1: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/1.jpg)
http://training.acquia.com
Ready. Set. Drupal!
A quick introduction to the Drupal 8 out-of-the-box site building experience.
http://training.acquia.com/drupalready
![Page 2: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/2.jpg)
IntroductionWhat’s this all about?
![Page 3: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/3.jpg)
About me• Heather James• Manager of Learning
Services• @learningdrupal
training.acquia.com/events
![Page 4: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/4.jpg)
Join me for Part 2!
acquia.com/resources/webinars
![Page 5: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/5.jpg)
Fun is memorable
![Page 6: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/6.jpg)
About you!• What other
systems have you used?
• What do you know about Drupal already?
What’s in your toolbox?
![Page 8: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/8.jpg)
Step-by-step
http://training.acquia.com/drupalready
• Presentations
• Demos• Activities –
try it yourself!
![Page 9: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/9.jpg)
Ready check!You will need
• A working copy of Drupal 8 – most recent Beta.
• Acquia Cloud free siteacquia.com/drupal-8
• Materials!
Nice to have
• Browser inspection tool such as Firebug for Firefox, or “Developer mode” in Chrome.
• Lorem Ipsum text generator.
http://training.acquia.com/drupalready
![Page 10: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/10.jpg)
Task: Drupal 8 – Acquia Cloud• Go to
acquia.com/drupal-8
• Choose to try now.
• Configure your site
acquia.com/drupal-8
![Page 11: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/11.jpg)
Bonus: Local copy
• Install Dev Desktop 2
• Connect locally, securely.
docs.acquia.com/dev-desktop2/install
![Page 12: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/12.jpg)
Lesson 1: What is Drupal?Who is using it, and how.
![Page 13: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/13.jpg)
In Lesson 1• Presentation: Who’s using Drupal?
What kinds of sites are built in Drupal?
• Demo: Orientation around Drupal, and using the tasks and lessons.
• Task: Make sure your site is set up!
![Page 14: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/14.jpg)
“Webmasters” saved by scripting languages
![Page 15: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/15.jpg)
In comes Drupal!• Founded by Dries Buytaert in
his college dorm, circa 2001.• CMS: Content management
system• Popular: 1 out of every 50
websites• Flexible: From programmable
API to UI tools for modeling data and display
• OSS: Open source software (GPL v 2+)
Photo by Kathleen Murtagh Dries' State of Drupal keynote (CC BY 2.0)
![Page 16: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/16.jpg)
Many great examples
Economist.com, Dev.twitter.com, Whitehouse.gov, The King Center
![Page 17: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/17.jpg)
Assembling pages in DrupalWe’ll look at the individual components that make up a specific page in Drupal
drupal.com/showcases
![Page 18: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/18.jpg)
Content managementMobile friendly administration and responsive themes out of the box
drupal.com/get-started-with-drupal
![Page 19: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/19.jpg)
Content management• Inline editing• Image
management• Flexible and fully
configurable admin.
• Role-based permissions.
![Page 20: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/20.jpg)
Demo: Admin Orientation
Tasks available at: training.acquia.com/drupalready
• Click > paths > start from Admin menu.
• Menu can be docked top or side.
• “Back to site” to see changes.
![Page 21: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/21.jpg)
Task: Get into your site
• Everyone has their site installed?
• If so, try changing your site title.
![Page 22: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/22.jpg)
Lesson 2: Drupal 8 StatusWarning: Under construction!
![Page 23: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/23.jpg)
In Lesson 2• Presentation: Drupal 8 Status Report• Demo: How to find out where Drupal
is in development cycle. • Task: Sign up to Drupal.org.
![Page 24: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/24.jpg)
You are here: API Completion phase
drupal.org/core/release-cycle
![Page 25: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/25.jpg)
What’s next?• More beta
releases!• Release candidate:
Drupal 8.0.0• Future minor
releases will add features: Such as Drupal 8.1.0
Betas Test
RC1 Test
8.0 Ready!
Minor New features
drupal.org/node/2135189
![Page 26: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/26.jpg)
What’s the latest release?
drupal.org/node/3060/release
![Page 27: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/27.jpg)
Task: Get your “d.o” account• Go to Drupal.org• Create an
account• Login!
http://drupal.org
![Page 28: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/28.jpg)
Lesson 3: Thinking like DrupalAssembling pages
![Page 29: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/29.jpg)
In Lesson 3 • Presentation: The page model. • Demo: Create content, add a page,
place in the main menu. • Task: Follow the steps in the demo to
add a page to your site.
![Page 30: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/30.jpg)
Limited by a mental model
“Pages” in physical “folders”
![Page 31: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/31.jpg)
Other CMSs?
This example is Typo3, what is your previous CMS like?
Page added “into” site structure
![Page 32: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/32.jpg)
Drupal holds data
Structured data: referred to as “Content entity” types in D8.
Articles
Users
Basic pages Comments
““
Terms
Blocks
![Page 33: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/33.jpg)
Generated lists of contentdrupal.com/showcases
Shows examples of pages created from lists of content on the fly.
FYI: Built in Drupal 8!
![Page 34: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/34.jpg)
Demo: Add a page
• Add a Basic page.
• Add link to menu.
• Manage menu.
![Page 35: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/35.jpg)
Task: Add a basic page• Add a “Basic page”.• Link from the “Main
menu.”• Challenge: Manage
menu or Add an article.
![Page 36: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/36.jpg)
Review• Adding content• Menu management
decoupled from adding content
Next: Assembling your site in Drupal
Attribution-NoDerivs 2.0 Generic (CC BY-ND 2.0)by JuditKhttp://www.flickr.com/photos/juditk/5879492679/
![Page 37: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/37.jpg)
Lesson 4: The Drupal Magic Trick
![Page 38: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/38.jpg)
In Lesson 4• Presentation: Fields and modeling
data• Demo: Customize a content type,
create content, create a view.• Task: Follow the steps in the demo to
customize a content type.
![Page 39: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/39.jpg)
Structured data: Fields
Compare: Which allows for better input and display control?
In HTML:
Body textTagsLocationMedia (video, images)
Title
Image upload
Title
Location
Tags
Body text
![Page 40: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/40.jpg)
Content types and fields
Content types: Define defaults and add fields (usually)
Generic Content type settings
TitleAuthor
Date publishedComments
Menu optionsRevisions
Article + fields:
ImageBody text
Tags
Tips + fields:
VideoBody text
Tags
Link
![Page 41: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/41.jpg)
Consider your design• Limit your fields to only what you
need to reuse and display.
![Page 42: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/42.jpg)
3 example display options
View modes
![Page 43: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/43.jpg)
Flexibility for different conditions
With Drupal, you can reuse content intelligently.
![Page 44: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/44.jpg)
Demo: Adding an article• Go to Content >
+Add content. • Select article. • Review the form.
Content > + Add content > Article
![Page 45: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/45.jpg)
Structured input and display
![Page 46: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/46.jpg)
Link: a module providing a field type
Manage > Structure > Content types > Article > Manage fields
![Page 47: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/47.jpg)
Demo: Adding a field• Enable Link
module.• Add a new field to
the article content type.
• Test by creating an article.
Extend > Link module
![Page 48: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/48.jpg)
Task: Customize a content typeA. Create an articleB. Enable Link
moduleC. New field on
ArticleD. Test Articles
![Page 49: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/49.jpg)
Review• Structuring data
input. • How else could you
validate?• What other content
would you model for this site?
![Page 50: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/50.jpg)
Add fields to…
Content typesBlocksComment formsContact formsTermsUsers
Any “Content entity types” in Drupal 8
You can create your own drupal.org/node/2166447
![Page 51: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/51.jpg)
Drupal Entities
Entities are one instance of an entity type.
Each has a unique ID.
These are examples of “Content entities” in Drupal.
Examples of content entities in Drupal 8
![Page 52: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/52.jpg)
Block exampleDefault basic block has one body text field. What if you want an image and a link?
With “Block Types” in Drupal 8, you can add fields.
Such as an image or link field.
Add fields to block types
![Page 53: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/53.jpg)
Lesson 5: Building Drupal sitesGet familiar with Drupal lingo
![Page 54: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/54.jpg)
In Lesson 5• Presentation: Displaying content• Demo: What’s available. Options for
data input and display. Creating a view.
• Task: Create a View to list content.
![Page 55: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/55.jpg)
Most sites: Lists of data?• Dynamic lists of
content• Users, members• By terms or
categories• Most
popular/commented Visit http://opensource.com an example Drupal site
![Page 56: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/56.jpg)
Views wizardOnce you select the base table of your query this can’t be changed.
Base table (content, user, terms, etc) cannot be changed later.
![Page 57: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/57.jpg)
How to format & displayWhat to select & filter
Views UI
![Page 58: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/58.jpg)
Demo: List of articles
• Add list of Articles
• Tab in main menu
Structure > Views > + Add new view
![Page 59: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/59.jpg)
Task: Create a list of articles• Add a view• Select options for
Content type > Article.
• Challenge: Change display!
Structure > Views > + Add new view
![Page 60: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/60.jpg)
Review• Use Views to list
content, users, terms, comments, etc.
• Compare to examples you’ve done in other systems/frameworks.
Next: Extending Drupal
![Page 61: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/61.jpg)
Everything is configurable
![Page 62: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/62.jpg)
Change the image styles!
You can change the display and even the image styles, crop, etc.
![Page 63: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/63.jpg)
Review!
![Page 64: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/64.jpg)
How was this built?Inspect the code and body tag for information.
Go have a look!
drupal.com/get-started-with-drupal
![Page 65: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/65.jpg)
Answer?
drupal.com/get-started-with-drupal
![Page 66: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/66.jpg)
How are these components added?
Inspect the elements and look for clues.
![Page 67: Ready. Set. Drupal! An Intro to Drupal 8, Part 1](https://reader036.vdocuments.site/reader036/viewer/2022062514/5592df0c1a28abfa3b8b47f2/html5/thumbnails/67.jpg)
Answer?All are blocks(in red)
Some parts come from Views(in blue)