Transcript
Page 1: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

http://training.acquia.com

Ready. Set. Drupal! Part 2

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 2

Take this course!

• In a classroom or

online.

• Teach at events or

your company.

http://training.acquia.com/drupalready

Page 3: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

About me• Heather James

• Manager of Learning Services

• @learningdrupal

training.acquia.com/events

Page 4: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Fun is memorable

Page 5: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

About you!

• What other systems

have you used?

• What do you know

about Drupal already?

What’s in your toolbox?

Page 6: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

What we’ll build…

training.acquia.com/drupalready

Page 7: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Step-by-step

http://training.acquia.com/drupalready

• Presentations

• Demos

• Activities – try

it yourself!

Page 8: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Ready check!

You will need

• A working copy of

Drupal 8 – most recent

Beta.

• Acquia Cloud free site

acquia.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 9: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Task: Drupal 8 – Acquia Cloud

• Go to

acquia.com/drupal-

8

• Choose to try now.

• Configure your site

acquia.com/drupal-8

Page 10: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Develop locally

• Install

Dev Desktop 2

• Connect SSH key

• Clone your site

locally

docs.acquia.com/dev-desktop2/cloud/working

Page 11: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

RecapWhat we covered in Part 1

Page 12: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Drupal 8 status

• 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/core/release-cycle and drupal.org/node/2135189

Page 13: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Generated lists of

content

drupal.com/showcases

Shows examples of pages created

from lists of content on the fly.

FYI: Built in Drupal 8!

Page 14: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Structured input and display

Page 15: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Drupal EntitiesTaxonomy termsUsers

E. WebbGermany

J. BeemanSpain

adventure

city break

sailing

shopping

city break

Comments

dwight

8 Sept

Wow, can't wait to get visit.

joe

8 Sept

Me too!

Content (nodes)

• Pet-friendly holidays for the whole family.

• Drum and dance in Mali.

• Indian adventure on a river boat cruise.

• Mud baths and hot springs of Beppu.

• Hidden Paris by night in the winter.

Blocks

Block title

Block text here. Some information about something.

http://link123.com

Contact forms

Subject

Message text field.

Custom fields as needed.

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 16: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Adding fields to content types

Content types: Define defaults and add fields (usually)

Generic Content type settings

Title

Author

Date published

Comments

Menu options

Revisions

Article + fields:

Image

Body text

Tags

Tips + fields:

Video

Body text

Tags

Link

Page 17: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Adding fields to Blocks

Default 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 18: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

How to format & displayWhat to select & filter

Views for lists of content

Page 19: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Display configuration

With Drupal, you can reuse content intelligently.

Page 20: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Everything is configurable

Page 21: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Change the image styles!

You can change the display and even the image styles, crop, etc.

Page 22: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Lesson 6: Extending DrupalCustomizing your site

Page 23: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Core themes

Bartik: Default theme Stark: Default core markup

Currently under development

Page 24: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Outputting “Classy” markup

Showing output in the Classy base theme

Page 25: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

What is a theme?

Minimum files you need Robust example

Under construction…

Page 26: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Override in your theme

Copy a core template file to your theme, modify it.

Page 27: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Inheritance

page

user

node

page

node

user

node

page

node

Core provides templates.

Themes can opt to override these

templates.

Or not!

Drupal theming is a process of

overriding what is there.

Drupal theming = overriding

Core

Templates

Base

theme

Sub-

theme

Actually

used

Page 28: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

What template is being called?

• Twig debug option

indicates what

template is being

called.

• Offers suggested

templates

Twig Debug explained drupal.org/node/2358785

Page 29: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Twig template syntax<ul>

{% for item in menu %}

<li>

<a href="{{ item.href }}">

{{ item.name }}

</a>

</li>

{% endfor %}

</ul>

{% foo %}

Used for expressions

{{ bar }}

Prints variables

drupal.org/theme-guide/8/twig

Page 30: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Task: Change theme

• Change to Classy

or Stark.

• Inspect markup.

Page 31: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Review

Drupal theming is a system of overriding

Page 32: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Lesson 7: Who is using Drupal?Drupal and the community

Page 33: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

In Lesson 7

• Presentation: Who’s using Drupal

• Demo: How to find contributed projects,

how to use the issue queue.

• Task: Test a contributed module. Learn

more about your local community

Page 34: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Who’s using Drupal?

drupalshowcase.com

Page 35: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

How are they using it?

• In every industry from

large sites to small.

• In-depth case studies

on Drupal.org.

drupal.org/case-studies

Page 36: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Drupal 8 capabilities

drupal.org/drupal-8.0

Page 37: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Developing with Drupal 8

api.drupal.org/api/drupal/8

Page 38: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

What does Drupal 8 run on?

• Built in PHP, HTML, CSS,

JS.

• LAMP stack is most

widely used and tested.

• Other OSs, servers, DBs

possible (in orange)

Details drupal.org/requirements

Drupal

Framework: Symfony

Language: PHP

Server: Apache Database: MySQL

Operating System: Linux

Page 39: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Building with Drupal

Page 40: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Contributed modules

• The majority of your

development will rely

on contributed code.

drupal.org/project/project_module

Page 41: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Reporting issues

• Use the Issue queue

• Search first

• Report issues

drupal.org/node/317

Page 42: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Open Source Software = Community

All photos by Kathleen Murtagh code sprints (CC BY

2.0)

Page 43: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

How big is the community?

Hint: For latest data, check “d.o”

Page 44: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

DrupalCon

• 1500-3000 attendees

– 5 days of learning and

collaboration

– Affordable tickets

– Scholarships!

• Q: Where's the next

DrupalCon?Hint! association.drupal.org/drupalcon

“Trivia night” Photo by Josef Jerabek (CC BY-NC-ND 2.0)

https://www.flickr.com/photos/pepej/15451001565/

Page 45: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Task: Connect locally

• Attend meet-ups

• DrupalCamps (local

conferences)

• Training – Free Global

training days and paid

training.

What is happening next in your area? http://drupical.com

Page 46: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Task: Search for modules

• Search through

contributed

modules.

drupal.org/project/project_module

Page 47: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Review!

Page 48: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

How was this built?

Inspect the code and body tag for

information.

Go have a look!

drupal.com/get-started-with-drupal

Page 49: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Answer?

drupal.com/get-started-with-drupal

Page 50: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

How are these

components added?

Inspect the elements and look for

clues.

Page 51: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Answer?

All are blocks

(in red)

Some parts come from Views

(in blue)

Page 52: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Base theme?

Page 53: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Our training site was built using Bootstrap. You can learn more about

it!

getbootstrap.com And webinar: http://bit.ly/trainingboots

Page 54: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

How is this done?

Page 55: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

http://davidwalsh.name/css-flip

Page 56: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Build in Drupal 7 now

https://docs.acquia.com/articles/usi

ng-drupal-8-features-your-drupal-7-

website

Migrate NOT upgrade to D8 from

D6 or D7

Build in D7 now and be better prepped for D8.

Page 57: Ready. Set. Drupal! An Intro to Drupal 8, Part 2

Next course!

http://training.acquia.com/practical-drupal-8