Drupal Training Series
Discover Drupal 6
Content Types
This work is licensed under a Creative Commons AttributionNonCommercial-ShareAlike 3.0 United States License
What We’ll Be Covering…
Content Types
• Book Page
– Ex. 01 Create Book Structure






Parent Book Page
Child Book Page
Book Navigation Menu
Auto Navigation
View Printer-Friendly Book Content
Organizing Books
• Announcement
– Ex. 02 Create Announcement
• Poll
– Ex. 03 Create Poll
File Manager
• File Management Best Practices
–
–
–
–
–
Ex. 04 Upload a File
Ex. 05 Resize an Image File
Ex. 06 Create an Image Thumbnail
Ex. 07 Delete a File
Ex. 08 File Links
Images
• Image Best Practices
– Ex. 09 Embed an Image
– Ex. 10 Style & Position Images
MediaSpace
• About MediaSpace
– Ex. 11 Embed Video
– Ex. 12 Style Video Embed
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
Getting Started: Log In and Gather Lab Materials
Please use Mozilla Firefox as your browser for this
workshop.
Go to:
http://drupaldev.cws.oregonstate.edu/training/discover-drupal-6
After logging in to the training site, please click on the Content
Types Materials menu link at left. This will take you to the CWS
web training page and the corresponding materials needed for
this workshop.
Download and save the Content Types Materials to your desktop.
Extract the files from the zip file.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3
Content Types: Overview
In broad terms a content type is really just a big 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:
• Announcements – have publishing start and end dates
• Polls – receive simple input from an 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
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
4
Content Types: Overview – Default Content Types
The OSU Drupal 6 installation, by default, comes with six different
content types:
• Announcement
– For content that has a publication start and end date
• Biblio
– For bibliographic content
• Book Page
– For hierarchical content
• Page
– For content that doesn’t change often (a.k.a. “static” content)
• Poll
– Poses a single question and allows for set of possible responses
• Story
– Identical to Page content type – intended for creating and displaying
content such as press releases
Please note that the Album content type is also available but its use is discouraged by CWS.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
5
Content Types: Overview – Page v. Story Content Types
The OSU Drupal 6 Basics tutorial covers the Page content type in
great detail therefore this content type won’t be a focal point for
this workshop (though we will use it a bit later).
Incidentally, the Story content type is a duplicate of the Page
content type. The only difference, in the OSU Drupal 6
installation, is the fact that, by default, the Page type is set to
publish on Save where the Story is set to not publish on Save.
What the Story content type provides is a different node type,
which can be used in combination with more advanced tools to
create more dynamic displays of information – such as regularly
updated human interest stories or press releases.
It is suggested that Page content type be used for static content,
such as an About or Contact Us page, while the Story content type
is used for more engaging material.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
6
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 OSU Drupal may contain
something like the following:
This is the “Top” or Parent Page – it
should be something like an overview or
introduction
• Learning OSU Drupal 6
– Creating Content

Page Content

Announcement Content
– Managing Users

Adding Users

Changing Access Levels
– Site Optimization
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws

Creating CCK Types

