BUILD AN EVENT LISTING

Site building step-by-step

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 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!

DiscoveryModels and examples

http://kilkennyevents.ie a wordpress site

kilkennyevents.ie - wordpress site

Two modes

Teaser

Full

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

Off-site links

Title & date

Description

Image

Etkinlik Takvim

etkinliktakvimi.org

Variety of navigation

By category

Month navigation

Todayʼs events

etkinliktakvimi.org

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

A basic content typeStarting out of the box

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

Customizing eventsDefault settings

Structure > Content types > Edit “event”

Hide author by default

Close comments by default

Don’t add to menu

Add a date fieldManage fields

Manage fields

Date module

Friendly reminder

Date settings

Add date field

Date fields in all types

Field only in Event content

Test!

What’s 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 suzettesuzetteflickr.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

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

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: ExtrasStructure > 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 we’re using “Bartik” core theme. This would require making a sub-theme.

• Don’t edit a core theme.

Content editingWho can add events?

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!

Logged in

Not 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 you’re testing with users).

Create listing pageFilter by venue

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

Learn moreWhat’s next?

Training in May-June

training.acquia.com/events

Site building - May & JuneDrupal in a Day Site BuildingLeuven, BelgiumAlexandria, VAVancouver, CanadaPortland, ORCincinnati, OHToronto, CAAmherst, MA, Geneva, SwitzerlandNew York, NYBordeaux, FranceCharlotte, NCWashington, DCDallas, TXParis, FranceMontreal, Canada

Vancouver, CanadaPortland, ORCincinnati, OHLeuven, BelgiumAmherst, MA, Geneva, SwitzerlandNew York, NYSchaumburg, ILBordeaux, FranceCharlotte, NCWashington, DCDallas, TXSan Francisco, CAParis, FranceMontreal, Canada

training.acquia.com/events

j.mp/datesD7Available now

j.mp/fullcalendar-courseMay 17th

Styling

j.mp/calendar-theme

udemy.com/learn-drupal

Site building - May & JuneDrupal in a Day Site BuildingLeuven, BelgiumAlexandria, VAVancouver, CanadaPortland, ORCincinnati, OHToronto, CAAmherst, MA, Geneva, SwitzerlandNew York, NYBordeaux, FranceCharlotte, NCWashington, DCDallas, TXParis, FranceMontreal, Canada

Vancouver, CanadaPortland, ORCincinnati, OHLeuven, BelgiumAmherst, MA, Geneva, SwitzerlandNew York, NYSchaumburg, ILBordeaux, FranceCharlotte, NCWashington, DCDallas, TXSan Francisco, CAParis, FranceMontreal, Canada

training.acquia.com/events

Cast & CreditsWhat modules appeared?

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?