Drupal 8 Install Fest

Transcription

1 Drupal 8 Install Fest Saturday February 18th, 2017 SANDcamp WiFi: marina / marina01

2 Drupal 8 Site Building Bootcamp Saturday February 18th, 2017 SANDcamp WiFi: marina / marina01

3

4

5

6 Introductions Douglas C. Hoffman LinkedIn D.O Skype Twitter Doug Rowe

7 What do these three things have in common?

8

9 AGENDA Introductions Drupal 8 basics Project discovery Build website Theming Modules Q&A

10 Drupal 8 Basics

11

12 Technology Stack Drupal Stack Browser

13 Drupal 8 1. Code Drupal Core + Contrib Modules + Custom Modules + Base Theme + Contrib or Custom Theme 2. MySQL Database 3. Files User uploaded files (images, documents, etc)

14 Drupal 7 vs Drupal 8 (and what is Backdrop?) Drupal 7 Drupal 8 Core + Views + CKEditor + Contrib (Core, Views, CKEditor) + Contrib PHPTemplate Engine Symfony & Twig PHP 5.2+, MySQL w/ PDO PHP 5.4+, MySQL Some responsive themes, some not Responsive out of the box Translatable with contrib modules Translatable out of the box Possible with contrib/custom modules In place editor, files, admin views... All config in database + Features YAML files for config in code

15 Drupal File System Modules Sites default/settings.php (YAML) Themes

16 Key concepts Content types - page, blog post, event, testimonial, etc Node - an instance of a content type such as a blog post Taxonomies - a way to categorize content Views (the secret sauce) - display lists of things User roles and permissions - editors, webadmin, etc Blocks - items that can be placed on a page Menus - main menu, footer menu, etc

17 Drupal specific hosting with Pantheon.io GIT source control Automated backups Enterprise devops Team members Dev, Test, Live Multidev environments Free development accounts

18 Drupal 8 Install

19 Install D8

20 Drupal 8 Explore

21 Sandbox

22 Explore: Content

23 Explore: Structure

24 Explore: Appearance (themes)

25 Explore: Block Layout

26 Explore: Extend (modules)

27 Explore: Configuration

28 Explore: People

29 Explore: Reports

30 Discovery and Architecture

31 Discovery and Architecture Discovery Business Case User Stories Content Strategy Site Map Architecture Content Types Taxonomies Wireframes / Page Layouts Comps

32 Craigslist Cyclists Clone Project Statement We need a website for our bike club where members can post their used bike equipment for sale and learn about upcoming events

33 User Stories Anonymous Visitor Club Member Web Editor Web Admin View all content X X X X View any user profile X X X X X X X X X X X Post item for sale Edit any item for sale Post to blog Manage web site X X

34 Architecture Content Types Taxonomies Roles Pages Sale items Blog posts Sale item type Blog post type Anonymous Member Editor Webadmin

35 Architecture - Site Map Home Items For Sale landing page Blog posts landing page Member directory About

36 Wireframes

37 Drupal Build

38 Drupal Build

39 Drupal Build Install Basic build Taxonomies Content types Views User roles and permissions

40 Basic Build

41 Basic Build Build home page with URL /home Configure home page in Site Information Build about page, place in menu Adjust order of Main Navigation menu Create block and place in footer

42 Lab 1a - Build Basic Site Home page Content > + Add Content > Basic Page Title = Home Body = Welcome to our club website URL Path Setting > URL alias = /home Click Save and Publish Configuration > System > Basic site settings Front page > Default front page = /home Click Save configuration About page Content > + Add Content > Basic Page Title = About Body = Read all about our club Menu settings > Provide a menu link > Check URL Path Setting > URL alias = /about Click Save and Publish Structure > Menus > Main Navigation Click Edit menu button Drag About to be after Home Click Save button

43 Home page

44 About Page

45 Lab 1b - Build Basic Site Footer block (static) Structure > Block layout > Custom Block Library tab > +add custom block Set Block description to Club Address Set Body to 123 Balboa Ave, San Diego, CA Click Save button Structure > Block layout Click Place block button by Footer first Click Place block button by Club Address Click Save block button Turn off some blocks Structure > Block layout > Block layout tab Scroll down to Footer Fifth Set Powered by Drupal to --None-- Click the Save blocks button

