Drupal Training SeriesBASIC

Provided by University Communications & MarketingWeb Publisher: 910-521-6820

http://uncp.edu/UCM

v. 1.1

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 & MarketingWeb Publisher: 910-521-6820

http://uncp.edu/UCM

The Drupal FrameworkDrupal 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 & MarketingWeb Publisher: 910-521-6820

http://uncp.edu/UCM

The Drupal FrameworkBack 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 & MarketingWeb Publisher: 910-521-6820

http://uncp.edu/UCM

The Drupal FrameworkSomething 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-6820http://uncp.edu/UCM

Website Information CoordinatorsThat’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 & MarketingWeb Publisher: 910-521-6820

http://uncp.edu/UCM

Website Information CoordinatorsEveryone 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 & MarketingWeb 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 & MarketingWeb 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 visible3. 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

Provided by University Communications & MarketingWeb Publisher: 910-521-6820

http://uncp.edu/UCM

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.

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/about-uncp/administration/departments/university-communications-marketing/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 Word1. 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 Insert5. 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 page1. Highlight the text you want

to create a link with2. Click the Insert/Edit Link

button in the toolbar3. In the Link URL field, paste

or type the URL4. Set Target to Open Link in a

New Window5. Click Insert6. The text is now linked and

blue

Link to an UNCP pageThere are three ways you can do this:1. Highlight text 2. Click the Linkit button in the

toolbar3. 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 pageThe second way:1. Highlight the text you

want to create a link with2. Click the Insert/Edit Link

button in the toolbar3. In the Link URL field, type

the page’s node # in the format /node/15484

4. Click Insert

Link to an UNCP pageThe third way:1. Highlight text2. Click the Insert/Edit Link button

in the toolbar3. 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/undergraduate-admissions

5. Click Insert

Create an Email Link1. Highlight text 2. Click the Insert/Edit Link

button in the toolbar3. 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 document1. Highlight text 2. Click the Insert/Edit Link

button in the toolbar3. 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 folder6. Please upload the file(s) to the correct folder7. Click the Upload button (2)

Link to/Upload a document8. 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 file1. Highlight text2. Click the Insert/Edit Link button3. Click the Browse button4. In the File Browser window, click Images_Docs5. Navigate to the desired folder6. Click the file you want to link7. Click Insert File8. This takes you back to the Insert/Edit window9. Click Insert

Rename or Delete a file1. Click on the link2. Click the Insert/Edit Link button3. Click the Browse button4. Navigate to the file5. Click on it6. Press the Delete or Rename button7. If you rename a file, click on the file and

choose relink text

Tip: delete old/unused files from the server

Remove a Link1. Highlight the link2. 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. Highlight text2. Click the Insert/Edit Link button3. Click the Browse button4. In the File Browser, click Images_Docs5. Navigate to your directory6. Click the Directory button7. Type in the name using underscores for any spaces8. Click Add

Renaming a Subdirectory

1. Click on the directory you want to rename2. Click the Rename button across the top of

the window3. Type in the new name4. Click the Rename button to the right

Deleting a SubdirectoryNote: Please take great care when deleting a directory. Deletion is permanent.1. Click on the parent folder for the subdirectory

you want to delete2. Click the Directory button3. Type the exact name of the subdirectory you

want to delete4. Click Remove5. 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 Image1. Click where you want to insert an image2. Click Insert/Edit Image button on the toolbar3. Click Browse4. In the File Browser, click Image_Docs5. 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 window7. Click Add Files to add the file you want to upload8. Once the file has been selected, click the Open button9. Click the Upload button (bottom of the window)10. You will be notified once the file is uploaded11. Click the small black X in the upper right corner

How to Insert an Image12.Click the file you

want to insert13.Click Insert File

on the menu14.This takes you

back to the Insert/Edit Image window

15.Enter the Image Description and Title (THIS IS REQUIRED)

How to Insert an Image16. Click the Appearance

tab and set the Alignment (most likely left)

17. Click Insert18. 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 Image1. Click where you want to insert an image2. Click Insert/Edit Image button3. In the Insert/Edit Image window, click Browse4. In the File Browser windows, click Image_Docs5. Navigate to the folder where the image resides6. Click on the image you want to insert7. Click Insert File on the menu8. This takes you back to the Insert/Edit Image window9. Enter the Image Description and Title (THIS IS REQUIRED)10. If necessary, click the Appearance tab and set the

alignment11. Click Insert

Add a Link to an Image1. Insert the image2. Click on the image3. Click the Insert/Edit Link button on the

toolbar4. Enter the Link URL5. Click Update

How to Embed Media (YouTube)

1. First, we need to get the Embed code2. Go to the video’s page on YouTube.com3. Under the video, click Share (1)4. 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 width7. Hit TAB and the second box will automatically adjust

the height8. 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. Click where you want to insert an anchor2. Click the Insert/Edit Anchor button3. Type in the anchor name4. 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 button3. Type in the number sign (#) and the name of

the anchor (no space between the number sign and the anchor)

4. Example: #section_name5. 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. To link to the text, highlight the text2. Click the Insert/Edit Link button3. Type #top4. Click Insert

Anchor for returning to the top

1. To link to an image, click the image2. Click the Insert/Edit Link button3. Type #top4. 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 ShowTo upload an image:1. Click the Browse button

and locate the image2. Click Open3. Click the Upload button4. Enter the Alternative Text and Title5. To add additional images, click Add a new

file and repeat the previous step

How to Create a Slide ShowTo insert a previously uploaded image:1. Click Open File Browser and locate the

image2. In the File Browser window, click

Image_Docs3. Navigate to where the image resides4. Click the image you wish to include5. Click Select from the menu6. 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 ContentThe 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 ContentImage:• 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 SourcesHere are a couple of resources:• SmugMug – www.uncp.edu/photo• UNCP YouTube –

www.youtube.com/uncpembroke1887

Menu Settings (IMPORTANT)

1. Check Provide a Menu Link2. Menu Link Title is the text that appears in the site

navigation3. From the Parent Item dropdown menu, select the parent for

the page4. 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 Apply2. 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 page2. WICs can revert to an earlier version of the page by

clicking Revert for the desired version3. Unpublish (not delete) the page by clicking

Unpublish4. To find an unpublished page, see the My Workbench

section below5. Tip: Hover over the Moderate button to see the

page’s node #.

Delete a Page1. Deletion is permanent2. When in doubt, just Unpublish3. To delete a page, create a New Draft and

click the Delete button at the bottom of the page

Site Map1. The Site Map, linked in the footer of every

page, lists each page on the site2. Use the Site Map or My Workbench to

locate a lost page

My Workbench1. Use My Workbench to review all content

created2. From the Drupal Admin toolbar, click My

Workbench3. Under My Edits, click View All to review all

content created4. 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