Drupal Training Series
BASIC
v. 1.1
Provided by University Communications & Marketing
Web Publisher: 910-521-6820
http://uncp.edu/UCM
What is Drupal?
Drupal is the Content Management System
(CMS) used for the UNCP website.
A CMS is a computer program used to run a
complex website. It allows an organization to
streamline creating, editing, organizing, and
publishing content.
The big three are Drupal, Wordpress, and
Joomla.
Provided by University Communications & Marketing
Web Publisher: 910-521-6820
http://uncp.edu/UCM
The Drupal Framework
Drupal makes running a large website easier by
breaking all the elements down into smaller
more manageable chunks.
Unlike the early days of the web, Design and
Content are now completely separate. Once
the templates for the look and feel are built, all
we have to do is fill in that framework with
content.
Provided by University Communications & Marketing
Web Publisher: 910-521-6820
http://uncp.edu/UCM
The Drupal Framework
Back in those early days, we could control a
website’s look down to the pixel. Designers would
pick a common monitor resolution like 1024x768
and build a site with that shape in mind.
Now they design for flexibility using something
called Responsive Design. People will view your
site using computers, laptops, tablets, and cell
phones. The layout automatically adapts to the
device. It’s a tradeoff. You lose a little creativity,
but you only have to code one version of your site
for everyone.
Provided by University Communications & Marketing
Web Publisher: 910-521-6820
http://uncp.edu/UCM
The Drupal Framework
Something else we need to keep in mind is
Accessibility. It is essential that the Web be
accessible in order to provide equal access and
equal opportunity to people with diverse abilities.
Examples:
• Alternative text for all images to accommodate
screen reader programs that read pages aloud.
• Our YouTube videos use closed captioning for
the hearing impaired.
Provided by University Communications & Marketing
Web Publisher: 910-521-6820
http://uncp.edu/UCM
Website Information Coordinators
That’s still a LOT of content to handle on a site
the size of ours, so that’s where Website
Information Coordinators (WICs) come in.
Each department has a primary WIC*
responsible for their section of the site.
* You can also assign secondary WICs
Provided by University Communications & Marketing
Web Publisher: 910-521-6820
http://uncp.edu/UCM
Website Information Coordinators
Everyone in the department/program is
responsible for ensuring site content is
updated on a regular basis.
While the WICs make the updates, everyone in
the department/program should review the
site at least once per semester.
Provided by University Communications & Marketing
Web Publisher: 910-521-6820
http://uncp.edu/UCM
Logging In
• To edit your website, login with any web
browser
– On Campus: www.uncp.edu/user
– Off Campus: https://www.uncp.edu/user
• Note the “s” in https for secure
– If kicked out, change the URL to https://
Provided by University Communications & Marketing
Web Publisher: 910-521-6820
http://uncp.edu/UCM
Logging In
• The Username/Password is the same as your
UNCP network account
Logging In
• Look for the black Drupal Admin Toolbar across top of
page with the menu items My Workbench, Content,
Structure, Configuration, and Help. If not present, press
F5 on keyboard or browser’s refresh button.
How do I get to a page?
You have 3 options on how you can get to the
page you want to edit.
1. Click Menu on the left and click through the
links until you reach the page.
2. Click Quick Links and click through the links
until you reach the page.
3. Use the Search box.
How do I get to a page?
There are three things to immediately look for
that will tip you off that you’re in editing mode.
1. The URL bar up top shows https://
2. The Drupal Admin bar is visible
3. Across the top of the middle of the page
where the content starts, you will see a
number of tabs: View Published, New Draft,
Moderate, Webform, and Results
Let’s go to the next slide and see what that
actually looks like.
How do I get to a page?
Wait… I lost my Admin Bar
Sometimes Drupal will flake out if you do a
search to get to a page and your Admin Bar
will disappear. Don’t panic.
To bring it back, just go up to the URL bar and
change the beginning of the URL from http://
to https:// to get back into editing mode.
Provided by University Communications & Marketing
Web Publisher: 910-521-6820
http://uncp.edu/UCM
How do I edit a page?
• To edit a page, click the New Draft tab.
The Editing Screen
The Editing Screen
Let’s look at this piece by piece.
• At the very top, in the URL bar, you see the
word node and a number
• In Drupal, all of your content is contained in
a node
• Think of a node as a big box to put all the
information for that page into
• Drupal puts a number on the box so it can
remember where it put it later
The Editing Screen
• When I go to the super long URL:
www.uncp.edu/aboutuncp/administration/departments/university
-communicationsmarketing/departments/web, Drupal knows
to go find box 15585 and show me what’s in
there
• Node numbers are often useful for finding
pages you’ve lost.
The Editing Screen
Title: Enter or modify the page title
Body: Modify content in the body (center
column) of the page
The Editing Screen
• The editing interface is a WYSIWYG (What You See Is What
You Get)
• It works like Microsoft Word
• From Left to Right the buttons are: Bold, Italic, Underline,
Align Left, Align Center, Align Right, Bulleted List,
Numbered List, Decrease Indent, Increase Indent, Undo,
Redo, Insert/Edit Link, Unlink, Insert/Edit Anchor,
Insert/Edit Image, Format, Block Quote, Insert Horizontal
Line, Remove Formatting, Paste from Word, Insert/Edit
Table, Table Row Properties, Table Cell Properties, Insert
Row Before, Insert Row After, Delete Row, Insert Column
Before, Insert Column After, Delete Column, Split Merged
Table Cells, Merge Table Cells, Embedded Media, Linkit,
and Toggle Spell Checker.
The Editing Screen
• That’s a lot of buttons, but most of them do
exactly what you think they do
• To enable Spell Checker, click the last button on
the toolbar
• Note: the Spell Checker button does not appear in
Internet Explorer
• When editing content, click in the Body box and
start typing
• For a Paragraph Break (double space): press enter
• For a Line Break (single space): press shift + enter
Paste From Word
1. When copying and pasting
from Word or a webpage,
copy the text
2. Click the Paste from Word
button
3. Paste the content into the
Paste from Word window
4. Click Insert
5. This removes unnecessary
and often invisible extra
code that tries to tag
along
The Editing Screen
• Creating Section Headings
– Three section headings are available:
H2 > H3 > H4
– Tip: use headings and short paragraphs of
content to allow readers to scan page
– Also only use headings for section headings
• Creating Links
– There are a handful of different types of links we
can create in Drupal
Link to an External site or page
1. Highlight the text you
want to create a link with
2. Click the Insert/Edit Link
button in the toolbar
3. In the Link URL field, paste
or type the URL
4. Set Target to Open Link in
a New Window
5. Click Insert
6. The text is now linked and
blue
Link to an UNCP page
There are three ways you can
do this:
1. Highlight text
2. Click the Linkit button in the
toolbar
3. In the Search for content
field, type the name of the
page you’re linking to
4. Select the page from the
Content-Basic Page list
5. The Link URL will fill in the
node and number for you
6. Click Insert
Link to an UNCP page
The second way:
1. Highlight the text you
want to create a link with
2. Click the Insert/Edit Link
button in the toolbar
3. In the Link URL field, type
the page’s node # in the
format /node/15484
4. Click Insert
Link to an UNCP page
The third way:
1. Highlight text
2. Click the Insert/Edit Link button
in the toolbar
3. In the Link URL field, copy and
paste the path of the web page
excluding “www.uncp.edu”
4. For example, linking to
Undergraduate Admissions, you
would paste in:
/admissions-aid/undergraduateadmissions
5. Click Insert
Create an Email Link
1. Highlight text
2. Click the Insert/Edit Link
button in the toolbar
3. In the Link URL field,
without any spaces, type
mailto:web@uncp.edu
(replace with the email
address you want to use)
4. Click Insert
Link to/Upload a document
1. Highlight text
2. Click the Insert/Edit Link
button in the toolbar
3. Click the Browse button
to the right of Link URL
Link to/Upload a document
4. In the File Browser window, click
Images_Docs (1)
5. Navigate to the desired folder
6. Please upload the file(s) to the correct folder
7. Click the Upload button (2)
Link to/Upload a document
8. Click Add Files (3) to
add the file you
wish to upload
9. Once the file has
been selected, click
Open
10.Click Upload (4)
11.You be notified
once the file has
been uploaded
12.Click the small black
X in the upper right
corner
Link to/Upload a document
13.Back in the File Browser window, select the
file you wish to link
14.Click Insert File (4)
15.This takes you back to the Insert/Edit Link
window where you click Insert
Link to a previously uploaded file
1.
2.
3.
4.
5.
6.
7.
8.
9.
Highlight text
Click the Insert/Edit Link button
Click the Browse button
In the File Browser window, click
Images_Docs
Navigate to the desired folder
Click the file you want to link
Click Insert File
This takes you back to the Insert/Edit window
Click Insert
Rename or Delete a file
1.
2.
3.
4.
5.
6.
7.
Click on the link
Click the Insert/Edit Link button
Click the Browse button
Navigate to the file
Click on it
Press the Delete or Rename button
If you rename a file, click on the file and
choose relink text
Tip: delete old/unused files from the server
Remove a Link
1. Highlight the link
2. Click the Unlink button in the toolbar
Subdirectories
• Creating subdirectories is
a great way to organize
your files
• Example: Under the Jones
Center there is a folder
for documents and one
for photos
• You can create a
subdirectory when
uploading a file
Creating a Subdirectory
1.
2.
3.
4.
5.
6.
7.
8.
Highlight text
Click the Insert/Edit Link button
Click the Browse button
In the File Browser, click Images_Docs
Navigate to your directory
Click the Directory button
Type in the name using underscores for any spaces
Click Add
Renaming a Subdirectory
1. Click on the directory you want to rename
2. Click the Rename button across the top of
the window
3. Type in the new name
4. Click the Rename button to the right
Deleting a Subdirectory
Note: Please take great care when deleting a
directory. Deletion is permanent.
1. Click on the parent folder for the
subdirectory you want to delete
2. Click the Directory button
3. Type the exact name of the subdirectory you
want to delete
4. Click Remove
5. If Remove was clicked, a pop-up box will
appear to verify that you wish to delete that
folder
Brain Break
Working with Images
• Image Dimensions
– Resize photos outside of Drupal, preferably using
Photoshop or www.picresize.com
– Resize photos in Drupal using the Resize button in
the File Browser
– Width: no more than 460 pixels
– Headshot Width: 100 pixels
• Inserting an image is very similar to uploading
a document
Tip: Create subfolders to organize images
How to Insert an Image
1.
2.
3.
4.
5.
Click where you want to insert an image
Click Insert/Edit Image button on the toolbar
Click Browse
In the File Browser, click Image_Docs
Navigate to the folder where you want to store the
image (or create a subfolder)
6. Click the Upload button on the top of the window
7. Click Add Files to add the file you want to upload
8. Once the file has been selected, click the Open button
9. Click the Upload button (bottom of the window)
10. You will be notified once the file is uploaded
11. Click the small black X in the upper right corner
How to Insert an Image
12.Click the file you
want to insert
13.Click Insert File
on the menu
14.This takes you
back to the
Insert/Edit
Image window
15.Enter the Image
Description and
Title (THIS IS
REQUIRED)
How to Insert an Image
16.Click the Appearance
tab and set the
Alignment (most
likely left)
17.Click Insert
18.To change image
properties once the
image is already
inserted in the body,
click the image and
then the Insert/Edit
Image button
Insert a Previously Uploaded Image
1.
2.
3.
4.
5.
6.
7.
8.
9.
Click where you want to insert an image
Click Insert/Edit Image button
In the Insert/Edit Image window, click Browse
In the File Browser windows, click Image_Docs
Navigate to the folder where the image resides
Click on the image you want to insert
Click Insert File on the menu
This takes you back to the Insert/Edit Image window
Enter the Image Description and Title (THIS IS
REQUIRED)
10. If necessary, click the Appearance tab and set the
alignment
11. Click Insert
Add a Link to an Image
1. Insert the image
2. Click on the image
3. Click the Insert/Edit Link button on the
toolbar
4. Enter the Link URL
5. Click Update
How to Embed Media (YouTube)
1.
2.
3.
4.
First, we need to get the Embed code
Go to the video’s page on YouTube.com
Under the video, click Share (1)
On the menu that appears, click Embed (2)
How to Embed Media (YouTube)
5. Click on the Video size and select (3)
6. In the first box, enter 460 for the width
7. Hit TAB and the second box will automatically adjust
the height
8. Copy the code from above the Video size field (4)
How to Embed Media (YouTube)
9. Back in Drupal, click
in the body where
you want to embed
the video
10.Click Insert/Edit
Embedded Media
button Click the
Source tab
How to Embed Media (YouTube)
11.Paste in the code
from YouTube
12.Make sure the
width of the video
has been set to
460 pixels
13.Click Insert
Add an Anchor within the page
Think of an Anchor as a shortcut to another
section in your page.
1.
2.
3.
4.
Click where you want to insert an anchor
Click the Insert/Edit Anchor button
Type in the anchor name
We suggest one or two lowercase words
connected with an underscore or hyphen
Link to an Anchor within the page
1. Highlight the text you want to link to the
anchor
2. Click the Insert/Edit Link button
3. Type in the number sign (#) and the name of
the anchor (no space between the number
sign and the anchor)
4. Example: #section_name
5. Click Insert
Anchor for returning to the top
An anchor named #top is included in each
page. This anchor takes the visitor back to the
top of the page. To use this anchor, type your
text for the link at the bottom of the section
(i.e. <Return to Top of Page>) or insert an image
(i.e. an arrow).
1.
2.
3.
4.
To link to the text, highlight the text
Click the Insert/Edit Link button
Type #top
Click Insert
Anchor for returning to the top
1.
2.
3.
4.
To link to an image, click the image
Click the Insert/Edit Link button
Type #top
Click Insert
How to Create a Slide Show
• You can add a slide show with multiple
images and captions to the bottom of a page
• Image dimensions: 460 (width) by 260
(height) pixels
• Example Slide Show:
http://uncp.edu/node/31641/
How to Create a Slide Show
To upload an image:
1. Click the Browse button
and locate the image
2. Click Open
3. Click the Upload button
4. Enter the Alternative Text and Title
5. To add additional images, click Add a new
file and repeat the previous step
How to Create a Slide Show
To insert a previously uploaded image:
1. Click Open File Browser and locate the
image
2. In the File Browser window, click
Image_Docs
3. Navigate to where the image resides
4. Click the image you wish to include
5. Click Select from the menu
6. Enter the Alternative Text and Title
How to Create a Slide Show
Brain Break #2
Here’s a French
Bulldog driving a
car for absolutely
no reason
Editing a Page – Lower on the Page
Site Sections Taxonomy
• Select the appropriate taxonomy term from
the drop down menu
• This term determines the name of the
department/programs that display in the
upper right corner of the page and who can
edit the page
• WIC access is based on this taxonomy term
Featured Content
The dropdown menu under Feature Content
has a few options
• None
• Image
• Video
• Promo
Obviously None means there’s no featured
media at the top of the page
Featured Content
Image:
• Dimensions 700 pixels wide x 300 pixels high
• Click the Browser button under Featured Image
to add a file and click Upload
• Click the Remove button to delete the image
Video:
• Paste the video URL into Video URL field
(YouTube video preferred)
Promo:
• Promos will be covered in the Advanced Class
Featured Content Sources
Here are a couple of resources:
• SmugMug – www.uncp.edu/photo
• UNCP YouTube –
www.youtube.com/uncpembroke1887
Menu Settings (IMPORTANT)
1. Check Provide a Menu Link
2. Menu Link Title is the text that appears in the site
navigation
3. From the Parent Item dropdown menu, select the
parent for the page
4. Click Save
Publish Document
After you’ve saved a new draft of the page, there’s
one more step before it goes live.
1. Change the dropdown menu in the yellow box
to Published and click Apply
2. Click the Edit Draft tab to continue editing the
page before it’s published
Add a Page
1. From the Drupal toolbar, hover over Content,
then Add Content, Click Basic Page
2. Follow the steps from Edit a Page section from
above
3. Be sure to select and set the Menu Settings
Moderate/Unpublish a Page
1. Click the Moderate tab in the body of the page
2. WICs can revert to an earlier version of the
page by clicking Revert for the desired version
3. Unpublish (not delete) the page by clicking
Unpublish
4. To find an unpublished page, see the My
Workbench section below
5. Tip: Hover over the Moderate button to see the
page’s node #.
Delete a Page
1. Deletion is permanent
2. When in doubt, just Unpublish
3. To delete a page, create a New Draft and
click the Delete button at the bottom of the
page
Site Map
1. The Site Map, linked in the footer of every
page, lists each page on the site
2. Use the Site Map or My Workbench to
locate a lost page
My Workbench
1. Use My Workbench to review all content
created
2. From the Drupal Admin toolbar, click My
Workbench
3. Under My Edits, click View All to review all
content created
4. To view unpublished content, set Published
to “No” and click Apply
What’s Next?
Be sure to sign up for the Advanced Class
Learn about:
• Spotlights
• Promos
• Webforms