46 Custom Footer Block

47 Lab 1c - Build Basic Site Enable modules Extend > List tab Search for Toolbar Check Admin Toolbar Click Install button What s different? Extend > List tab Search for Filter Check Module filter Click Install button What s different?

48 Lab 1d - In place edits, new in D8

49 Taxonomies

50

51 Taxonomies Create a taxonomy called Item Category Add terms: Road bike, Mountain bike, Parts... Create a taxonomy called Blog Category Add terms: Group ride, Meeting notice, Member post...

52 Lab 2 - Taxonomies Sale Item Category Structure > Taxonomy > +Add vocabulary Set Name to Sale Item Category Click the Save button Click the +Add term button Set Name to Mountain bike Click the Save button Set Name to Road bike Click the Save button Set Name to Parts Click the Save button Structure > Taxonomy For Sale Item Category click List terms button Reorder terms as necessary Click the Save button Blog Post Category Structure > Taxonomy > +Add vocabulary Set Name to Blog Category Click the Save button Click the +Add term button Set Name to Group ride Click the Save button Set Name to Meeting Click the Save button Set Name to Member Post Click the Save button Structure > Taxonomy For Sale Item Category click List terms button Reorder terms as necessary Click the Save button

53 Taxonomy: Sale Item Type

54 Taxonomy: Blog Category

55 Content Types

56

57 Content Types Create a Sale Item content type with the fields: Title, Body, Hero Image, Price, Item Type Modify Article content type to have the fields: Title, Body, Image, Blog Category

58 Lab 3a - Content Types Sale Item Structure > Content types > +Add content type Set Name to Sale Item Set Description to Member items for sale Click Save and manage fields button Click the +Add field button Set Add a new field to Image Set Label to Hero Image Click Save and continue button Field settings tab Leave all defaults Click Save field settings button Edit tab Check Required field Leave all other as defaults Click Save settings button Sale Item (continued) Click the +Add field button Set Add a new field to Number decimal Set Label to Price Click Save and continue button Field settings tab Leave all defaults Click Save field settings button Edit tab Check Required field Set Prefix to $ Leave all other as defaults Click Save settings button

59 Lab 3a - Content Types Sale Item (continued) Click the +Add field button Set Add a new field to Taxonomy term Set Label to Item type Click Save and continue button Field settings Click Save field settings button Edit Check Required field Under Available Vocabularies check Sale Item Category Leave all other as defaults Click Save settings button Sale Item (continued) Content > + Add content > Sale Item Fill in Title, Body, Hero Image, Alternative text, Price and Item Type Click Save and publish Repeat this step one or two times Click the Content link in the admin menu Set Content type filter to Sale Item Click Filter button Edit one of the pieces of content

60 Content Type: Sale Item

61 Lab 3b - Content Types Sale Item (continued) Structure > Content types For Sale Item click Manage Form Display In the button drop-down for the Item Type field click Select list in the button drop-down Click the Save button Sale Item (continued) Structure > Content types For Sale Item click Manage Display in the button drop-down For Hero Image label select Hidden in the button drop-down For Hero Image click the Gear icon For Image style select Large in the button drop-down Click the Update button Scroll down and click the Save button at the bottom of the form

62 Lab 3b - Content Types Sale Item (continued) Structure > Content types For Sale Item click Manage Form Display In the button drop-down for the Item Type field click Select list in the button drop-down Click the Save button Sale Item (continued) Content > +Add content > Sale Item Fill in Title, Body, Hero Image, Price and Item type fields Click Save and publish button Repeat to add two more articles

63 Manage Form Display

64 Manage Display

65 Lab 3c - Content Types Modify Article content type and make 3 articles

