Transcript Diggin' Drupal Gardens 502: Drupal 7 Content Types This work is licensed under a Creative Commons Attribution-NonCommercialShareAlike 3.0 United States License.

Diggin' Drupal Gardens
502: Drupal 7 Content Types
This work is licensed under a Creative Commons Attribution-NonCommercialShareAlike 3.0 United States License
What We’ll Be Covering…
Getting Started
 Log In and get Lab Materials
Content Types
 Blog Entry
 FAQ
 Poll
 Book
 Gallery Item
Images
 Embed an Image
Video

Embed a Video
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
1
Getting Started: Your Lab Materials
Please use Mozilla Firefox as your browser for this workshop.
Log in to:
http://discoverdrupal.drupalgardens.com
After logging in to the training site, to gather your lab materials for this workshop, do
the following:
1.
Open another tab in your browser
2.
In your new tab, go to http://oregonstate.edu/cws/training
3.
Look in the lower right and click on the Training Materials graphic – this will take you to the
page where all training materials for all CWS Drupal classes are distributed
4.
Scroll down to the 500 series of classes
5.
Locate the 50X Class Title row and click on the Lab link – download the lab to your desktop
6.
Once the zip file is downloaded you will need to extract it. For a PC, right click on the zip file
and select Extract All. For a Mac, simply double-click on the zip file.
7.
You can then move the zip file to your trash
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
Content Types: Overview
In broad terms, a content type is really just a bit data entry form. Different content
types are used for different “categories” of content.
These different categories of content contain their own respective features and
behaviors – as an example:

Blog entry – a web log

Poll – issues a question with a set of possible answers and gets input from audience
Really, it’s just a way to help sort and organize the various types of content that may
be present on a Drupal site. Additionally, many of the default content types are also
accompanied by some additional features that can use the data gathered in the
content type in various ways throughout your site.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3
Content Types: Default Content Types
Our Discover Drupal site in Drupal Gardens, by default, comes with nine different
content types:

Basic page – for static content

Blog entry – for a site-wide or multi-user blog

Book page – for hierarchical content

FAQ item – for a clean question and answer display

Forum topic – for discussion based posts inside of a forum

Gallery – for a flexible media gallery

News item – for time specific content like press releases or announcements

Poll – for voting