Using Views
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
Menu block, and a printer-friendly feature which prints
up the entire Book in a book-style format
7
Content Types: Book Page – Ex. 01 Create Book Structure – Parent Book Page
To create a Parent Book page, do the
following:
2
1
1. In the Administration menu, click on
Create content > Book page
3
Leave blank
2. Enter a title in the Title field
Note: If you use the same title as shown, enter
your initials at the end
3. Leave the Body field blank for the
time being
4. Click on the Input format group to
open it and select the Full HTML
option
5
5. Click on the Book outline group to
open it and select create a new book
from the Book drop down box
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
8
Content Types: Book Page – Ex. 01 Create Book Structure – Parent Book Page – Paste Word Text
Now, open the Ex. 01a lab materials folder
on your desktop:
1. Open the ex-01a.doc file and copy it
2. Paste the text into the Body field
1
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
9
Content Types: Book Page – Ex. 01 Create Book Structure – Parent Book Page – Preview & Save
Save if satisfied with the results
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
10
Content Types: Book Page – Ex. 01 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. Scroll to the bottom of the Parent
page and click on the Add child
page link
1
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
11
Content Types: Book Page – Ex. 01 Create Book Structure – Child Book Page – Add Basic Information
1
Similar to the Parent Book page,
complete all of the information first:
1. Enter a title in the Title field
2
2. Leave the Body field blank for the
time being
3. Click on the Input format group to
open it and select the Full HTML
option
4. Click on the Book outline group and
take a look at it
Note: The Book and Parent item fields will
be auto-filled
3
4
5. Set the Weight field to -15
Note: Using this setting will put this Child
Book page the top of the list of Child pages
for this Book
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
5
12
Leave blank
Content Types: Book Page – Ex. 01 Create Book Structure – Child Book Page – Paste Word Text
From within the lab materials folder
on your desktop:
1. Open the ex-01b.doc file and
copy all text in the file
2. Paste the text into the Body field
1
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
13
Content Types: Book Page – Ex. 01 Create Book Structure – Child Book Page – Preview & Save
Save if satisfied with the results
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
14
Content Types: Book Page – Ex. 01 Create Book Structure – Now You Do It – Add Child Page
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:
Title field = Managing Users
Body field = paste in ex-01c.doc
Input format option = Full HTML
Book outline Weight field = -14
Click the Save button when finished
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
15
Content Types: Book Page – Book Navigation Menu
As you may have noticed, when creating
Book content the Book module will
automatically place the item in its own
Book navigation menu.
Child pages are automatically listed
beneath the parent page.
The Book navigation menu block can be
given another title, or not used at all, if
desired.
You can also still use other menu
options, such as Primary links.
Note: These are features and settings that are
further described in the OSU Drupal 6 Site
Structures and Formatting Blocks workshops
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
16
Content Types: Book Page – Auto Navigation Features
The Book module, which controls all Book features in a Drupal site,
also creates automatic navigation links at the bottom of book
pages. This footer navigation has been turned off for the OSU
Grey and OSU Orange themes, but it is utilized by OSU Confident.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
17
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:
1. Click on the Printer friendly
version link
2. Note how every page of the book
shows up in the preview
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
18
Content Types: Book Page – Books Management – Collection
The Books 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.
To easily order books and book pages, go to
Administration menu > Content
management > Books
If multiple books exist on the site, they will
be shown here. To edit the pages in a book,
just click on the edit order and titles link for
the respective book.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
19
Content Types: Book Page – Books Management – Ordering
Once within a book, re-ordering the
pages is very simple. Just do the
following:
1. Click on the directional
“handle” of the page you want
to move
2. Drag the page up or down to
the desired position
1
To make a page a child of another
page, or to take it out of a hierarchy,
just move the page to the right, to
indent or left, to outdent
3. Click the Save book pages
button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
3
20
Content Types: Announcement
The Announcement content type is intended for content that has a
publishing start and publishing end date.
This means that a contributor can pick a date for Announcement
content to show itself on the site and also pick a date for that
same content to “disappear” from the view. The content is not
removed from the site itself, it merely no longer displays.
The Announcement content type is intended to be used with
either the Announcements: Small List block or the
Announcements: Summaries block for best results.
For the following exercise, we’ll use the Announcements: Small
List block, which has been enabled in advance.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
21
Content Types: Announcement – Ex. 02 Create Announcement
2
1
3
Leave Blank
4
5
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
22
To create an Announcement, do the
following:
1. In the Administration menu, click on
Create Content > Announcement
2. Enter a title in the Title field
3. Leave the Body field blank for the
time being
4. Click on the Input Format group to
open it and select the Full HTML
option
5. Leave today’s date in the
Publication date field and enter
tomorrow’s date in the Expiration
date field
6. Click on the Publishing options group
to open it and uncheck the
Promoted to front page option
Content Types: Announcement – Ex. 02 Create Announcement – Paste Word Text
From within the lab materials folder on
your desktop:
1. Open the ex-02.doc file and copy
all text in the file
2. Paste the text into the Body field
1
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
23
Content Types: Announcement – Ex. 02 Create Announcement – Preview & Save
Save if satisfied with the results.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
24
Content Types: Announcement – Announcements : Small List Block
Note how the Announcements block
now contains the new Announcement
content
Click on the title of your
Announcement to open it and click on
the Edit tab
Change the Published date to
yesterday’s date, the Expiration date
to today’s date and Save the content
to see the Announcement content
type at work.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
25
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, if desired, without any need to log in through
ONID.
Question and answer sets can be revised, as needed.
The Poll module, which creates 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.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
26
Content Types: Poll – Ex. 03 Create Poll – Enter Basic Information
To create a Poll:
1. In the Administration menu,
click on the Create Content >
Poll link
2. Enter a question in the Question
field
3. Enter at least two choices in the
Choice fields – to add additional
Choice fields, click the Add
another choice button
4. Leave the Poll status option at
Active
5. Set the Poll duration field to 1
day
6. Click on the Publishing options
group to open it and uncheck
the Promoted to front page
option
2
1
3
4
6
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
27
Content Types: Poll – Ex. 03 Create Poll – Add Poll to Menu
Up until this point, we haven’t
had to make a menu item for
any content yet. For the poll,
we’ll need to:
1. Scroll down the page to
the Menu settings group
and click to open it
2. Enter a title in the Menu
link title field
3. In the Parent item dropdown box, select the <Poll
Content> menu
4. Leave the Weight field as is
5. Click the Save button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
1
2
3
4
5
28
Content Types: Poll – Ex. 03 Create Poll – Test Your Poll
Test your new Poll by taking it:
1. Select a choice
2. Click the Vote button
3. A results screen will display with a bar
graph
1
2
Now choose one of the other polls in the
Poll Content menu and take it (do a couple
of them)
3
You can cancel your vote by pressing the
Cancel your vote button and you can
retake the poll, but by default, each user
can only have one answer logged at a time
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
29
File Management: Overview – General
In the IT world, there are different “ends” – we, as users, spend
most of our time at what’s known as the “front-end”. We see a
screen and interact with it in some way to achieve some type of
result.
There is also a “back-end”. This could be compared to what’s
under the hood of a car. The “back-end” contains all of the
components that are needed to make an IT system work.
Part of the Drupal back-end includes a fairly substantial file
directory.
Everything that is uploaded into a Drupal site goes into a file
directory.
For sites that become very large, sometimes this can get messy.
It doesn’t have to, though, with a little coordination and
forethought from an Administrator.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
30
File Management: Overview – IMCE File Browser
The OSU Drupal 6 installation uses the IMCE file browser module.
This contributed module was originally developed to work with
the TinyMCE rich-text editor, developed by Moxie Code (which we
also use). The IMCE acronym stands for Images for Moxie Code
Editor.
This browser was originally built to help users easily embed
images into their nodes. Over time it has grown into a fullfledged, multi-feature file browser.
First we’ll talk a bit about some good practices regarding file
maintenance, and then we’ll get in and take a look at some of
these features.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
31
File Management: IMCE File Browser – Basic File System Structure
By default, an OSU Drupal 6 site’s file
browser appears the same way the image at
left appears.
Everything that is uploaded through the File
attachment feature, or the Upload feature
for images goes into the sites/default/files
folder.
For small sites – this structure works fine.
For larger sites, though, a bit more structure
is sometimes needed.
A site’s administrator can add folders.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
32
File Management: IMCE File Browser – The Value of Structure
Some things to think about…
Structured directories make things easier to find which is helpful
in the following cases:
• If updates are required
• To remove obsolete material
• To locate files that you want to link to
Once items are uploaded, if they are linked somewhere and then
moved, the link will be broken and must be reset – structure is
something that needs to be considered and communicated in
advance.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
33
File Management: IMCE File Browser – The Value of Structure – File Naming Conventions
File management on a website is extremely important. Drupal can be used to automate
much of this, but setting it up and being consistent is something that a user must do.
Naming conventions for files should be established and adhered to for the following
reasons:
• Files stack in a logical order
• Easy to scan / read
Disordered Files
A good, general rule of thumb
• All small case
• No spaces (use hyphens or underscores)
Ordered Files
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
34
File Management: IMCE File Browser – Access via User List
Let’s look at the Discover Drupal 6
directory – which has been slightly
modified for this example:
1. In your address bar, copy your
URL to the end of the site’s
root
2. Press your Ctrl and T keys at
the same time to open a new
tab in your browser
3. Type a slash after your site’s
name and the word profile
then hit Enter
4. The User List will appear
5. Locate your username in the
list and click it
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
1
http://drupaldev.cws.oregonstate.edu/training/discover-drupal-6
3
http://drupaldev.cws.oregonstate.edu/training/discover-drupal-6/profile
4
5
35
File Management: IMCE File Browser – User Profile Page
From your User profile page:
1. Click the File browser tab
2. The File browser will display
1
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
36
File Management: IMCE File Browser – Location
You may note that the Discover
Drupal 6 browser has many more
directories than a new, default site
does.
Site administrators are able to
create additional directories. Site
contributors can then upload their
content into specific directories,
which helps to keep the back-end
organized
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
37
File Management: IMCE File Browser – Components – Directories – Expanding/Collapsing
The top level directory that will show in
your file browser is sites/default/files. All
other directories reside within it.
Sometimes, this may be the only directory
that shows – this is because the subdirectories are collapsed into it. To open
any directory just do the following:
1
1. Click on the small plus sign next to the
directory you wish to expand
2. To re-collapse the directories, just
click on the small minus sign next to
the directory you wish to collapse
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
38
File Management: IMCE File Browser – Components – Directories – Active
The state of a directory is either active
or inactive. When a directory is selected
and becomes active, the contents of
that directory display in the right
window.
1. Typically, the <root> directory, also
known as sites/default/files, will be
the default active directory
2. To look at the contents of another
directory just click on the directory
name
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
1
2
39
File Management: IMCE File Browser – Components – Viewer
At the bottom of the file browser is a
viewing screen. When an image file is
selected, the image will preview in its full
size. If the image is large, it will exceed
the dimensions of the viewing pane.
If this happens, scroll bars will appear
that you can use to pan across the large
image.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
40
File Management: IMCE File Browser – Components – Uploader
1
Files can be uploaded directly into the
file browser by doing the following:
1. Click on the Upload link at the top
left of the browser
2
2. The Upload tool will then expand
open.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
41
File Management: IMCE File Browser – Ex. 04 Upload File to Directory
2
To upload a file into a specific directory, do
the following:
1. Click on the directory to upload to – in
this case, click the test directory
2. Click the Upload link at the top of the
browser
3. Click the Browse button, navigate to
the lab materials folder on your
desktop and select the drupal-surf.jpg
file from …lab/ex-04 folder
4. Click the Upload button
5. The file will then upload and display
with a blue highlight in the file list
3
4
1
5
Note: By default, Drupal will not overwrite files. If a file
with the same name already exists, it appends the new
file with a sequential number
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
42
File Management: IMCE File Browser – Ex. 05 Resize Image File
1
2
4
3
Images can be resized within the file
browser by doing the following:
1. Click on the Resize link – this will
display the Resize tool directly beneath
2. Enter a single dimension in pixels –
width is to the left, height is to the
right. The unfilled field will
automatically scale.
3. Check the Create new image box
This is optional, but suggested
4. Click the Resize button
5. If the Create new image box has been
checked, a new image will be created
based on the provided dimensions. If
the box is not checked, the original
image will resize accordingly.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
43
File Management: IMCE File Browser – Ex. 06 Create Image Thumbnail
Thumbnails are preset image dimensions
that you can elect to treat your image
uploads with. Three presets come, by
default, but your administrator can
define additional ones, if needed. To
create thumbnails, do the following:
1. Select an image file from the file list
2
3
1
4
Note: Batch processing can be performed
by selecting multiple files
2. Click on the Thumbnails link
3. Select a Thumbnail size
4. Click the Create thumbnails button
5. The new thumbnail image will
display both in the file list and the
viewer
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
5
44
File Management: IMCE File Browser – Ex. 07 Delete File
2
To delete files, do the following:
1. Select the two new files you’ve created
(the resizing and the thumbnail)
1
2. Click the Delete link
3. A deletion confirmation will appear,
click OK
3
4. The files will disappear
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
Take care when deleting files. If the file
happens to be embedded or linked on any
node in the site and the link has not been
removed or updated, a 404 error/File Not
Found error will occur.
45
File Links
Understanding the file browser is important because this is where
most of the media you display and distribute is stored.
We learned about the File Attachment feature in the Basics
workshop. This feature attaches files to the bottom of your node.
But what if you want the embedded file to appear as a link within
your content area?
This is where you will set a link from your node to a file within
your file browser.
It’s actually quite similar to the links we learned how to set in the
Basics workshop, except the link will be to a file instead of to
another web page.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
46
File Links: Ex. 08 Embed File Link
Let’s add a file link to the Book parent page created
earlier:
1. Find your Book parent page in the Book
navigation menu
2. Click the Edit tab
2
1
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
47
File Links: Ex. 08 Embed File Link – Select Reference
2
1
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
48
Within the Body area:
1. Select the word or phrase you
would like to use as your
reference
2. Click the Insert/Edit Link button
in your toolbar
3. Click the Browse button which is
to the right of the Link URL field
– this will establish a connection
to your file browser
File Links: Ex. 08 Embed File Link – Select File
Once inside the file browser:
1. Locate the pdfs directory and
click on it to make it the active
directory – you may need to
click on the root directory to
expand it
2. Select the drupal-works.pdf file
3. Click the Insert File tab – this
will close the browser and send
the link information to your
Insert/edit link dialog box
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3
2
1
49
File Links: Ex. 08 Embed File Link – Insert Link
From within the Insert/edit link dialog
box:
1. Add some text to the Title
field, if desired – this will
display as a tool tip when the
link is hovered on
2. Click the Insert button
1
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
50
File Links: Ex. 08 Embed File Link – Save File
Save if satisfied with the results.
Click on the link to open the file.
To leave the file preview, just click
the Back button on your browser.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
51
Images: Overview
Finally! The point you’ve probably wanted to be at from the
beginning…
There are some things to consider before we press on, though.
1. If you are unfamiliar with the area of digital imagery, it’s
strongly suggested that, at some point, you at least study
the CWS presentation material Web Publishing: Picture This,
located at:
http://oregonstate.edu/cws/training
2. University Relations and Marketing has an identity standard
that must be maintained regarding the appearance of some
elements of all college and department websites. You can
find more information on this at :
http://oregonstate.edu/urm/brand/web-standards
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
52
Images: Ex. 09 Embed Image – Create Story Content Type
Let’s use a Story content type for this
exercise:
1. In the Administration menu, click
on Create Content > Story
2. Enter a title in the Title field
3. Click on the Menu settings group to
open it
4. Enter a title in the Menu link title
field
5. In the Parent item drop-down box
select the Story Content menu
6. Leave the Weight field at 0
7. Leave the Body field blank for the
time being
8. Click on the Input format group to
open it and select the Full HTML
option
9. Click on the Publishing options
group to open it and check the
Published option
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
3
1
4
5
6
7
Leave Blank
9
8
53
Images: Ex. 09 Embed Image – Paste Word Text
From within the lab materials folder on
your desktop:
1. Open the ex-08.doc file and copy
all text in the file
2. Paste the text into the Body field
1
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
54
Images: Ex. 09 Embed an Image – Save
Save if satisfied with the results.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
55
Images: Ex. 09 Embed Image – Open Insert/Edit Image Tool
3
To open the Insert / Edit image tool:
1. Click on the Edit tab to open the
node in Edit mode
2. Click in the editor field at the
beginning of the first paragraph
to set the cursor
3. Click the Insert/Edit image tool
button to open the Insert/Edit
image dialog box
4. In the Insert/Edit image dialog
box, click the Browse tool
button at the right of the Image
URL field
1
4
2
Place cursor
here
Note: This will take you into your site’s
File Browser
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
56
Images: Ex. 09 Embed Image – Upload Image to File Browser
Next, browse for the image:
1. Click on the test folder to open it
2. Click the Upload link at the top of
the File Browser window
4
2
3
1. Click the Browse button, navigate to
your ex-09 lab materials and select the
drupal-surf.jpg file
2. Click the Upload button in the File
Browser
1
3. The uploaded image will show in
the File Browser
4. Click on the Insert file tab at the
top of the File Browser window
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
57
Images: Ex. 09 Embed Image – Enter Image General Information
In the Insert / Edit image dialog
box General tab:
1. The Image URL field in the
Insert/Edit Image dialog box
will automatically fill with
the correct URL
2. Enter a description in the
Image Description field
1
2
3
This information is needed by
equipment for the vision impaired
3. Fill in the Title field
This information is optional but
suggested as part of search engine
optimization
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
58
Images: Ex. 09 Embed Image – Enter Image Appearance Information
Now, set the appearance:
1. Click the Appearance tab
2. In the Alignment drop-down box,
select Left
3. In the first Dimensions field, enter
400 (units are pixels)
1
2
3
Note how the other field scales according
to the first
4
5
4. In the Vertical space field enter 4
(units are pixels)
5. In the Horizontal space field enter
4 (units are pixels)
6. Click the Insert button
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
59
Images: Ex. 09 Embed an Image – Resize Image on Screen
The image can be resized right from
the screen, if desired:
1. Click on the image to select it.
Square “handles” should appear.
1
2. Click and hold the mouse button
down on a corner of the image
and drag the corner diagonally to
resize the image.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
60
Images: Ex. 09 Embed Image – Preview & Save
Preview the content to view the
final layout.
When working with images and
other embedded objects, you will
become increasingly aware of the
variation between the text editor
and the Preview screen.
You will want to use Preview
regularly to check your layout prior
to saving.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
61
Images: Ex. 10 Image Positioning and Styling – Insert/Edit Image Dialog Box – Add Border
2
1
3
4
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
Borders can be tricky things. Some themes
will actually override border property
settings, disallowing the user to create or
remove borders. The OSU Standard theme
we’re using allows us to make border
changes. To add a border to an image, do
the following:
1. Click on the image
2. Click the Insert/edit image tool button
3. In the Insert/edit image dialog box click
the Appearance tab
4. In the Border field, enter 1
5. Click the Update button
Preview your node. You should see a thin
border around your image.
62
Images: Ex. 10 Image Positioning and Styling – Reposition Image
If you decide you would like to move your
image from one point to another, it’s
simple, just do the following:
1
1. Click on the image
2. Drag it to the new, desired insertion
point and drop it there.
2
It can be difficult to see, but there will be a
cursor and small rectangle visible
3. The image will now anchor in the area
it was dragged to.
Preview your node and inspect the new
image placement.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3
63
Images: Ex. 10 Image Positioning and Styling – Edit CSS Style Tool – Add Padding
The Edit CSS Style tool can also be
used to change style properties.
Let’s use this to add padding to the
image for a snapshot style border:
2
1. Select the image by clicking on it
3
1
2. Click the Edit CSS Style button
3. In the Edit CSS Style dialog click
the Box tab
4
4. In the Padding group add 4 pixels
in the Top fields
5. Click the Update button
Take a few minutes and
experiment with some other style
changes on your image and. When
you’re finished, click the Preview
button.
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
64
Images: Ex. 10 Image Positioning and Styling – Completed
The completed and saved node should now appear a little more
interesting. Let’s add some more to it.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
65
MediaSpace
Video can also be easily embedded into your Drupal node.
Using the embed code provided through third party video portals
such as MediaSpace or YouTube, you can engage your audience at
a totally different level.
We encourage you to visit MediaSpace, a recently launched video
portal administered by OSU’s Digital Media Services and
maintained by Central Web Services.
To learn more about this great tool, you can visit the MediaSpace
Overview Page, browse some MediaSpace FAQ, or take a look at
some great MediaSpace GEM tutorials created by Faculty Support
Services/TAC.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
66
MediaSpace: Ex. 11 Embed MediaSpace Video
Open up the Story node we’ve been
working on to edit it:
1. Enter down a few spaces from the
last paragraph and paste the text
from ex-10.doc into the editor
Enter down a few
times to place the
cursor
2. At the end of your text paste,
enter one extra return to give
some space
1
At the end of your text
paste, enter one extra
return to give some
space.
Now we need to get some video
embed code…
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
67
MediaSpace: Ex. 11 Embed MediaSpace Video – Selecting a Video
To gather embed code from
MediaSpace, do the following:
1. Press the Ctrl and T keys at the
same time to open a new tab in
your browser
2. In the new tab, go to
http://media.oregonstate.edu
3. Explore MediaSpace a little bit and
find a video that you would like to
embed
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
3
68
MediaSpace: Ex. 11 Embed MediaSpace Video – Locate Embed Code
Once you’ve found the video you
want:
1. Click the Get Embed Code
tab located below your
video
2. Copy the embed code by
selecting it and pressing
your Ctrl and C keys
1
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
69
MediaSpace: Ex. 11 Embed MediaSpace Video – Insert Embed Code
2
Return back to the tab with your
Drupal story in it:
1. Place your cursor at the very
end of your text, down one
extra line
2. Click on the HTML Source
Editor button in your toolbar
3. At the bottom of all of the
code in the HTML Source
Editor, paste your embed
code
4. Click the Update button
3
1
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
70
MediaSpace: Ex. 11 Embed MediaSpace Video – Insert Embed Code
The resulting embed job doesn’t
look like much in the WYSIWYG
editor – this is normal.
Preview your node to see the
actual video.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
71
MediaSpace: Ex. 11 Embed MediaSpace Video – Move Player
Let’s move the player up in line with
the text:
1. Click on the player
2. Drag the player up and place it
in front of the first line of newly
pasted text, underneath the
header
Once the player is moved, you’ll see
that the text doesn’t wrap around it.
A float needs to be applied for this to
happen.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
1
2
72
MediaSpace: Ex. 12 Style MediaSpace Video Embed – Apply Right Float and Margin
To float the player to the right of the
text, do the following:
1. Click on the player
2
3
2. Click the Edit CSS Style tool
button
3. In the Edit CSS Style dialog box,
click on the Box tab
4. In the Float field, select right
4
5
1
6
5. In the Margin group, uncheck
the Same for all checkbox
6. In the Left field enter 2 and
choose pixels from its
corresponding drop down box
7
7. Click the Update button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
73
MediaSpace: Ex. 12 Style MediaSpace Video Embed – Preview
On preview, the image now floats to
the right and the text wraps up around
it.
There’s more than can be done to
clean this up, though. For example, the
header for the new text is a bit
cramped.
Take a few minutes to explore some
different style and positioning settings.
When finished, click the Save button.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
74
MediaSpace: Ex. 12 Style MediaSpace Video Embed – Completed
When everything is said and done,
take your player for a test drive by
clicking on the Play button in the
center of the screen.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
75
Summary
Today it became a little bit clearer regarding how rich Drupal is in
regards to variety.
Not only does it allow you to easily embed and adjust various
media types, but it also provides you with a way of organizing the
different types of content your site is capable of presenting –
while offering quite a few different ways of altering and
displaying it in ways that suit your needs.
This is really just the beginning though…Drupal provides the
ability to actually build sophisticated, well-structured websites
versus just simple webpages.
There are several workshops available at both the Intermediate
and Advanced level, where you will actually be the owner of your
own training site whereupon a functioning website will be built.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
76
Conclusion
This completes the OSU Drupal 6 Content Types tutorial. For
additional tutorials, please visit CWS Training at:
http://oregonstate.edu/cws/training
To view and register for all OSU Drupal 6 Workshops, visit the
Professional Development Central Registration site at:
http://oregonstate.edu/cws/register
To submit a Help Ticket or make a Site Request on-line, go to:
http://oregonstate.edu/cws/contact
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
77