66 Lab 3b - Content Types Blog (aka Article) Structure > Content types For Article click Manage fields option Click + Add field Set Add a new field to Taxonomy term Set Label to Blog category Click Save and continue button Click Save field settings button Set Required field to checked Set Available Vocabularies To Blog Category Click Save settings Blog (aka Article) (continued) Structure > Content types For Article click Manage form display option Set Blog Category to Select list Click Save button Content > +Add content > Article Fill in Title, Body, Image and Blog Category fields Click Save and publish button Repeat to add two more articles

67 Content Type: Article

68 Content Type: Article

69 Views Lists of things

70

71 Craigslist

72 Economist.com

73 Viasat: Slideshow & ticker

74 Markon: Member map

75 Timeline

76 Views = Lists of things Add new view named Sale Items Show content type Sale Items Create as a Page Place in Main Navigation menu Add exposed filter for taxonomy term Sort by Title

77 Lab 4a - Sale items view Sale Items Structure > Views > +Add View View name Sale Items Show Content of type: Sale Item Sorted by: Unsorted Check Create a page Check Create a menu link Set Menu to Main navigation Click Save and edit button Sale Item (continued) To the right of the Filter Criteria section click the Add In the Search box enter term Click the check box for Has taxonomy term Click Add and configure filter criteria Under Vocabulary select Sale Item Category Under Selection type select Dropdown Click Apply and continue Click Expose this filter to visitors Set Label field to Category Click the Apply button Click the Save button Click the Back to site link Click the Sale Items main navigation link

78

79

80 Lab 4b - Blog view Blog Structure > Views > +Add View View name Blog Show Content of type: Article Check Create a page Check Create a menu link Set Menu to Main navigation Click Save and edit button Blog (continued) To the right of the Filter Criteria section click the Add In the Search box enter term Click the check box for Has taxonomy term Click Add and configure filter criteria Under Vocabulary select Blog Category Under Selection type select Dropdown Click Apply and continue Click Expose this filter to visitors Set Label field to Category Click the Apply button Click the Save button Click the Back to site link Click the Blog main navigation link

81 Lab 4b - Views Create a Blog Post view

82 Lab 4c - Devel Devel Extend Search for Devel Check Devel & Devel generate Click Install button Devel (continued) Configuration > Development > Generate content Check Article and Sale Item Click Generate button Content See generated content Click Back to site menu link Click Sale Items tab Click Blog tab

83 Views Extra Credit Create a Members directory page Users are fieldable Grid view Generate users

84 Roles & Permissions

85 User roles & permissions Add roles & permissions for Members and Editors Anonymous Club Visitor Member Web Editor Web Admin View all content X X X X View any user profile X X X X X X X X X X X Post item for sale Edit any item for sale Post to blog Manage web site X X

86 Lab 5 - User roles & permissions Add roles Use existing roles Anonymous = Visitors Authenticated = Members Administrator = Webadmin People > Roles tab > + Add role Set Role name to Editor Click Save People > Roles tab Reorder to be Anonymous Authenticated Editor Administrator Click Save

87 Lab 5 - User roles & permissions Set permissions People > Permission tab User contact forms Article Basic pages Sale items Click the Save permissions button

88

89

90

91 Extras

92 Extras Fill out field helper text for your users and your future self People > Account Settings customizations Structure > Display Modes > View Modes Field formatter modules (YouTube, gmap, juicebox ) Configuration > Content Authoring > Text format + editors Configuration > Media > Image Styles Reports > Log messages + Status report + 403/404 errors Views rewrite field

93 Theming

94 Theming

95 Theme file directory structure

96 ...info.yml

97 Template files

98 Drupal markup

99 Switch Theme To Zircon What went wrong?

100 Modules

101 Modules - Is there a module for that?

102 Modules - Is there a module for that? Admin Toolbar Pathauto Paragraphs Google Analytics Panels Display Suite Capthca / recaptcha Workbench Moderation Rules Honeypot Block Class External Links Feeds Migrate

103 Review

104 Key concepts Content types - page, blog post, event, testimonial, etc Taxonomies - a way to categorize content Views (the secret sauce) - display lists of things User roles and permissions - editors, webadmin, etc Blocks - items that can be placed on a page Menus - main menu, footer menu, etc Theming Modules

105 Q&A SANDcamp.org

106 Q&A

107 Q&A