Webform – for forms/questionnaires intended for an external audience
Let’s start with a Blog entry…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
4
Content Types: Blog – Overview
A web log, or Blog, is generally viewed as an on-line personal journal. Posts are listed
chronologically and are typically displayed in an aggregated fashion on the front page
of the blog. Usually, when displayed this way, summary text substitutes the full body
content of the post.
Blogs can be used for more than personal journalizing, though. With commentary
enabled, it can be a collaborative space. It can be used a newsletter of sorts for an
organization or as a tool to communicate the progress on something – such as
research.
Drupal has it’s own, built-in blogspace. This can be used either as a single blog, such
as a for an organization, or it can contain multiple users who all have their own blogs.
Let’s experiment with this a bit…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
5
Content Types: Blog – Blog Roll
1
A blog roll is, typically, the front page of a
blogging environment. Drupal has a blog
space contained within the site, so the blog
roll isn’t on the front page, but it is at the
front of the blog section. To get to the blog
roll:
1.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
6
Click on the Blog link in the Main menu
Content Types: Blog – Ex. 01 Create Blog Entry
1
To create a blog entry of your own:
2
1.
2.
3.
4.
5.
Click on the Create new blog entry
link at the top of the blog roll
Title field = enter a title
Body field = paste text from Ex. 01
Tags field = add descriptive words
Click the Publish button
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
7
Content Types: Blog – Ex. 01 Create Blog Entry – Published Entry
Once the blog entry is published, you’ll note
a few things that characterize this particular
type of content:
1
1.
2.
3.
4.
An avatar is displayed with the post
A Tag list is provided at the bottom of the
entry
The AddThis sharing tool is provided
Comments are enabled
4
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
8
Content Types: Blog – Ex. 01 Create Blog Entry – Blog Extras
Now it’s time for some real fun…and where you
can discover, for yourself, the power of a
dynamic website:
1.
2.
3.
Click on Home in the Main menu and check out
the Recent Blog Posts block
Click on Blog in the Main menu and see what’s
happened to the blog roll
Click on someone else’s blog post and comment
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
9
1
2
Content Types: FAQ – Overview
Frequently Asked Questions, or FAQ, are a common element on many websites, but
they’re often poorly executed and end up looking unwieldy and confusing.
Our Discover Drupal site makes use of the FAQ content type, which can be used to
answer a variety of pointed questions.
Drupal Gardens FAQ possess a very nice display method that uses an accordion style,
where the question shows, and then when a user clicks on the question, the answer
drops down.
So let’s visit the FAQ collection of our site and see what it’s all about…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
10
Content Types: FAQ – FAQ Collection
1
To get to the FAQ section of our site:
1.
2.
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
11
Click on the FAQ link in the Main menu
Click on a question to see how it
expands
Content Types: FAQ – Ex. 02 Create FAQ Item
To create a FAQ item:
2
1.
2.
3.
4.
Go to Shortcut bar > Add content
> FAQ item
Question field = enter a question
or paste in a question from the
Ex. 02 lab materials
Answer field = enter an answer or
paste in an answer from the Ex.
02 lab materials
Click the Publish button
1
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
12
Content Types: FAQ – Ex. 02 Create FAQ Item - Published
The published FAQ doesn’t appear all too
special.
To get a good idea of what makes this content
type unique, click on the FAQ link in the Main
menu again and then click on your question.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
13
Content Types: Poll – Overview
The Poll content type allows contributors to create simple, single question opinion
polls.
Poll content is quite flexible. It can be open to participation from the general public
without any need to log in to the site.
Question and answer sets can be revised as needed, which invalidates this module as
a legitimate statistics gathering tool, but it can be used to gauge audience interest and
encourage interaction.
The Poll module, which supplies the Poll content type, also automatically provides a
simple, real-time bar graph after a participant responds, to provide instant poll status
information to the user.
Let’s get in and create a poll now…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
14
Content Types: Poll – Ex. 03 Create a Poll
To create a Poll:
1.
2.
3.
4.
5.
6.
Go to Shortcut bar > Add content >
Poll
Question field = enter a question or
paste in the question from the Ex. 03
lab materials
Tags field = enter some descriptive
words
Choice fields = Enter in at least two
choices – to add more choices click
the Add another choice button
Poll status option = leave as is
Poll duration field = 1 day
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
3
4
5
1
6
15
Content Types: Poll – Ex. 03 Create a Poll – Add to Poll Content Menu
Up to this point, we haven’t had to
create a single menu link – but we’ll
do so for our Poll content. A custom
menu has been created for it:
1
1.
2
2.
3
3.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
16
Go down to the Menu settings tab
and click the Provide a menu link
checkbox
Parent item field = <Poll Content>
Click the Publish button
Content Types: Poll – Ex. 03 Create a Poll – Published
Once your poll is published, the
Poll Content block should appear.
Take your poll and see what it does
– then go take someone else’s poll.
Note that you can cancel your vote,
but you can only have one vote at a
time per poll.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
17
Content Types: Book Page - Overview
The Book page content type is intended for content that has some sort of hierarchy.
As an example, a Book on Learning Drupal 7 may contain something like the following:

Learning Drupal 7

Creating Content

Basic Page Content

Blog Entry Content

Managing Users

Adding Users

Changing Access Levels

Site Optimization

Custom Content Types

