1.
Site building step-by-stepBUILD ANEVENT LISTING

2.
About me• “heather” on Drupal.org• @learningdrupal• @hjames• Manager of Learning Services at Acquia• training.acquia.com - invest in your skills!

3.
Who this is for• New to Drupal?• Want to build an event calendar?• Want to know how to extend Drupal?• Learn site building essentials

4.
What we’ll do• Get inspired looking at examples• Write our specification• Build our event calendar• Review list of modules used• Find out where to learn more!

5.
Models and examplesDiscovery

6.
kilkennyevents.ie - wordpress sitehttp://kilkennyevents.ie a wordpress site

7.
Two modes FullTeaser

8.
Event submission• Anonymous submission• Submitter details• Event details• Image upload

9.
drupalshowcase.com

10.
“Poster view” janepickens.com/coming-attractions

11.
Calendar view janepickens.com/coming-attractions

12.
Full event page Title & dateImage Description Off-site links

13.
Etkinlik Takvim etkinliktakvimi.org

14.
Variety of navigation Month navigation etkinliktakvimi.orgBy category Todayʼs events

15.
Browse by dateimamuseum.org - drupal

16.
Custom themingimamuseum.org - drupal

17.
Filtered list

18.
Event submission

19.
Approval queue

20.
Depends on needs• Frequency of events?• Multiple days?• Images for events?• Who is submitting events?

21.
Specification

22.
Mini calendar

23.
Browse events

24.
Content display• Full page• Teaser mode in Venue listing page• Table showing titles and images

25.
Really local events• Logged in users can submit events• Associate events with a specific venue• Show listing of event “teasers” on one page• Filter by venue• Show mini-calendar in block• Display full event

26.
Starting out of the boxA basic content type

27.
Add content

28.
Structure > Content types > Add content type

29.
Add content

30.
Test!

31.
Published

32.
Event URLManuallyWith PathautoCustom patterns

33.
Pathauto patterns

34.
Other patterns

35.
Improvements• Defaults: No comments, no menu• Add a date field• Add a related venue field

36.
Default settingsCustomizing events

37.
Structure > Content types > Edit “event”

38.
Hide author by default

39.
Close comments by default

40.
Don’t add to menu

41.
Manage fieldsAdd a date field

42.
Manage fields

43.
Date module

44.
Friendly reminder

45.
Date settings

46.
Add date field

47.
Date fields in all types

48.
Field only in Event content

49.
Test!

50.
What’s new?

51.
Improvements• Move date up in form• Pop-up selection

52.
Module: Date Popup

53.
Configure fields

54.
Edit field widget

55.
Test!

56.
Add an image field

57.
Add image field

58.
Default image

59.
Field settings

60.
Arrange in form

61.
Manage display

62.
Teaser settings

63.
Teaser image

64.
Configuration > Media > Image styles

65.
Override > Scale& Crop

66.
Test! Attribution 2.0 Generic (CC BY 2.0) By suzettesuzette flickr.com/photos/suzettesuzette/6864436698/

67.
Current state

68.
Next• Add related links• Add related venue• Is a field required? Why?• OK in unstructured “body” text field?

69.
Add related links field

70.
Link module

71.
Add link field

72.
Default settings

73.
Link field settings

74.
Manage display

75.
Test!

76.
Links are visible

77.
Next• Related venue• Select from limited options• Internal content, not external links• Why Drupal manage? • Renaming venues • Change of URL path • Adding new venue • Removing venues

78.
Add venue

79.
Related venue content type?• Defaults: • No comments. • No adding to main menu. • No author and date info. • Not promoted to front page.• Fields: • Title and body.

80.
Better: Vocabulary• Vocabulary: Venue • Description• Terms: Controlled by administrator• Bonus: RSS feed per venue, easy to navigate.

81.
Structure > Taxonomy > Add

82.
Add terms

83.
Add terms

84.
Terms

85.
Add as a field• Add field• Set global defaults• Set content-type specific defaults• Arrange field• Check display

86.
Term reference field

87.
Field settings Keep other defaults

88.
Arrange field

89.
Manage display

90.
Test!

91.
Teaser: Shows venue

92.
Report: Field list

93.
What’s next?• Who can create events?• Test with bulk creation of content• Create listings • Listing all events • Filter by venue • Sortable table • Mini month in sidebar

94.
Event display

95.
Current layout

96.
Manage display

97.
Default

98.
Display suite

99.
View modes

100.
Current layout

101.
Preview

102.
Change markup options

103.
Hide labels

104.
Labels inline

105.
Preview

106.
Markup mixup

107.
Fences?

108.
Fences?

