Drupal Training Series
Discover Drupal 6
102: 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 Content Type
– Ex. 01 Create Book Structure






Parent Book Page
Child Book Page
Book Navigation Menu
Auto Navigation
View Printer-Friendly Book Content
Organizing Books
• Announcement Content Type
– Ex. 02 Create Announcement
• Poll Content Type
– 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
Video
• About MediaSpace
• Video Content Type
– Ex. 11 Create Video Content
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 Training
Materials menu link at right. This will take you to CWS Training
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.
• Feed
–
For use with OSU RSS feeds.
• 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.
• Video
– Used for video content from third party providers
• Webform
–
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
Identical to Page content type – intended for creating and displaying content such as
press releases.
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 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
3
1. In the Admin menu, click on Content
management > Create content > Book
page.
Leave blank
2. Title field = enter a title
Note: If you use the same title as shown, enter
your initials at the end.
4
3. Body field = leave blank
6
7
4. Click on the Input format fieldset to open it
5. Input format option = Full HTML
6. Click on the Book outline group to open it
5
7. Book field = create a new book
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 d06-content-types lab
materials folder on your desktop:
1
1. Copy the Ex. 01a section from it.
2. Paste the text into the Body field.
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:
2
1. Title field = enter a title
3
2. Body field = leave blank
3. Click on the Input format group to open
it
Input format option = Full HTML
4. Click on the Book outline group and take
a look at it.
The Book and Parent item fields will be
auto-filled.
4
5. Weight field = -15
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 your lab document on your desktop:
1. Copy the Ex. 01b section of your lab document and
paste the text into the Body field.
1
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 section Ex. 01c
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 Engineering 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 can be toggled on and off in the OSU
Standard theme.
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:
2
1. Click on the Printer friendly version
link.
2. Note how every page of the book
shows up in the preview.
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 – List
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 Admin 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
nodes is very simple. Just do the
following:
1
1. Click on the directional “handle” of
the page you want to move.
2. Drag the page up or down to the
desired position.
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
To create an Announcement, do the
following:
2
1
3
Leave Blank
4
5
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
22
1. Go to Admin menu > Content
management > 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. Copy the Ex. 02 section of your lab materials doc and
paste the text into the Body field.
1
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:
2
1. Go to Admin menu > Content
management > 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.
3
1
6
4
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
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 drop-down
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
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, if available).
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 <root> 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.
OSU Drupal 6 includes a small module
called Filefield Paths, which will
automatically perform the following
file cleansing tasks:
Disordered Files
• Removes all illegal and non-UTF
characters.
• Forces all characters to lowercase.
• Replaces spaces with underscores.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
Ordered Files
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. Click into your address bar.
2. Press your Alt and Enter keys
(Option and Return keys for Mac)
at the same time to open a new
tab with the same URL in your
browser.
3. Type a slash after your site’s root
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
1. Click the File browser tab.
2. The File browser will display.
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 the <root> directory.
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
2. To re-collapse the directories, just click on
the small minus sign next to the directory
you wish to collapse.
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
1. Typically, the <root> directory 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
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 – Ex. 04 Upload File to Directory
2
To upload a file into a specific directory, do
the following:
3
4
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.
4. Click the Upload button.
5. The file will then upload and display with a
blue highlight in the file list.
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
41
File Management: IMCE File Browser – Ex. 05 Resize Image File
1
2
4
Images can be resized within the file
browser by doing the following:
3
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 if you click in it.
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
42
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:
2
3
1
4
1. Select an image file from the file list.
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.
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
43
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
3. A deletion confirmation will appear, click
OK.
4. The files will disappear.
4
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.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
44
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‘ll 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
45
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
46
File Links: Ex. 08 Embed File Link – Select Reference
2
Within the Body area:
1
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
47
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:
3
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
2
1
48
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
49
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
50
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/brand
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
51
Images: Ex. 09 Embed Image – Create Story Content Type
Let’s use a Story content type for this
exercise:
2
1. Go to Admin menu > Content
management > Create Content >
Story.
2. Title field = enter a title
3. Menu settings group = click to open
4. Menu link title field = enter a title
5. Parent item field = <Story Content>
6. Weight field = 0
7. Body field = leave blank
8. Input format option = Full HTML
9. Publishing options group = Published
3
1
4
5
6
7
Leave Blank
9
8
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
52
Images: Ex. 09 Embed Image – Paste Word Text
From within the lab materials folder on your desktop:
1. Copy the Ex. 09 section of your lab materials document
and paste the text into the Body field.
1
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
53
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
54
Images: Ex. 09 Embed Image – Open Insert/Edit Image Tool
3
To open the Insert / Edit image tool:
1
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.
4
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.
2
Place cursor
here
This will take you into your site’s File
Browser
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
55
Images: Ex. 09 Embed Image – Upload Image to File Browser
Next, browse for the image:
2
4
1. Click on the test folder to open it.
2. Click the Upload link at the top of the
File Browser window.
1. Click the Browse button, navigate to
your lab materials and select the
drupal-surf.jpg file.
2. Click the Upload button in the File
Browser.
1
3
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
56
Images: Ex. 09 Embed Image – Enter Image General Information
In the Insert / Edit image dialog
box General tab:
1
2
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.
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
57
Images: Ex. 09 Embed Image – Enter Image Appearance Information
Now, set the appearance:
1
1. Click the Appearance tab
2. Alignment field = Left
3. First Dimensions field = 400
2
3
Note how the other field scales according
to the first
4
4. Horizontal space field = 4
This sets the margin on the side of the
picture, which keeps text from running
into the image edge
5. Click the Insert button.
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
58
Images: Ex. 09 Embed an Image – Resize Image on Screen
The image can be resized right from
the screen, if desired:
1
1. Click on the image to select it. Square
“handles” should appear.
2. Click and hold the mouse button
down on a corner of the image and
drag the corner diagonally to resize
the image.
2
Note: Resizing the display of the image in this
manner will not change the file size of the image.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
59
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
60
Images: Ex. 10 Image Positioning and Styling – Insert/Edit Image Dialog Box – Add Border
2
1
3
4
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.
5
Preview your node. You should see a thin
border around your image.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
61
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
2
1. Click on the image.
2. Drag it to the new, desired insertion point
and drop it there.
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.
3
Preview your node and inspect the new
image placement.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
62
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.
2. Click the Edit CSS Style button.
3
1
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.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
5
63
Images: Ex. 10 Image Positioning and Styling – Result to Date
The completed and saved node should now appear a little more
interesting – but there seems to be a problem. The image is
overhanging the white background.
To fix this we need to add what’s called a “clear” property, to clear
out our left float.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
64
Images: Ex. 10 Image Positioning and Styling – Edit CSS Style Tool – Clear a Float
The Edit CSS Style tool can be used to
add a clear:
1. Click after your last paragraph of
text and press the enter key to go
down a line, then hit your spacebar
a few times.
2
1
2. Select the image by clicking on it.
3
3. Click the Edit CSS Style button.
4. In the Edit CSS Style dialog click the
Box tab.
4
5. In the Clear field select Left if the
picture floats to the left – choose
Right if the picture floats to the
right.
6. Click the Update button.
5
Once you’ve updated your picture,
click Save.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
65
Images: Ex. 10 Image Positioning and Styling – Completed
Your mat should now fully extend down beyond your image.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
66
Video
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…with very little effort needed on your
part.
Our OSU Drupal 6 installation contains a special feature known as
the Video Carousel with Lightbox feature. Adding video content is
now a simple, four-step process. Let’s take a look at how it’s done.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
67
Video: Ex. 11 Create Video Carousel Content – Get Embed Code from MediaSpace
Let’s start by visiting MediaSpace
and choosing a video:
1
1. Open another tab in your browser
and go to
http://media.oregonstate.edu
2. Once you’ve located a video of
interest, look at the tabs beneath
the video – click on the Share tab
3. Click into the Link to Media Page
field and press Ctrl + C to copy the
embed code from this field
2
3
Now we need to make some video
content in our Drupal site…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
68
Video: Ex. 11 Create Video Carousel Content – Add a New Video Node
To create your video node,
return back to the Drupal
site and do the following:
1. Go to Admin menu >
Content management >
Create Content > Video
2. Title field = enter title
3. Video field = paste in code
4. Body field = leave blank
5. Click the Save button
Now let’s take a look at
what happened.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
3
4
1
5
69
Video: Ex. 11 Create Video Carousel Content – Completed Video Node
Once the node saves, the video and audio will
both play.
The node, itself, is clean looking but nothing
extraordinary. Take a look at the bottom of the
page, though, at the carousel block that appears.
But there’s an extra surprise in this feature…click
on the little video thumbnail in the carousel.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
70
Video: Ex. 11 Create Video Carousel Content – Completed Video Node
Clicking on the video thumbnail will
open up a lightbox viewer of the
video.
You can control the video through
the lightbox, as needed, or close it
out by clicking on the X in the upper
right hand corner.
But, this isn’t all you get from this
feature…take a look at the front
page.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
71
Video: Ex. 11 Create Video Carousel Content – Front Page
Note the appearance of the video
carousel block on the front page.
The block on the front page is a 3column block while the block on all
other pages is a 4-column one. There
is also a 1-column and 2-column
option that currently is not active.
Now, for the remainder of our time,
add a few additional videos and pay
attention to how changes occur in
the rest of the site.
This is what being dynamic is all
about.
Keep in mind that these blocks have been preconfigured. If you’re interested in learning how
to work with blocks, come visit the Engineering
Blocks workshop.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
72
Video: Ex. 11 Create Video Carousel Content – Completed Addition of Video Content
Front Page with Full 3-Column Carousel
beneath content area
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
Secondary Page with Full 4-Column
Carousel above footer
73
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
74
Conclusion
This completes the OSU Drupal 6 Content Types tutorial. For
additional tutorials, please visit CWS Training at:
http://oregonstate.edu/cws/training/view/training-materials
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
75