Drupal 7 basic setup and contrib modules for a brochure website

1

Drupal – Content Types, Contrib Modules – views etc

YIPL Dev Team

31 October 2011

2

Agenda• Must have Drupal Modules• Recipe Brochure website• Creating and configuring Content types • Using Views to list content

3

Must have Drupal Modules

• In Drupal core– Fields (already on)

– Image Styles (images module)

• Absolute Essential– Views

– Panels– Backup and Migrate– Token (for pathauto and others)

4

Must have Drupal Modules 2• Node Related

– WYSIWYG – Ckeditor

– IMCE

– WYSIWYG IMCE Bridge

– Workbench?

• Optional Addon

– Context

– Features

– Views Slideshow (homepage animation)

5

Must have Drupal Modules 2

• SEO– Pathauto

– Page Title– Nodewords– XML Sitemap– Global Redirect– Google Analytics– Search 404??

6

Module and usage• Information architecture is translated in to content

types and links (node reference) between them.

• CCK (now fields) and other related modules (like node reference + related modules) are used.

• Views are used to show the content in desired format (query generator)

• Other modules like panels are used to give customized display of views and other things.

7

A recipe brochure website• Information Architecture below:● Static page

– Title (required)

– Body (required)● News

– Title (required)

– Body (required)

– Image(optional)

– Tags/Category (optional)

8

A recipe brochure website 2• Image Gallery with 2 content types● Gallery (1 gallery contains multiple Images)

• Image– Title (required)

– Image(required)

• Gallery and image linked with node reference (use node reference url)

• Some Views – Latest News, Galleries etc

• User Management and permission granting.

9

Content type for static page

• It is already there in form of “Basic Page”

• Make sure you are logged in (as admin)

• Click “Structure>>Content Types”

• Click “Edit” under “Basic Page”

10

Basic Page settings

• If you want to change title into “Headline” or something you can do it.

• You can change other settings if needed.

11

Field Settings

• If you needed other fields (which is not needed now), you can change it from manage fields tab.

12

Field labels and other settings

• If you click “edit” under operation of body field you can change its label and settings.

13

Basic page is fine

• Basic page is good and serves its purpose as built in core Drupal.

• In Drupal there are two forms for content type/node to be displayed:– Teaser– Full Node

• So settings for fields can be based on display format.

14

Translating specs to content types

• Each new kind of content should be a content type.

• Each new information unit can be a field.

• Fields are sharable. (http://drupal.org/node/311138)

• Some Drupal facts to consider– Each content type is a node type (nid)

– Each content/node is created by one user (uid)

– Content types can be related with node ref

– Media (images etc) are handled by Drupal

15

Brochure site rough data model

• Below is a rough data model for the site.

• Remember things to consider (prev slide)

16

Create News Content Type

• Goto Structure>>Content Types>>+ Add Content Type

17

Create News Content Type 2

• Name content type news and other things:

18

Create News Content Type 3

• Check publishing options

19

Create News Content Type 4

• Check display options

20

Create News Content Type 4

• Check comment settings

21

Create News Content Type 5

• Check Menu Settings

• Then click “Save and add fields”

• No Menus as “News” don't have any link

22

Create News Content Type 6

• Content type created, now add fields.

23

Create News Content Type 7

• Add image field for “News Image”.

24

Create News Content Type 8

• News photo field settings.

25

Create News Content Type 9

• Configure settings for image field.

• Decide if image is required to create news.

26

Create News Content Type 10

• Configure image size settings

27

Create News Content Type 11

• Other image related settings

28

Create News Content Type 12

• Choose default files if any “Save settings”

• Creating content type with image complete

29

Order of fields (drag and drop)

• Fields can be ordered by drag and drop.

30

Manage display fields

• Configure how to show fields in teaser and default (full node) view

31

Other things to consider• Comments are field-able

• Comment fields and display can also be configured.

• Field type should be select as per the need example, date of birth will be a date field and Gender can be a select box with male and female.

• Now new content of type news can be added.

32

Add content changed

• News can now be added to the website.

33

Create News content

• Other settings same as page/node submission settings.

34

News Created

• Remember the dimensions of the image uploaded.

35

Need of Views

• Now this is a list and to list nodes, users etc we need the views module.

• Views module is a query generator and list maker which shows content in a predefined format like table, list etc.

• Views can be downloaded from http://drupal.org/project/views , need ctools

• From drush: drush dl views; drush en views views_ui (will download ctools as well)

36

Latest 5 news page and block

• To create a view go to: Structure>>Views

37

Create a view for News

• How to add a new view.

38

Add view for News

• Add a new view “latest_news” with following settings:

39

Add view for News 2

• Provide a link and create a block

40

Add View for News 3

• Full views scary interface ;)

• Click save and run from here for now.

41

Now there is new page

• There is a menu item in menu for News.

42

Some Views Jargon• Views is a query generation with display

formatting.

• Display could be simple HTML list, table (data grid) or complicated like views slide-show

• Single view can have multiple displays– Attachment – Attached to other view(s)

– Block – Rendered as a block, shown in block region

– Page – Has a URL, may even have a Menu Link

– Feed – RSS feed for feed readers to consume

43

Configure News block

• Goto Blocks (Structure >> Blocks)

• Click “Configure” besides “ - View: latest_news then, add title as below:

• Then click “Save Block”

44

Place the news block

• Place the latest news block on sidebar first as shown below (and click “Save Blocks”):

45

Latest News block placed

• News block is placed at “Sidebar first”

46

Image gallery with content types• Gallery is a content type.

• Picture is another content type.

• One gallery has many pictures.

• One picture can belong to only one gallery.

• 1:m relationship

• How to show this in Drupal?– Node Reference

47

48

Self Study and Practice• Add tags to News

• Image gallery

• Home page with panels

• Events with Date filters (conditions, calender, previous events, future events etc)

• Team page

• RSS feeds with views

• Module assignment: change “Apply” in views filter to “Search”