109.
DS: ExtrasStructure > Display Suite > Extras

110.
Minimal

111.
Override field

112.
Override fieldfield field-label-inline clearfix field-type-taxonomy-term-reference

113.
Preview

114.
Lost classes

115.
Override field

116.
Preview

117.
Cleaner markup

118.
Improvements• Adjust remaining fields - consistent• What classes are needed?• Add CSS to style new markup

119.
Improvements• Add CSS styling to your theme.• In this case we’re using “Bartik” core theme. This would require making a sub-theme.• Don’t edit a core theme.

120.
Who can add events?Content editing

121.
Who can edit events?• All users?• Authenticated users?• Only administrators?• How do people become “authenticated”?

122.
People > Permissions > Role

123.
People > Permissions > “Node”

124.
Account settings

125.
Test!

126.
Login as testuser

127.
Improvement• Link in main menu + Add an event

128.
Structure > Menus

129.
Add a link

130.
Order links

131.
Test! Not logged inLogged in

132.
Improvements• Should items be published automatically?• Should we make an approval queue? • Use Views Bulk Operations• Test with real content editors and REAL content.

133.
Add sample content

134.
Developer moduleConfiguration > Development > Generate content

135.
Generate content in Latin!

136.
Lots of content

137.
Content editing• Make sure a couple of events are in the same month.• Edit some titles so they fit with the content (if you’re testing with users).

138.
Filter by venueCreate listing page

139.
What do we have now?

140.
Views module + Any dependencies

141.
Structure > Views > + Add

142.
Add menu link

143.
Event listing

144.
Views configuration

145.
Add fields

146.
Configure each

147.
Image display

148.
Venue display

149.
Preview

150.
Improvements• Default sort for date• Sortable columns for Venue and date• Image first

151.
Arrange fields

152.
Column sorting

153.
Preview!

154.
Improvement• Add filter to allow user to select one venue• Filter out past events for this listing

155.
Add exposed filter

156.
Expose filter

157.
Preview!

158.
Add date filter

159.
Preview!

160.
Event listing

161.
Calendar page

162.
Date views

163.
Template options

164.
Rename view

165.
Defaults

166.
Preview defaults

167.
Default by month

168.
By week

169.
By day

170.
By year

171.
Customize

172.
Structure > Blocks

173.
Block: Upcoming

174.
View: Event calendar

175.
Preview

176.
Improvements?• “Share this” button. drupal.org/project/sharethis• “Bookmark” option. drupal.org/project/flag

177.
What’s next?Learn more

178.
Training in May-June training.acquia.com/events

179.
Site building - May & JuneDrupal in a Day Site BuildingLeuven, Belgium Vancouver, CanadaAlexandria, VA Portland, ORVancouver, Canada Cincinnati, OHPortland, OR Leuven, BelgiumCincinnati, OH Amherst, MA,Toronto, CA Geneva, SwitzerlandAmherst, MA, New York, NYGeneva, Switzerland Schaumburg, ILNew York, NY Bordeaux, FranceBordeaux, France Charlotte, NCCharlotte, NC Washington, DCWashington, DC Dallas, TXDallas, TX San Francisco, CAParis, France Paris, FranceMontreal, Canada Montreal, Canada training.acquia.com/events

180.
j.mp/datesD7 Available now

181.
j.mp/fullcalendar-course May 17th

182.
Styling j.mp/calendar-theme

183.
udemy.com/learn-drupal

184.
Site building - May & JuneDrupal in a Day Site BuildingLeuven, Belgium Vancouver, CanadaAlexandria, VA Portland, ORVancouver, Canada Cincinnati, OHPortland, OR Leuven, BelgiumCincinnati, OH Amherst, MA,Toronto, CA Geneva, SwitzerlandAmherst, MA, New York, NYGeneva, Switzerland Schaumburg, ILNew York, NY Bordeaux, FranceBordeaux, France Charlotte, NCCharlotte, NC Washington, DCWashington, DC Dallas, TXDallas, TX San Francisco, CAParis, France Paris, FranceMontreal, Canada Montreal, Canada training.acquia.com/events

185.
What modules appeared?Cast & Credits

186.
Date entrydrupal.org/project/date

187.
Related linksdrupal.org/project/link

188.
Filterable event listdrupal.org/project/views

189.
Calendar grid displaydrupal.org/project/calendar

190.
What fields appear wheredrupal.org/project/ds

191.
Markup controldrupal.org/project/fences

192.
Supporting cast• Token• Pathauto - Human friendly URLs• CTools - Magic for Views• Devel - Bulk creation of content for testing

193.
Any questions?