Drupal 7 basic setup and contrib modules for a brochure website


Published on

How to build a bro

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Drupal 7 basic setup and contrib modules for a brochure website

  1. 1. 1Drupal – Content Types, ContribModules – views etcYIPL Dev Team31 October 2011
  2. 2. 2Agenda• Must have Drupal Modules• Recipe Brochure website• Creating and configuring Content types• Using Views to list content
  3. 3. 3Must 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. 4Must have Drupal Modules 2• Node Related– WYSIWYG – Ckeditor– IMCE– WYSIWYG IMCE Bridge– Workbench?• Optional Addon– Context– Features– Views Slideshow (homepage animation)
  5. 5. 5Must have Drupal Modules 2• SEO– Pathauto– Page Title– Nodewords– XML Sitemap– Global Redirect– Google Analytics– Search 404??
  6. 6. 6Module and usage• Information architecture is translated in to contenttypes and links (node reference) between them.• CCK (now fields) and other related modules (like nodereference + related modules) are used.• Views are used to show the content in desired format(query generator)• Other modules like panels are used to give customizeddisplay of views and other things.
  7. 7. 7A recipe brochure website• Information Architecture below:●Static page– Title (required)– Body (required)●News– Title (required)– Body (required)– Image(optional)– Tags/Category (optional)
  8. 8. 8A 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. 9Content 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. 10Basic 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. 11Field Settings• If you needed other fields (which is notneeded now), you can change it frommanage fields tab.
  12. 12. 12Field labels and other settings• If you click “edit” under operation of bodyfield you can change its label and settings.
  13. 13. 13Basic page is fine• Basic page is good and serves its purposeas built in core Drupal.• In Drupal there are two forms for contenttype/node to be displayed:– Teaser– Full Node• So settings for fields can be based ondisplay format.
  14. 14. 14Translating specs to content types• Each new kind of content should be a contenttype.• 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. 15Brochure site rough data model• Below is a rough data model for the site.• Remember things to consider (prev slide)
  16. 16. 16Create News Content Type• Goto Structure>>Content Types>>+ AddContent Type
  17. 17. 17Create News Content Type 2• Name content type news and other things:
  18. 18. 18Create News Content Type 3• Check publishing options
  19. 19. 19Create News Content Type 4• Check display options
  20. 20. 20Create News Content Type 4• Check comment settings
  21. 21. 21Create News Content Type 5• Check Menu Settings• Then click “Save and add fields”• No Menus as “News” dont have any link
  22. 22. 22Create News Content Type 6• Content type created, now add fields.
  23. 23. 23Create News Content Type 7• Add image field for “News Image”.
  24. 24. 24Create News Content Type 8• News photo field settings.
  25. 25. 25Create News Content Type 9• Configure settings for image field.• Decide if image is required to create news.
  26. 26. 26Create News Content Type 10• Configure image size settings
  27. 27. 27Create News Content Type 11• Other image related settings
  28. 28. 28Create News Content Type 12• Choose default files if any “Save settings”• Creating content type with image complete
  29. 29. 29Order of fields (drag and drop)• Fields can be ordered by drag and drop.
  30. 30. 30Manage display fields• Configure how to show fields in teaser anddefault (full node) view
  31. 31. 31Other things to consider• Comments are field-able• Comment fields and display can also beconfigured.• Field type should be select as per the needexample, date of birth will be a date field andGender can be a select box with male andfemale.• Now new content of type news can beadded.
  32. 32. 32Add content changed• News can now be added to the website.
  33. 33. 33Create News content• Other settings same as page/nodesubmission settings.
  34. 34. 34News Created• Remember the dimensions of the imageuploaded.
  35. 35. 35Need of Views• Now this is a list and to list nodes, users etcwe need the views module.• Views module is a query generator and listmaker which shows content in a predefinedformat like table, list etc.• Views can be downloaded fromhttp://drupal.org/project/views , need ctools• From drush: drush dl views; drush en viewsviews_ui (will download ctools as well)
  36. 36. 36Latest 5 news page and block• To create a view go to: Structure>>Views
  37. 37. 37Create a view for News• How to add a new view.
  38. 38. 38Add view for News• Add a new view “latest_news” withfollowing settings:
  39. 39. 39Add view for News 2• Provide a link and create a block
  40. 40. 40Add View for News 3• Full views scary interface ;)• Click save and run from here for now.
  41. 41. 41Now there is new page• There is a menu item in menu for News.
  42. 42. 42Some Views Jargon• Views is a query generation with displayformatting.• Display could be simple HTML list, table (datagrid) 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. 43Configure News block• Goto Blocks (Structure >> Blocks)• Click “Configure” besides “ - View:latest_news then, add title as below:• Then click “Save Block”
  44. 44. 44Place the news block• Place the latest news block on sidebar firstas shown below (and click “Save Blocks”):
  45. 45. 45Latest News block placed• News block is placed at “Sidebar first”
  46. 46. 46Image 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. 47
  48. 48. 48Self 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 viewsfilter to “Search”