How to build a bro

1. 1
Drupal – Content Types, Contrib
Modules – views etc
YIPL Dev Team
31 October 2011

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

3. 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. 4
Must have Drupal Modules 2
• Node Related
– WYSIWYG – Ckeditor
– IMCE
– WYSIWYG IMCE Bridge
– Workbench?
• Optional Addon
– Context
– Features
– Views Slideshow (homepage animation)

5. 5
Must have Drupal Modules 2
• SEO
– Pathauto
– Page Title
– Nodewords
– XML Sitemap
– Global Redirect
– Google Analytics
– Search 404??

6. 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. 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. 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. 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. 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. 11
Field Settings
• If you needed other fields (which is not
needed now), you can change it from
manage fields tab.

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

13. 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. 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. 15
Brochure site rough data model
• Below is a rough data model for the site.
• Remember things to consider (prev slide)

16. 16
Create News Content Type
• Goto Structure>>Content Types>>+ Add
Content Type

17. 17
Create News Content Type 2
• Name content type news and other things:

18. 18
Create News Content Type 3
• Check publishing options

19. 19
Create News Content Type 4
• Check display options

20. 20
Create News Content Type 4
• Check comment settings

21. 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. 22
Create News Content Type 6
• Content type created, now add fields.

23. 23
Create News Content Type 7
• Add image field for “News Image”.

24. 24
Create News Content Type 8
• News photo field settings.

25. 25
Create News Content Type 9
• Configure settings for image field.
• Decide if image is required to create news.

26. 26
Create News Content Type 10
• Configure image size settings

27. 27
Create News Content Type 11
• Other image related settings

28. 28
Create News Content Type 12
• Choose default files if any “Save settings”
• Creating content type with image complete

29. 29
Order of fields (drag and drop)
• Fields can be ordered by drag and drop.

30. 30
Manage display fields
• Configure how to show fields in teaser and
default (full node) view

31. 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. 32
Add content changed
• News can now be added to the website.

33. 33
Create News content
• Other settings same as page/node
submission settings.

34. 34
News Created
• Remember the dimensions of the image
uploaded.

35. 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. 36
Latest 5 news page and block
• To create a view go to: Structure>>Views

37. 37
Create a view for News
• How to add a new view.

38. 38
Add view for News
• Add a new view “latest_news” with
following settings:

39. 39
Add view for News 2
• Provide a link and create a block

40. 40
Add View for News 3
• Full views scary interface ;)
• Click save and run from here for now.

41. 41
Now there is new page
• There is a menu item in menu for News.

42. 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. 43
Configure News block
• Goto Blocks (Structure >> Blocks)
• Click “Configure” besides “ - View:
latest_news then, add title as below:
• Then click “Save Block”

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

45. 45
Latest News block placed
• News block is placed at “Sidebar first”

46. 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. 47

48. 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”