Site building step-by-step

BUILD AN
EVENT LISTING
 About me
heather on Drupal.org

@learningdrupal
@hjames

Manager of Learning Services at Acquia

training.acquia.com - invest in your skills!
 Who this is for
New to Drupal?
Want to build an event calendar?
Want to know how to extend Drupal?

Learn site building essentials

 What well do
Get inspired looking at examples
Write our specification
Build our event calendar
Review list of modules used
Find out where to learn more!
Models and examples

Discovery
kilkennyevents.ie - wordpress site

http://kilkennyevents.ie a wordpress site

 Two modes
Full

Teaser
 Event submission
Anonymous
submission
Submitter details
Event details
Image upload
drupalshowcase.com
Poster view

janepickens.com/coming-attractions
Calendar view

janepickens.com/coming-attractions
 Full event page

Title & date

Image

Description

Off-site links
Etkinlik Takvim

etkinliktakvimi.org
 Variety of navigation
Month navigation

etkinliktakvimi.org
By category

Todays events
 Browse by date

imamuseum.org - drupal
 Custom theming

imamuseum.org - drupal
Filtered list
Event submission
Approval queue
 Depends on needs
Frequency of events?
Multiple days?
Images for events?
Who is submitting events?
Specification
Mini calendar
Browse events
 Content display
Full page
Teaser mode in
Venue listing page
Table showing titles
and images
 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
Starting out of the box

A basic content type

Add content
Structure > Content types > Add content type
Add content
Test!
Published
 Event URL

Manually

With Pathauto

Custom patterns
Pathauto patterns
Other patterns
 Improvements
Defaults: No comments, no menu
Add a date field
Add a related venue field
Default settings

Customizing events
Structure > Content types > Edit event
Hide author by default
Close comments by default
Dont add to menu
Manage fields

Add a date field

Manage fields
Date module
Friendly reminder
Date settings
Add date field
Date fields in all types
Field only in Event content
Test!
Whats new?
 Improvements
Move date up in form
Pop-up selection
Module: Date Popup
Configure fields
Edit field widget
Test!
Add an image field
Add image field
Default image
Field settings
Arrange in form
Manage display
Teaser settings
Teaser image
Configuration > Media > Image styles
Override > Scale& Crop
Test!

Attribution 2.0 Generic (CC BY 2.0)

By suzettesuzette
flickr.com/photos/suzettesuzette/6864436698/
Current state
 Next
Add related links
Add related venue

Is a field required? Why?

OK in unstructured body text field?
Add related links field
Link module
Add link field
Default settings
Link field settings
Manage display
Test!
Links are visible
 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
Add venue
 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.
 Better: Vocabulary
Vocabulary: Venue
Description
Terms: Controlled by administrator
Bonus: RSS feed per venue, easy to
navigate.
Structure > Taxonomy > Add
Add terms
Add terms
Terms
 Add as a field
Add field
Set global defaults
Set content-type specific defaults
Arrange field
Check display
Term reference field
Field settings

Keep other defaults

Arrange field
Manage display
Test!
Teaser: Shows venue
Report: Field list
 Whats 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
Event display
Current layout
Manage display
Default
Display suite
View modes
Current layout
Preview
Change markup options
Hide labels
Labels inline
Preview
Markup mixup
Fences?
Fences?
 DS: Extras
Structure > Display Suite > Extras
Minimal
Override field
 Override field

field field-label-inline clearfix field-type-taxonomy-term-reference

Preview
Lost classes
Override field
Preview
Cleaner markup
 Improvements
Adjust remaining fields - consistent
What classes are needed?
Add CSS to style new markup
 Improvements
Add CSS styling to your theme.

In this case were using Bartik core theme.

This would require making a sub-theme.
Dont edit a core theme.
Who can add events?

Content editing
 Who can edit events?
All users?
Authenticated users?
Only administrators?

How do people become authenticated?

People > Permissions > Role
People > Permissions > Node
Account settings
Test!
Login as testuser
 Improvement
Link in main menu + Add an event
Structure > Menus
Add a link
Order links
 Test!

Not logged in

Logged in
 Improvements
Should items be published automatically?
Should we make an approval queue?
Use Views Bulk Operations
Test with real content editors and REAL
content.
Add sample content
 Developer module

Configuration > Development > Generate content

Generate content in Latin!
Lots of content
 Content editing
Make sure a couple of events are in the same
month.
Edit some titles so they fit with the content (if
youre testing with users).
Filter by venue

Create listing page

What do we have now?
Views module

+ Any dependencies
Structure > Views > + Add
Add menu link
Event listing
Views configuration
Add fields
Configure each
Image display
Venue display
Preview
 Improvements
Default sort for date
Sortable columns for Venue and date
Image first
Arrange fields
Column sorting
Preview!
 Improvement
Add filter to allow user to select one venue
Filter out past events for this listing
Add exposed filter
Expose filter
Preview!
Add date filter
Preview!
Event listing
Calendar page
Date views
Template options
Rename view
Defaults
Preview defaults
Default by month
By week
By day
By year
Customize
Structure > Blocks
Block: Upcoming
View: Event calendar
Preview
 Improvements?
Share this button.
drupal.org/project/sharethis
Bookmark option.
drupal.org/project/flag
Whats next?

Learn more
Training in May-June

training.acquia.com/events
 Site building - May & June
Drupal in a Day Site Building
Leuven, Belgium Vancouver, Canada
Alexandria, VA Portland, OR
Vancouver, Canada Cincinnati, OH
Portland, OR Leuven, Belgium
Cincinnati, OH Amherst, MA,
Toronto, CA Geneva, Switzerland
Amherst, MA, New York, NY
Geneva, Switzerland Schaumburg, IL
New York, NY Bordeaux, France
Bordeaux, France Charlotte, NC
Charlotte, NC Washington, DC
Washington, DC Dallas, TX
Dallas, TX San Francisco, CA
Paris, France Paris, France
Montreal, Canada Montreal, Canada

training.acquia.com/events
j.mp/datesD7
Available now
j.mp/fullcalendar-course
May 17th
Styling
j.mp/calendar-theme
udemy.com/learn-drupal
 Site building - May & June
Drupal in a Day Site Building
Leuven, Belgium Vancouver, Canada
Alexandria, VA Portland, OR
Vancouver, Canada Cincinnati, OH
Portland, OR Leuven, Belgium
Cincinnati, OH Amherst, MA,
Toronto, CA Geneva, Switzerland
Amherst, MA, New York, NY
Geneva, Switzerland Schaumburg, IL
New York, NY Bordeaux, France
Bordeaux, France Charlotte, NC
Charlotte, NC Washington, DC
Washington, DC Dallas, TX
Dallas, TX San Francisco, CA
Paris, France Paris, France
Montreal, Canada Montreal, Canada

training.acquia.com/events
What modules appeared?

Cast & Credits

 Date entry

drupal.org/project/date
 Related links

drupal.org/project/link
 Filterable event list

drupal.org/project/views
 Calendar grid display

drupal.org/project/calendar
 What fields appear where

drupal.org/project/ds
 Markup control

drupal.org/project/fences
 Supporting cast
Token
Pathauto - Human friendly URLs
CTools - Magic for Views
Devel - Bulk creation of content for testing
Any questions?