Using Views
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
This is the “Top” or Parent page – it should
be something like an overview or
introduction
Items indented directly below the Parent
page are Child pages. These contain
more specific information that details
and/or supports the main topic of the Book
Using Books provides a few other nice features as well,
such as on-the-fly menu development, a pre-built Book
Navigation block, and a printer-friendly feature which
prints up the entire Book in a book-style format
18
Content Types: Book Page – Ex. 04 Create Book Structure – Parent Book Page
To create a Parent Book page, do
the following:
2
1
1.
3
2.
3.
4.
5.
6.
4
5
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
19
Go to Shortcut bar > Add
content > Book page
Title field = enter a title
Body field = paste in Ex. 04a
Click the Book outline tab
Book field = create new book
Click the Publish button
Content Types: Book Page – Ex. 04 Create Book Structure – Parent Book Page - Published
The Book page content type is easy to
distinguish because of the Add child
page and Printer friendly version links
at the bottom of the body area.
Note that we now also have a Book
navigation block.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
20
Content Types: Book Page – Ex. 04 Create Book Structure – Child Book Page – Add Child Page
Now that a Parent Book page has been
established, Child Book pages can be
easily added to it.
To add a Child Book page, just do the
following:
1.
1
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
21
Scroll to the bottom of the Parent
page and click on the Add child page
link
Content Types: Book Page – Ex. 04 Create Book Structure – Child Book Page – Create Child Page
Enter your information into the Child Book
page the same way you did for the Parent:
1.
2.
3.
1
Title field = enter a title
Body field = paste in Ex. 04b
Click the Book outline tab and take a look
inside
2
 The Book and Parent items fields will be auto-filled
4.
5.
Weight field = -15
Click the Publish button
3
4
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
22
Content Types: Book Page – Ex. 04 Create Book Structure – Child Book Page – Published
Note how the navigation builds itself, both in
the Book navigation block as well as the
content footer navigation.
Now let’s make one more child page…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
23
Content Types: Book Page – Ex. 04 Create Book Structure – Child Book Page – Now You Do It
Look to the right sidebar, in the Book
navigation menu, and click on the top
page of your book. Once the page
shows, click on the Add child page link
and enter the following information:
1.
2.
3.
4.
Title field = Managing Users
Body field = paste in Ex. 01c
Weight field = -14
Click the Publish button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
24
Content Types: Book Page – Printer Friendly Version Feature
The Printer friendly version link at
the bottom of a Book page will
provide a preview and print-up of
the Drupal book, as if it were a
book. To use this feature, do the
following:
2
1.
2.
To leave the preview, just click
your browser’s Back button.
1
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
Click on the Printer friendly
version link
Note how every page of the
book shows up in the preview
25
Content Types: Book Page – Book Manager
The Book navigation menu is completely
independent of Drupal’s default menu
structure – but can work with it when
specified. This is actually a good thing,
because it gives the user the ability to
run two menu sets at the same time.
1
2
To easily order books and book pages:
1.
Go to Shortcut bar > Find content >
Books tab
2.
To edit the pages in a book, just click on
the edit order and titles link for the
respective book
3.
To move a page, just grab a mover
handle and drag the page to the desired
location
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3
26
Content Types: Gallery – Overview
Creating media, in this day and age, has become increasingly simple.
With the ability now to record all forms of media on simple, unobtrusive equipment
like a mobile phone, people who may have never had an interest in something such as
photography 20 years ago, might suddenly discover a new hobby they really like.
So, how does a Drupal user handle this media onslaught?
With the Gallery content type, of course.
The Gallery content type provides a simple method to upload categorized images
and/or videos and display them in an attractive gallery.
The Gallery content type is part of the Media Gallery module, a feature-rich module
developed by Acquia, which provides a user with the ability to add media from many
different sources, upload multiple files, and display media in a lightbox.
Let’s take a look at what we can do with a gallery…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
27
Content Types: Gallery – Ex. 05 Create a Gallery
First we need to create a container
for the gallery:
2
1.
3
2.
4
3.
1
4.
5.
5
6.
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
28
Go to Shortcut bar > Add content
> Gallery
Title field = enter a title
Description field = enter a
description
Gallery settings = columns: 4,
rows: 3
Presentation settings = allow
downloading, show media in
lightbox, show title and
description
Click the Publish button
Content Types: Gallery – Ex. 05 Create a Gallery – Add Images
After the node is published, images
need to be uploaded:
1.
2.
Click the Add media link
When the overlay loads, click the
Add files link – this will open a
window to your computer

