drupal for dummies
DESCRIPTION
Drupal is a CMS to build website. For absolute beginners, the existing documentation can seem overwhelming. This presentation demonstrates Drupal based on 3 websites. The first website uses Drupal in a very simple, standard way. It is used to explain the concepts behind users, nodes and blocks. The second website adds ckk & views and illustrates how to build a photo album with these modules. The third website uses only custom content types combining different views with the pages module. It also uses 100% custom CSS, deviating from the "boxy" look of most drupal sites. The goal of the presentation is to give an insight in how Drupal works and what it can do for you in 20 minutes.TRANSCRIPT
![Page 1: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/1.jpg)
Drupal for dummies
![Page 2: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/2.jpg)
Level 1
![Page 3: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/3.jpg)
Basic Drupal websiteI’ll show you what these things can do:
BlogPagesMenuBlocks
An a little trick: hide admin menu and login
with node, user and taxonomy = basic Drupal lingo
![Page 4: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/4.jpg)
Basic naked Drupal website
(warning: it’s ugly)
![Page 5: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/5.jpg)
![Page 6: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/6.jpg)
Same site, dressed up
(templatemonster.com: 52$)
![Page 7: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/7.jpg)
![Page 8: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/8.jpg)
Let’s look at some elements
(some of these have to be entered during installation. Don’t worry, we can change it later on)
![Page 9: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/9.jpg)
Site logo Site slogan
Site mission (only on 1st page)
Primary menu
![Page 10: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/10.jpg)
This is a «page» in Drupal terminology(I linked it to the second menu item)
This is a list oflatest blog items(I cheated andcalled it «projecthistory»)
![Page 11: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/11.jpg)
I linked a menu item to the «blog»
It links to a page that automaticallyhold short versions of the latest posts
Hey, something that wasn’t on the otherpage? That’s right, I configured this blockto not show on the front page(we’ll get to what a block is in a minute)
![Page 12: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/12.jpg)
This is a blog post. Drupal shows this page when we click the title of the post
I cheated. These recurring elements of myprojects are manually formatted with HTMLwhen entering the content in DrupalIn «level 2» we’ll see how to do this better.
![Page 13: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/13.jpg)
Now see how this was build
(installation not covered, Google=your friend)
![Page 14: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/14.jpg)
Drupal has 3 default menus. Navigation is what you see on the leftPrimary is what we have used here for our website menuIf you need a secondary menu, that’s what the 3rd one is for
Everything in Drupal needs to be confirmed with a save button at the very bottomRemember this, or you *will* cry
You can rearrange stuff in Drupal by drag & drop using this cross
This is the adminsection. Only youshould see this(kodel=my admin user name)
![Page 15: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/15.jpg)
Here we tell Drupal where the menu linkshould go to.
Every piece of content(except blocks) is a node in Drupal.
If you want to link toa blogposta pagea surveya forumcustom content (see «level
3»)
you need to look up the node number inthe admin section under «manage content»
The «node» is an important concept. You’ll understand it better when we define our own node types in «level 2»)
![Page 16: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/16.jpg)
This menu link does not point to a node. It points to a built in page called «blog» The “1” means it is the blog of the first user (by definition, our admin super-user)
We can also create pages that are not nodes ourselves (be patient, wait for «level 2» )
![Page 17: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/17.jpg)
Houston, we got a problem!
Website is finished, but now my users see these ugly things on the left
Navigation menu
User login
![Page 18: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/18.jpg)
Remove the user login bysetting it’s position to «none» in the blocks section of the site construction admin menu
![Page 19: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/19.jpg)
Remove the navigation block by going in the settings of the block and removing the tick from the box for anonymous user
In Drupal, the user that is not logged in = anonymous
![Page 20: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/20.jpg)
Hat tip:
If you can’t login anymore after hiding the login box, browse to
http://yoursite/user
If you’re looking for the admin menuafter hiding that as well, try
http://yoursite/admin
![Page 21: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/21.jpg)
Modules used: almost none
Actually no modules are needed for this site, just FYI so you can google them
![Page 22: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/22.jpg)
Level 2
![Page 23: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/23.jpg)
Play the module gameThis time, we’ll use some modules
CK editor -> text formattingViews CCK -> a whole new worldImagecache -> pictures with an edge
+ learn about users and taxonomyTrick: hide admin menu and login
![Page 24: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/24.jpg)
![Page 25: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/25.jpg)
First, the easy part: users
(you can turn Drupal into Facebook, but we’ll not go that far)
![Page 26: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/26.jpg)
Users can now log in to this site
BTW, here you see the secondary menu in action
![Page 27: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/27.jpg)
Users are posting comments tothe site (on articles, news, pics,items in the shop, announcements)
![Page 28: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/28.jpg)
Users also interact in the built in forum of Drupal(sorry, forgot the screenshot)
About the forum:it works strange – like an engineer thinksYou need to fiddle with the settings to have a flat thread view. And you need a module to disable comments-on-comments.
It’s ain’t pretty, but you can make it better
![Page 29: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/29.jpg)
Some heavy lifting cck+views
(you’ll not get this from this presentation alone. But you’ll understand the concept.)
![Page 30: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/30.jpg)
You can find modules that implement photo albums out of the box.But please, take the effort to learn how to create one yourself with views & cck.It’s much more flexible (you’ll need this) and you’ll learn how views & cck are working.
An album is a termin a taxonomy
This is the taxonomy term descriptionThis is the picture that
has the taxonomy term and has the flag «use as album cover» set
![Page 31: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/31.jpg)
This is a custom block that uses our own defined node type «photo». We use CCK to define this own type.
The block displays the last 10 photos that are not used in the shop, unless the flag «use on front page anyway» is set.
Read the above again. Queries like this are generated by creating a view in the views module.
![Page 32: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/32.jpg)
See these nice frames around the pictures? And did you notice pics are cut out square? And they have a little vignetting in the corners?That’s all done with the nifty Imagecache module.The composite image is generated automatically, no Photoshopping or CSS overlay involved!
(this is just so cool, can’t shut up about it)
![Page 33: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/33.jpg)
Clicking an image in my self-created album pops up this overlay. It’s the Lightbox 2 module showing it’s glory here (it’s fully customizable)
![Page 34: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/34.jpg)
After delivering the website, customer asked if she could showcase the inventory of her store without going to a full blown web shop solution.
I just created a new taxonomy, a new imagecache preset (no fancy frames here) and switched the output of the views module from grid to table, and voila!
This is a good illustration of the flexibility you get when using cck & views
![Page 35: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/35.jpg)
A glimpse at the admin side
(module installation and setting of permissions for users not covered)
![Page 36: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/36.jpg)
This is our own-created CCK node type
These are our custom CCK fields. Note that the «file» field type also needs to be installed as a module
Don’t forget this tab. Here you define which imagecache preset is used to display the fields of your content type
![Page 37: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/37.jpg)
These are all views that I defined, you can browse to their URLThink of views as dynamic pages (potentially using custom content)
Although views can also generate a block as outputinstead of a page
![Page 38: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/38.jpg)
This is the editing GUI of a view. No comment. It’s rubbish.
Define what you want to output here (= sql select)
Choose your node type (=sql from)
Take arguments from the URL(=sql where)
Control the HTML output / paging
![Page 39: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/39.jpg)
Luckily, taxonomy is a lot simpler. My belly dancer adds new categories (sorry, in drupalish: terms) herself
taxonomy name
term name
![Page 40: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/40.jpg)
Here you see that when she uploads content (a picture or a whole folder of pictures) she needs to choose a term
The nifty thing about Drupal is that all your content creation / editing / administration / publication flow works out of the box, also for content types you create yourself. On top of that, you can customize the content entry forms.
![Page 41: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/41.jpg)
Modules used: a few
![Page 42: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/42.jpg)
Level 3
![Page 43: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/43.jpg)
I did it my wayDefine all of your own content types
Don’t use standard content typesDont’t use standard node pagesDon’t use blocks to display content
Define everything in viewsCombine views on a page with pagesFind the HTML hooks for your CSS
Create template based on garland ninesixty fusion
![Page 44: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/44.jpg)
![Page 45: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/45.jpg)
No standard content in sight
(requires good thinking before acting, also called “information architecture”)
![Page 46: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/46.jpg)
Dynamic rotation of content type «quote»
3 fields of content type «curiculum»
3 fields of content type «activity»
![Page 47: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/47.jpg)
4 fields of content type «activity»
List of nodes of content type «project» with category of current activity (1)
![Page 48: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/48.jpg)
A view showing4 fields of content type «project», linked out of previous list (this view displays project 4)
A 2nd view on the same page showinglist of pics with link to this node (not taxonomy based)
![Page 49: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/49.jpg)
4 fields of content type «curiculum»
![Page 50: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/50.jpg)
We only use custom content types
Forgot to delete the default Drupal content types
![Page 51: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/51.jpg)
You see that the form to create/edit content is also split up in the different field types.
Each field contains descriptive text for the user/admin (customer) entering the content
![Page 52: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/52.jpg)
The panels module allows you to output more than 1 view on the same page
If you’re not into CSS, use a pre-formed layout (you can also add blocks to the layout instead of views)
Use this if you hand-craft your CSS
![Page 53: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/53.jpg)
Modules used: quite a lot
![Page 54: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/54.jpg)
Bonus Level
![Page 55: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/55.jpg)
Every view generates it’s own classes and ID’s that you can use in CSS
problem: output code is bloated with classes.solution: create own classes / template engine
Always add your custom css to a custom file. Check the template engine of the base template you use to find out where to put it.
Good base templates: garland, ninesixty or fusion
![Page 56: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/56.jpg)
SummaryBasic Drupal is easy. Make sure you understand
node, user, taxonomydefault content (blog, page, …) and blocksdownload a template and play with the customization
A bit more advancedlearn how custom content types work with CCKlearn how to display them with views (and link to them)use taxonomy to knit things togetherplay with imagecache, just for the fun of it
Loose the newbie hatmake a site without default content types or node display pagesstyle it completely with a custom CSS
![Page 57: Drupal For Dummies](https://reader033.vdocuments.us/reader033/viewer/2022061103/54058ddb8d7f729e768b4d06/html5/thumbnails/57.jpg)
Thank you!
This presentation in380 pages. Nice if youdon’t want to trial anderror as much as I did.
CSS for newbies. Still gotto spend a lot of time with this book before I speak fluently CSS.
Love the series, neverread this book. Hope they don’t mind me using the trademarkin this presentation.