3.
4.
1
Navigate to your ex-05-images directory
inside of your lab materials – select all
images and click the Open button
2
Tags field = enter descriptive words
Click the Start upload button
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
29
Content Types: Gallery – Ex. 05 Create a Gallery – Published
When published, the gallery appears in
a grid with the dimensions specified in
your original settings.
The variation in the original picture sizes
and orientations can be seen in the
thumbnails – this is a common hurdle
when dealing with size variation in
images.
Hovering on an image will display the
title, which is automatically pulled from
the file name. A mover handle is
presented, as well, to reposition the
image by drag and drop, if desired.
Let’s add some information to our
images.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
30
Content Types: Gallery – Ex. 05 Create a Gallery – Edit Media
To edit media in the gallery:
1.
2.
3.
4.
1
Click the Edit media tab
Description field = add some
descriptive text
License settings field = leave as is
Repeat this process with a few
images
2
Once a few images have been edited,
click the Save button.
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
31
Content Types: Gallery – Ex. 05 Create a Gallery – View Lightbox
Now that we’ve added some extra
information, let’s take a look at the
most fun feature of the gallery:
1
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
1.
32
Click on one of the images that you’ve
added information to
Images: Overview
The Gallery content type does some great things in regards to image handling, but
what if we wanted to embed an image inside of some other node type, like a Book
page or Blog entry?
For this, we’ll learn a little more about the Media module, which we got a hint of
when we worked with our gallery.
Before diving in, there are some things you’ll want to consider when working with
images.
If you’re unfamiliar with the area of digital imagery, you may want to learn some
basics such as cropping and resizing. While much of the image handling can be
automated, there will be times when some images will have to be manually adjusted.
Feel free to take a look at the CWS slideset Web Publishing: Picture This, which can be
found at http://oregonstate.edu/cws/training/view/training-materials.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
33
Images: Ex. 06 Embed Image
Let’s try out a News item node
type:
2
1.
2.
3.
4.
5.
6.
Go to Shortcut bar > Add content
> News item
Title field = enter a title
Input format field = Full HTML
Body field = paste in Ex. 06 text
Tags field = Drupal
Click Publish button to save
progress to date
3
4
1
5
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
34
Images: Ex. 06 Embed Image – Upload Image
1
Now let’s get in and embed an image:
3
1.
2
2.
3.
4.
5.
4
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
35
Click the Edit tab to open your node
in edit mode
Click in the editor field at the
beginning of the first paragraph to
set the cursor
Click the Add media link – this will
open a window to your computer
Browse to your lab materials and
locate the ex-06.jpg file
Click the Upload button
Images: Ex. 06 Embed Image – Edit Image – Add Alternate Text
Let’s add some alt text. This is
really important for our users
who rely on screen readers:
1.
1
Description field = enter
some text that describes
what’s happening in the
picture
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
36
Images: Ex. 06 Embed Image – Edit Image – Resize Image
The Media module has some very
nice little image editing tools tucked
away so nicely that you would almost
miss them.
Our picture is a bit large for the space
we have. Let’s resize it down so it’s
150 pixels wide:
1
1.
2
2.
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3.
37
Click the little center, rectangle icon
underneath the picture.
In the Scale column, enter 150 in
the Width field then click in the
Height field – it will automatically
calculate the correct dimension
Click the Submit button
Images: Ex. 06 Embed Image – Position Image
Let’s move the image down a line:
1.
Click on the image, grab it with your
mouse, and drag it down so that the
cursor is before the second line of
text.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
1
38
Images: Ex. 06 Embed Image – Float Image
2
By default, your image will insert
above the line of text you want to
place it at. We need to apply a
float to it to get the text to wrap:
1.
2.
1
3.
4.
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
4
39
Click the image to select it
Click the Image toolbar button
to open the Image Properties
dialog box
Alignment field = right
Click the OK button
Images: Ex. 06 Embed Image – Preview
Your image positioning might look a little odd, initially. If this is the case, click the
Preview button to reload the page. Click the Save button if you’re satisfied.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
40
Images: Ex. 06 Embed Image – Published
Click on the News link in the
Main menu to see what your
node looks like alongside the
other news items.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
41
Video: Overview
The Media module works with more than images. In fact, it works with video as well.
In addition to being able to upload items into your Drupal site using the Media
module, you can also easily pull in and manage content from services such as YouTube
or Vimeo. This is an invaluable tool given the heavy resource demands that video files
can put on your system.
At this time, styling capabilities for video are limited using the Media module method.
For video embeds the execution works best when using the Gallery content type, but
you can use it in a limited fashion with the WYSIWYG editor.
So, let’s jump over to YouTube and find a video to put on our site.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
42
Video: Ex. 07 Embed a Video – Pick Your Video
1
To pick your video, do the following:
2
1.
3
2.
3.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
43
Open another tab in your browser
and go to YouTube at
http://youtube.com
Do a search in YouTube on a
subject of interest to you
When you find one you like in the
results list, click on the link
Video: Ex. 07 Embed a Video – Copy URL
1
Once you have your video in
front of you, you just need the
URL:
1.
Copy the URL in the address
bar to your clipboard by
selecting it and pressing your
Ctrl + C keys
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
44
Video: Ex. 07 Embed a Video – Edit News Item
Let’s just put the video at the bottom
of our news story
1
1.
2
2.
3.
4.
3
4
5.
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
45
Click the Edit tab to open your
news item in edit mode
Click your cursor at the end of the
last line of text and enter down a
couple of spaces, then click the Add
media link
In the overlay, click the Embed from
URL tab
Paste your YouTube URL into the
URL field
Click the Submit button
Video: Ex. 07 Embed a Video – Add Text
Now let’s just add a little text:
1.
2.
1
Enter a little bit of white space
between the top of your video and the
earlier content
Copy the text from Ex. 07 and paste it
above your video
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
46
Video: Ex. 07 Embed a Video – Final Touches
Now let’s just finish up by resizing
and repositioning:
1
1.
2.
2
Click on your video and then grab
the upper right corner grip with
your mouse – stretch the video
until it’s about 560 pixels wide
Keeping the video selected, click
the Center Align button
If everything looks good for you,
click the Save button.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
47
Video: Ex. 07 Embed a Video – Completed News Item Node
Upon saving, your completed News
item node with a video embed
should look somewhat similar to
what you see at right.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
48
Video: Ex. 07 Embed a Video – Completed News Stream
And, finally, to view the news stream, click on
the News link in the Main menu.
Here you’ll see that your news item has been
trimmed to only show some summary text –
this is normal.
Clicking on the title of your news item will
take you to the full node.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
49
Summary
Things are starting to look pretty good! Throughout the course of this workshop,
we’ve learned the following:

What a content type is

How to use a variety of different content types, and what they do

How to upload and embed a video into a non-Gallery node using the Media module

How to embed a video from a third party service using the Media module
If your main interest is adding and editing content, you should be in pretty good shape
now. Remember, you can use Drupal Gardens from anywhere that you can access the
web.
If you’re going to be an architect or administrator of a Drupal site, you might be
interested in our Developing Site Structures and Engineering Blocks workshops.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
50
Conclusion
This completes our Diggin’ Drupal Gardens tutorial. For additional tutorials please
visit CWS Training at:
http://oregonstate.edu/cws/training/view/training-materials
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
51