table of contents - loyola university new orleans · drupal training guide 7 7 when in drupal, you...

49
Loyola University New Orleans Drupal Training Guide 1 1 TABLE OF CONTENTS Logging In ......................................................................................................................................................................... 3 The Admin Welcome Page .............................................................................................................................................. 3 Editing Content .......................................................................................................................................................... 4 Browsing to Edit.................................................................................................................................................................. 5 View Content Listing ......................................................................................................................................................... 5 Sorting by Department ................................................................................................................................................ 5 Sorting by Content Type ............................................................................................................................................. 5 Creating Content ...................................................................................................................................................... 6 Faculty/Staff Bio Page....................................................................................................................................................... 6 Header Image ....................................................................................................................................................................... 9 Page .......................................................................................................................................................................................... 9 What Are Protected Pages?...................................................................................................................................... 10 How Do I Select A Header Image On A Page ..................................................................................................... 10 What Is A Title? ............................................................................................................................................................. 11 What Is An Audience? ................................................................................................................................................ 11 What Is The Body Of A Page? And What Do The Icons Mean? .................................................................. 12 Uploading File Attachments (PDFS, Word) ....................................................................................................... 19 Publishing Options ...................................................................................................................................................... 19 Revisions ......................................................................................................................................................................... 20 Photo Gallery ...................................................................................................................................................................... 20 News Item ............................................................................................................................................................................ 23 Achievements + Research ............................................................................................................................................. 23 Spotlight: Video ................................................................................................................................................................. 24 Spotlight: Feature ............................................................................................................................................................. 25 Spotlight: News Story...................................................................................................................................................... 26

Upload: others

Post on 25-Jun-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

1

1

TABLE OF CONTENTS

Logging In ......................................................................................................................................................................... 3

The Admin Welcome Page .............................................................................................................................................. 3

Editing Content .......................................................................................................................................................... 4

Browsing to Edit .................................................................................................................................................................. 5

View Content Listing ......................................................................................................................................................... 5

Sorting by Department ................................................................................................................................................ 5

Sorting by Content Type ............................................................................................................................................. 5

Creating Content ...................................................................................................................................................... 6

Faculty/Staff Bio Page....................................................................................................................................................... 6

Header Image ....................................................................................................................................................................... 9

Page .......................................................................................................................................................................................... 9

What Are Protected Pages? ...................................................................................................................................... 10

How Do I Select A Header Image On A Page ..................................................................................................... 10

What Is A Title? ............................................................................................................................................................. 11

What Is An Audience? ................................................................................................................................................ 11

What Is The Body Of A Page? And What Do The Icons Mean? .................................................................. 12

Uploading File Attachments (PDFS, Word) ....................................................................................................... 19

Publishing Options ...................................................................................................................................................... 19

Revisions ......................................................................................................................................................................... 20

Photo Gallery ...................................................................................................................................................................... 20

News Item ............................................................................................................................................................................ 23

Achievements + Research ............................................................................................................................................. 23

Spotlight: Video ................................................................................................................................................................. 24

Spotlight: Feature ............................................................................................................................................................. 25

Spotlight: News Story ...................................................................................................................................................... 26

Page 2: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

2

2

Spotlight: Generic Photo With A Caption ................................................................................................................ 27

Spotlight: Quote ................................................................................................................................................................. 28

Spotlight: Fast Fact ........................................................................................................................................................... 29

Spotlight: Link List ........................................................................................................................................................... 29

Formatting Content ............................................................................................................................................ 31

Copying and Pasting as Plain Text .................................................................................................. 33

Naming Photos and File Attachments for Maximum Searchability ...... 35

Photos .................................................................................................................................................................................. 36

Where to Find Photos ..................................................................................................................................................... 36

Cropping Photos ................................................................................................................................................................ 36

Uploading Photos .............................................................................................................................................................. 37

Intranet .............................................................................................................................................................................. 41

What kind of password protection is provided? ................................................................................................. 42

How do I add information to my intranet?............................................................................................................. 42

Spotlights ......................................................................................................................................................................... 43

Format, Standards, and Style ................................................................................................................. 45

Format Options .................................................................................................................................................................. 46

Style Options ....................................................................................................................................................................... 47

Headline Capitalization .................................................................................................................................................. 47

Headline Placement and Usage ................................................................................................................................... 47

Link Formatting ................................................................................................................................................................. 48

Contextual Links ................................................................................................................................................................ 48

New Page or Section Links ............................................................................................................................................ 48

Standards and Best Practices ....................................................................................................................................... 48

University Style.................................................................................................................................................................. 49

Page 3: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

3

3

LOGGING IN To login to Drupal, type the root URL address in your browser followed by user/login

Example:

http://www.loyno.edu/websitename/user/login

http://websitename.loyno.edu/user/login

More Examples include:

http://studentaffairs.loyno.edu/user/login

http://mm.loyno.edu/user/login

http://academicaffairs.loyno.edu/user/login

http://chn.loyno.edu/user/login

http://cmfa.loyno.edu/user/login

http://css.loyno.edu/user/login

http://law.loyno.edu/user/login

http://business.loyno.edu/user/login

http://www.loyno.edu/wac/user/login

http://www.loyno.edu/cfi/user/login

http://www.loyno.edu/lucec/user/login

You will know that you’re logged in when a new navigational menu appears on your screen

in the left column of the page that says Drupal Navigation. This menu includes all of the

tools you will need to edit your website.

THE ADMIN WELCOME PAGE The button at the top of the Drupal Navigation is for the Admin Welcome page. Once you’re

logged in, you will be brought to a screen that says Welcome Back (Username)!

Editing your website is as easy as 1-2-3!

Step 1: Provides all of the tools to view and create new content as well as change your

password and login to the university calendar.

Step 2: Provides links to training materials, the Loyola Flickr account, the Web Team Blog,

and the Web Team Request Form

Step 3: Provides policies and procedures for getting news on the Loyola homepage, using

social media, adding video to your website, and requesting an email or electronic

newsletter.

Page 4: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

4

4

EDITING CONTENT Your website is your first impression. Make it a good one. The primary audiences for the

website are prospective students, current students, faculty, and alumni. Accurate, fresh,

and relevant content gives visitors a reason to return.

There are two ways to edit content on your website. First, you can browse to the page you

want to edit and click the Edit tab at the top of your page to revise the content on the page.

Second, you can go to your Drupal navigation in the lower left side of your screen and click

View Content, where you will find a full listing of content on your website that is sortable

by Department and by Content Type.

Page 5: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

5

5

BROWSING TO EDIT Browsing will only allow you to edit text in the main body of the page. You cannot browse

to a page and edit the header images or the spotlights that appear on that page. You also

cannot browse to edit an unpublished page. These two items are only available by

navigating to the View Content list to edit.

VIEW CONTENT LISTING The View Content list allows you to see all content available on your website.

SORTING BY DEPARTMENT The content is sortable by department if your website is built within a website installation

of a larger office at the university. If your website is for a center or institute, this generally

does not apply. To sort content by department, click on the name of your department and

then the Apply button, result produced will include only content available on your

department website.

SORTING BY CONTENT TYPE The content is sortable by content type for all websites. So if you’ve already sorted the

content by department or if that step does not apply to you, you would next sort the

content by content type. Some examples of content types might include: pages, header

images (panoramic images that span the width of your website), and all types of spotlights

(marketing graphics that you can create without the help of the web team to promote

events, accomplishments, news, quotes, number-based facts, and other bragging points

about your office, department, center or institute.) To sort content by content type, click

the name of the content type you want to view, and then click the Apply button.

What does this list provide?

The View Content list provides you a listing of all of the content on your website in a table

format with the title you gave to your content, the type of content you created (e.g. page,

header image, spotlight), the date the content was created, the date the content was last

updated, whether the content is published or unpublished, and if you have authority to edit

the content the listing will provide you an edit button to make changes to the content.

The View Content listing’s default is to display the piece of content that has been most

recently updated. So if you are editing the same piece of content many times, navigating to

the View Content list might be an easy way for you to find that piece of content over and

over again to edit.

The View Content list is the only place where you can find unpublished content. Once

content is unpublished, any links to content that you’ve unpublished will no longer work.

The content will also become unavailable through using the search function on the website.

Page 6: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

6

6

The only way you’ll be able to find content that is unpublished is to navigate to the View

Content list in your Drupal navigation and sort and edit the necessary content.

If you do not see an edit link next to a piece of content in your view content listing, this

indicates that you do not have permission to edit this piece of content. As the editor for a

single department within a larger office, you may be able to see all content for all of the

departments within that office, but you may only have editing access for the content for

your office depending on the permissions administrators in your office have requested.

CREATING CONTENT To create new content on your website, click the Create Content button in the Drupal

navigation on the lower left side of your screen. The Create Content screen will display all

types of content that you can create in Drupal.

The Create Content page is always your starting point for creating something new on your

website.

1. We recommend reusing old pieces of content and switching out photos or text for

that content when it pertains to an annual event or a recurring feature.

2. We recommend deleting pieces of content that pertain to something that has passed

and will not be reused in the future.

3. We do not recommend re-using pieces of content and switching out the text or the

photo when the existing content is not in any way related to the updated

information you plan on entering. (Example: editing a spotlight about teddy bears so

that it now talks about zebras simply because the teddy bear spotlight appeared on

the page and location where you want the new spotlight on zebras.

The problem is that when you create a new piece of content (even a spotlight), that

piece of content is assigned a number and a URL address. By changing out the

content with an unrelated subject matter, the number and the URL address for this

content no longer reflects the content contained there and thus affects the ability for

users to search for this content on the website. In the example mentioned above, we

would instead recommend deleting the spotlight about teddy bears and creating a

new spotlight about zebras that you would add to the page where you wanted the

spotlight to display.)

FACULTY/STAFF BIO PAGE Every faculty and staff member at the university should have a biography page outlining

their contact information, a brief overview of their career, courses they teach, areas of

expertise, and a link to their curriculum vitae if the person so wishes.

Page 7: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

7

7

When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page

in the left navigation, there is no edit button at the top of the page. This page is a

programmed page that is automatically populated with previews of all of the faculty and

staff bios you have created on your website. To edit this listing page, simply click on the

name of the person whose biography you need to edit and edit the individual’s biography.

The information you enter for that person will automatically be updated on the listing page

linked in your navigation.

Creating or editing a faculty and staff page is similar to creating a page. However, there are

options you must select in order for your page to appear in the correct listings in the

correct order.

Note: Before you create a new faculty or staff page, you will want to find and crop the

faculty and staff photo if one is available. For more information on how to do resize and

crop photos, see the section in this guide called “Photos.”

If you don’t have a photo, a placeholder image will be used until you have a photo to

upload. Faculty and staff can contact Public Affairs at (504) 861-5888 or

[email protected] to set up an appointment with the university photographer.

Job Type: For colleges and offices.

Determines if faculty and staff page appears

on the main Administration listing.

Groups/Audience: Determines in which

department listings faculty and staff page

will appear.

Page 8: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

8

8

To create a faculty and staff page:

1. Click Create Content.

2. Click Faculty Page or Bio Page (title varies).

3. Select Special Staff Classification.

4. If available, select Job Type.

5. Select Audience. Check all that apply.

6. Fill in the First Name, Last Name, Full Name, Job Title, and E-mail Address fields.

7. Upload a 220 x 220 pixel headshot. University photographer must have taken photo.

8. Fill in the Degrees field. List most recent degree first. All degree listings should be

formatted with the abbreviation of the degree, a comma, the name of the university

where they earned their degree, comma, and the year they earned their degree. Each

degree should be separated by a semicolon.

9. Fill in the Short Bio section. Include only paragraphs of biographical information

with an overview of the person’s professional career. Generally the short bio will be

about 400 words. The bio should include any books they have written, major

awards they have received, and previous professional experience that is relevant to

what they do today.

10. Upload a curriculum vitae, if available. Or, if the CV is hosted off-site (perhaps on a

personal website), provide a complete URL (beginning with http://) in the Link to

CV field.

11. List Courses Taught as bullet points using only the name of the course and not the

course number. List Areas of Expertise as phrases separated with commas (e.g.

Hotel Management, Crime Scene Forensics).

12. Fill in the contact information section, including Office Room Number, Office

Building, Mailing Address, Direct Phone, and Fax Number. The office room

number should only include the actual room number and not the word “room.” The

Mailing Address should be formatted as follows:

Loyola University New Orleans<br>

Department Name<br>

6363 St. Charles Ave.<br>

Campus Box 99<br>

New Orleans, LA 70118

Phone and fax numbers should use parenthesis for the area codes. Please do not use

periods or dashes.

13. List any personal websites.

14. Click Save.

Page 9: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

9

9

All faculty and staff biography pages will automatically appear in the faculty and staff

listings linked from your left navigation.

HEADER IMAGE A header image is the panoramic image that appears above the content on your page and

spans the width of the page. These photos are usually broad in topic and rotate on refresh

on an office, college, department, or center or institute homepage. Header images are

always used to display photographs and never graphics to advertise events.

To create a header image:

1. Click Create Content, and select Header Image

2. Name the header image with a title

3. Upload your photo

4. Click Save

The image must be between 710x200 and 710x300 to be uploaded as a header image. For

more information on cropping images, please see the section of this guide on photos.

PAGE Used for any content that requires its own web page. All other content types listed here are

created separately from the page.

Drupal is a content management system (CMS) that uses a modular format. What that

means is that pieces of content are created separately and you, the editor, decide which

pieces of content go together like putting pieces of a puzzle together.

When you’re creating a page, please remember that you’ll only be concentrating on the core

content of the page, all of the other optional pieces of content can be added to the page, but

they are created and edited separately from the page itself.

To create a page, navigate to the Drupal navigation in the lower left side of your screen.

Click Create Content. From the Create Content page, click Page.

A blank page consists of several parts. We’ll review each part together.

The first part of the page will consist of two dropdown menus. You can ignore the first

dropdown menu (Special Page Type). This option does not do anything.

Page 10: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

10

10

WHAT ARE PROTECTED PAGES?

The second dropdown menu is called PROTECTED PAGES. This dropdown menu allows you to

add password protection to the page in preparation for making the page a part of the office,

department, or center or institute intranet. You’ll learn more about intranets in Section VII

of this training guide.

HOW DO I SELECT A HEADER IMAGE ON A PAGE

Next, you’ll have the option to add a header image to a page. As we mentioned earlier,

Drupal allows you to create pieces of content and then decide which pieces go together.

When you add a header image to a page, you are not actually uploading the image to the

page. You’ve already uploaded the image to Drupal prior to creating the page. Now, you can

click the arrow for the HEADER IMAGE dropdown menu and find your image listed.

To create a new header image, please see information under “Creating Content” in this

training guide.

Page 11: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

11

11

WHAT IS A TITLE?

Naming your page will require you to enter a TITLE. The title of your page will become the

most prominent headline on the page. It will also become a part of the URL address for the

page (e.g. http://academicaffairs.loyno.edu/test-page). Generally, you want the headline of

the page to be broad enough to encompass all of the content mentioned on the page, but

not so long that the title gets into the specifics of content on the page. All of the specifics of

the event dates, the times, etc, can be accommodated in the main body of the page, but do

not need to be included in the title.

An example might be a web page about President’s Open House. A good title might be

President’s Open House. A title that is too specific might be President’s Open House May 5,

2011, from 9 a.m. to 5 p.m. The date and time of the event can be accommodated in the

body of the page, so that we can re-use the President’s Open House page year after year for

this annual event.

Depending on whether your website is part of a larger website installation, you might have

to select an audience for your web page. If you are a center or institute, this part does not

apply to you. If you are website editor who only edits one department website within an

office, your audience may be preselected for you.

WHAT IS AN AUDIENCE?

Selecting an audience for your page, tells Drupal which navigation and design to apply to

Page 12: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

12

12

the page. Selecting an audience also tells Drupal which editors to allow access to this page.

If you forget to select an audience, the page will not display navigation and you may no

longer have access to edit this page through your View Content list because Drupal does

not know what department this page belongs too. If this happens, please contact

[email protected] to remedy the problem.

Below the Audience listings, there is a check box called Hide Header Title.

This box is only used in very few circumstances. Generally, you can ignore this text box. You

might use this check box if you want the main headline of the page to be different than

what you named the title of the page. For the most part, you won’t want to use this option

because it will make your web page harder to find using the search function on the website.

WHAT IS THE BODY OF A PAGE? AND WHAT DO THE ICONS MEAN? The body of your web page is where you’ll be doing most of your work.

The first button on the editing palette for this page is called Source. This is where you

would go if you are familiar with looking at HTML code and want to make a chance to the

source code for the page.

Page 13: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

13

13

The next three buttons allow you to paste text into the web page. For more information on

how to properly copy and paste text into your website from third-party software

applications, please refer to Section V of this training guide “Copying and Pasting as

Plain Text.”

If you apply formatting to content on your webpage that you later decide you want to

remove (e.g. adding color to a word on a page), you can use the eraser icon to do this.

To insert a link on the page, you will use the Insert/Edit Link icon (the world with the chain

link on it).

If you want to insert an image into the main body of a page, you will use the Insert/Edit

Image icon (it’s yellow and has the picture of a mountain with a moon on it). For more

information about uploading images, please refer to Section VII of this training guide on

“Photos.”

To insert a table on the page, you will use the table icon.

Page 14: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

14

14

There are some differences between tables in Drupal and Tables in Microsoft Word. When

you click on the tables icon, you will see the table properties where you will select how

many rows and how many columns you want in your table.

When the table is inserted on the page, you will notice that you are unable to click and drag

to adjust the size of individual columns or rows. Columns and rows automatically adjust

themselves to the amount of content in the area. For more information about tables, read

the web team blog post called Tables in Drupal:

http://blogs.loyno.edu/webteam/2009/01/30/tables-in-drupal/

If you need to add a special character to a word or a name in the content of your page, you

will use the special characters icon.

Page 15: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

15

15

To add color to a word on a page, you will select the color from the options provided by our

design team that were selected to match the overall design of your website.

To format your text using subheadings and other options, use the Format dropdown menu.

To learn more about formatting content, please read Section IV of this training guide

Formatting Content.

Page 16: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

16

16

The bold, italics and underline icons are exactly the same as they appear in other software

applications you may be familiar with.

You likely won’t use the strikethrough, subscript, or superscript icons.

The numbered lists and bulleted lists are formatting tools you will frequently use. Website

usability studies show that website users generally browse the content on the web page,

first looking at the title of the page, any subheadings offered on the page to decide if this

page offers what they are looking for. A numbered or bulleted list can create another way

for the user to get a quick idea of the page’s message.

Try not using more than five items in a single bulleted or numbered list. Longer lists lose

their browsing effectiveness.

The increase indentation, decrease indentation, and blockquote icons allow the user to

organize content across the width of the page without placing the content in a table.

The left justify, centered, and right justify icons work just as they do in other software

applications.

You will not use the last two icons presented in the editing palette for teaser and show

blocks. You can ignore those icons.

Below the body of the page are Link Block 1 and Link Block 2. These two boxes allow you

to organize lists of links or contact information in two columns on a page.

Page 17: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

17

17

All formatting in the link blocks is done manually. The headline for the title of the link block

is Heading 4. Below that, you should include some intro text explain what the links are and

how someone might use them. After the intro text, you will create a bulleted list of titles for

your links. And finally, you will link up each bullet point with the web page where it should

point.

Below the link blocks is the area where you can add spotlights to a page. Please refer to

the training guide section about spotlights – what they are and how they should be

used.

Page 18: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

18

18

You can ignore the check box that says Check box to turn off the display of the Right

Column. You will not use this option.

To add any type of spotlight to a page, you will select the spotlight you have already created

from the list provided in each dropdown menu. If there are no options included in the list, it

means that you have not created any spotlights.

There is no preview option, so you have to decide on what spotlight you will use based on

the title you entered when you created the spotlight.

Page 19: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

19

19

Once a spotlight is selected, Drupal will place the spotlight where it needs to go on the page,

you do not need to know anything about web design or web programming in order to use

these marketing tools on your page. Drupal does this work for you.

UPLOADING FILE ATTACHMENTS (PDFS, WORD) Below the spotlights area of your page, you have the ability to upload file attachments. The

file attachments area of the page, allow you to upload a Microsoft Word, PDF, PowerPoint,

or Excel document to your web page. Before uploading your file attachment, you will need

to re-name the file following the Loyola Naming Protocols outlined later in this training

guide called Naming Photos and File Attachments for Maximum Searchability.

To upload a file attachment, click Browse and find the document on your computer. Then,

click attach. A copy of the document will be uploaded to the server. You will see the name of

your document attached to the page.

1. Below the document name will be a URL address in small text. Copy this URL

address.

2. Scroll back up to the Body of the page

3. Highlight the word that you want to link to the PDF/Microsoft Word, Excel

document (e.g. the words Faculty Handbook would link to a PDF document of the

faculty handbook)

4. Click the Insert/Edit Link icon in the editing palette of the page’s body

5. Paste the URL address and click OK

6. Scroll down to the bottom of the page and click Save

PUBLISHING OPTIONS

Publishing options will provide the ability to publish or unpublish content with the click of

a check box. When content is unpublished, the content cannot be found in search results

and any link to the content from your live web page will return a Page Not Found message

Page 20: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

20

20

to visitors. Generally, you only want to unpublish content when you are still working on

building it and it is not ready for public viewing. You should not unpublish content that is

currently linked somewhere on your website.

The final option available on your new web page is to Save. Remember to save as often as

possible. Each time you save your web page, you are publishing the changes you have

made. If there is a power outage or a problem occurs with your computer. Only the changes

that you have saved will be able to be retrieved. Any changes made since the last time you

saved will be lost.

REVISIONS Each time you save the page, you are creating a new version of the page. If there was a

reason why you needed to revert back to an older version of the page, you have that option

through the Revisions tab at the top of your page.

By clicking Revert, you will revert back to the older version of the page.

PHOTO GALLERY Photo Galleries allow you to display a collection of photos from within your website. You

can create a single gallery or multiple galleries, depending on how many photos you have

to share. The photo gallery is promoted either through a link to the gallery from a page or a

link to the gallery from a spotlight feature. Photo galleries feature a headline, a description,

and photos. Users can view photos by clicking on individual photos in the filmstrip, the

arrows, or the photos themselves.

Page 21: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

21

21

Page 22: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

22

22

To create a Photo Gallery:

1. Click Create Content, and select Photo Gallery.

2. Enter a Gallery Title and Gallery Description.

3. Upload an Image. It must be at between 450 x 300 pixels and 640 x 480 pixels.

Larger photos are automatically resized to fit within the maximum dimensions. (if

you prefer to resize your photos before you upload them, see Section VII: Photos.)

4. Once the photo is uploaded, add a brief caption to the Alternate Text field, and add

a Title, which displays as a caption underneath the photo.

Be careful to not click the Remove button directly under the Title field, unless you

intend to remove a photo from your gallery

5. Click Add another item to continue adding photos in this manner until you have

uploaded as many as you like.

6. Click Save.

To link to your photo gallery:

1. View the gallery in your browser.

2. Copy the URL.

3. In a spotlight or in body copy, highlight words that you would like to link to your

gallery and create a link using the link tool.

To add more photos to a photo gallery:

1. View the photo gallery and click the Edit tab, or find the gallery in View Content and

click the Edit link.

2. Upload more photos and make any other your changes.

3. Click Save.

Page 23: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

23

23

To delete the gallery:

1. View the photo gallery and click the Edit tab, or find the gallery in View Content and

click the Edit link.

2. Click Delete.

NEWS ITEM This is an optional content type that is applied to websites based on that office, department,

center or institute’s specific request for functionality. The News Item content type is

displayed on the office, department, or center or institute homepage with a link to a full

listing of news included somewhere in the left navigation of the website.

To create a news item:

1. Click Create Content, and select News Item

2. Select the audience of the news item

3. Write a headline (The headline should include a noun, verb, and direct object

4. Paste the first sentence of the news item in the “intro text” box.

5. Paste the full news item, including the intro text in the content box.

6. If you have an image for the news item (photo size must be 90x90), click upload

7. The date of the news item defaults to today’s date. Edit the date if necessary.

8. Click Save

ACHIEVEMENTS + RESEARCH Achievements and research should be used to highlight student, faculty, and alumni success

stories (e.g. faculty publications, faculty conferences/lectures, student research, student

awards, alumni promotions, alumni business achievements/recognition).

You will notice when you navigate to the Achievements + Research page on your website

that the page does not have an “Edit” button. The reason is that this page is a programmed

page and content is fed to the page through the “Achievement + Research” content type in

Drupal.

To create an achievements + research:

1. Click Create Content in Drupal, and select Achievements + Research

2. Write a headline for the achievement. (The headline should include a noun, verb,

and direct object.)

3. Select an audience for the achievement (e.g. the department where the achievement

should appear.) Be sure to only select one audience.

4. Select an audience type (e.g. student, faculty, alumni)

5. Select whether this is undergraduate research (yes or no)

Page 24: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

24

24

6. Paste the first sentence of your achievement into the “intro text” box.

7. Paste the entire achievement into the “achievement and research content” box. Be

sure to paste this content as “plain text.”

8. If you have an image, upload the image. The image should be cropped to 90 x 90

pixels.

9. The date of the achievement and research defaults to the day that you upload it to

Drupal. If you need to adjust the date, please do so. The date will control where the

achievement falls in the listing on the website.

10. Click Save

SPOTLIGHT: VIDEO This type of spotlight allows small videos to be played in the right column of your web

page. Videos are hosted on Loyola’s Vimeo channel (http://www.vimeo.com/loyno), but

can be played on your page, without requiring the user to go anywhere else to view the

video.

They are best composed of short testimonials or snippets of information. Video feature

spotlights are small (220 pixels wide), so videos should be completely clear and

understandable at that small size. Longer videos or those that would be best viewed at a

larger size and should be embedded into the content

of the page and not as a video spotlight.

If you have a suitable video that you would like to

highlight on your site, contact the web team. We will

assist you with uploading the video to Vimeo, and

then send you the code to add to your video spotlight.

Note: At this time, the Office of Web Communications

does not provide for video recording and production

services. The Office of Web Communications does

have Flip Video Camcorders available for checkout if

you want to record your own video.

To create a Video spotlight:

1. Click Create Content, and select Spotlight: Video.

2. Enter a Title. This title will appear above your video.

3. Paste the Vimeo code into the Body area.

4. Click Save.

The system displays a preview of the video spotlight. It is now ready to be added to any

page on your site.

Page 25: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

25

25

To edit the spotlight:

1. Find the spotlight in View Content and click the Edit link.

2. Make your changes.

3. Click Save.

To delete the spotlight:

1. Find the spotlight in View Content and click the Edit link.

2. Click Delete.

SPOTLIGHT: FEATURE Feature spotlights promote an event or program, or

highlight important information, and direct users to

related web pages. The Feature spotlight includes a

headline, small photo, space for a few words of teaser

text, and a link. The feature spotlight’s headline is

limited to 28 characters, and the description is limited

to 80 characters. The photo is limited to 192 x 175

pixels.

To create a Feature spotlight:

1. Click Create Content, and select Spotlight:

Feature.

2. Enter a Title. Make it unique enough so that you can find it in a list of other feature

spotlights.

3. Enter a Spotlight Headline, 28 characters max. This title will appear at the top of

your feature spotlight.

4. Enter a Spotlight Description, 80 characters max. This description appears at the

bottom of the spotlight, with a white, translucent background.

5. Upload a Spotlight Image, cropped to 192 x 175 pixels. (For more information on

how to do resize and crop photos, see Section VII: Photos.) Once the photo is

uploaded, add a brief caption to the Alternate Text field.

6. Add a URL/Link to link the feature spotlight to a related web page.

7. Optionally, change the URL/Link Text. The default is GO.

8. Click Save.

The system displays a preview of the feature spotlight. It is now ready to be added to any

page on your site.

Page 26: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

26

26

To edit the spotlight:

1. Find the spotlight in View Content and click the Edit link.

2. Make your changes.

3. Click Save.

To delete the spotlight:

1. Find the spotlight in View Content and click the Edit link.

2. Click Delete.

SPOTLIGHT: NEWS STORY Used to promote new or important items throughout

your site, particularly student, faculty, or alumni

successes; press releases found in the University

Newsroom about your department or office; or a web

page on your website that features additional

information about content included in your spotlight.

The news story spotlight’s headline is limited to 28

characters, and the description is limited to 200

characters. The photo is limited to 75 x 75 pixels.

To create a News Story spotlight:

1. Click Create Content, and select Spotlight: News Story.

2. Enter a Story Title. Make it unique enough so that you can find it in a list of other

news story spotlights.

3. Enter a Story Headline, 28 characters max. This title will appear at the top of your

news story spotlight.

4. Enter a Story Description, 200 characters max. This description is usually a

sentence or two and appears in the main portion of the spotlight, wrapped around

the Story Image.

5. Upload a Story Image, cropped to 75 x 75 pixels. (For more information on how to

do resize and crop photos, see Section VII: Photos.) Once the photo is uploaded,

add a brief caption to the Alternate Text field.

6. Add a URL/Link to link the feature spotlight to a related web page.

7. Optionally, change the URL/Link Text. The default is GO.

8. Click Save.

The system displays a preview of the news story spotlight. It is now ready to be added to

any page on your site.

Page 27: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

27

27

To edit the spotlight:

1. Find the spotlight in View Content and click the Edit link.

2. Make your changes.

3. Click Save.

To delete the spotlight:

1. Find the spotlight in View Content and click the Edit link.

2. Click Delete.

SPOTLIGHT: GENERIC PHOTO WITH A CAPTION Generic photos can be used to display anything from

general facilities/campus shots to photos of top

administrators and successful events. When a caption

is used, the subject of the photo should be adequately

described to provide context to the photo. The photo

is limited to 220 x 220 pixels. You can also choose to

omit the caption and just display the image.

To create a Generic Photo with Caption spotlight:

1. Click Create Content, and select Spotlight:

Generic Photo with Caption.

2. Enter a Title. Make it unique enough so that

you can find it in a list of other generic photo

spotlights.

3. Upload a Photo, cropped to 220 x 200 pixels. (For more information on how to do

resize and crop photos, see Section VII: Photos.) Once the photo is uploaded, add a

brief caption to the Alternate Text field.

4. Add a Caption, 60 characters max.

5. Click Save.

The system displays a preview of the generic photo. It is now ready to be added to any page

on your site.

To edit the spotlight:

1. Find the spotlight in View Content and click the Edit link.

2. Make your changes.

3. Click Save.

To delete the spotlight:

Page 28: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

28

28

1. Find the spotlight in View Content and click the Edit link.

2. Click Delete.

SPOTLIGHT: QUOTE Gathering quotes from students, faculty, or alumni of your

department or office can help tell the story of the services you or

your department offer, providing users a tangible face and name to

the story. Quotes may be displayed with or without a photo of the

person. We recommend quotes be no longer than two brief

sentences. If a photo is used, we recommend a close-up shot of the

individual quoted. Photographs should be professional quality,

meaning they should be in color and in focus. Quotes always should

be from real people, preferably someone who has directly benefited

from your department or offices’ services or programs. The photo is

limited to 220 x 220 pixels.

To create a Quote spotlight:

1. Click Create Content, and select Spotlight: Quote.

2. Enter a Full Name. This appears on the quote spotlight. It

also appears in the list of all quote spotlights, so if you have

multiple quotes by the same person, you may need to use trial and error to place the

one you want on your page.

3. Enter a Quote. You do not need to include quotation marks. Quotes should be no

more than one or two brief sentences.

4. Upload an Image, cropped to 220 x 200 pixels. (For more information on how to do

resize and crop photos, see Section VII: Photos.) Once the photo is uploaded, add a

brief caption to the Alternate Text field.

5. Click Save.

The system displays a preview of the quote. It is now ready to

be added to any page on your site.

To edit the spotlight:

1. Find the spotlight in View Content and click the Edit

link.

2. Make your changes.

3. Click Save.

To delete the spotlight:

Page 29: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

29

29

1. Find the spotlight in View Content and click the Edit link.

2. Click Delete.

SPOTLIGHT: FAST FACT Used to display short facts or blurbs about your department or office. The web team

recommends using numerical figures for impact.

Fast Facts spotlights highlight statistics or other tidbits

of information about your college or department on your

site. Fast Facts use slider technology, which allows users

to page through panes of facts by clicking on the circles

that appear at the top of the fast facts pane.

You must have at least four Fast Facts created before

they will appear on your page. Each pane holds five facts.

A maximum of 25 facts will display at any given time.

To create a Fast Fact spotlight:

1. Enter a Fact. This is generally a number or brief

word.

2. Enter a Description; a short phrase or sentence

describing the fact.

3. Click Save.

The system displays a preview of the fast fact. Once you have at least four facts entered,

they are ready to be enabled on any page on your site.

To edit the fast fact:

1. Find the spotlight in View Content and click the Edit link.

2. Make your changes.

3. Click Save.

To delete the fast fact:

1. Find the spotlight in View Content and click the Edit link.

2. Click Delete.

SPOTLIGHT: LINK LIST

Page 30: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

30

30

The link list/contact spotlight can be used to list pertinent links, display contact

information, or just highlight important notes that are relevant to the page where it’s

displayed.

What is the difference between link lists and link blocks on a page?

Link lists are displayed in the right column of your webpage and are thus less directly

related to the content in the main body of your webpage. Therefore, link lists should refer

to links found in outside resources and will take you to web pages not hosted on the Loyola

server. On the other hand, because link blocks are displayed in the main body of your web

page, they should refer to links directly related to content in the main body of your website

with deeper links within your own website or links to other Loyola resources.

To create a Link List/Contact spotlight:

1. Click Create Content, and select Spotlight: Link List/Contact.

2. Enter a Title. This appears at the top of your spotlight, with the Heading 4 format

applied to it. Make it unique enough so that you can find it in a list of other link

list/contact spotlights.

3. Enter content in the Body area. This can be a bulleted list of links, your

organization’s contact info, or a short paragraph.

4. Click Save.

The system displays a preview of the link list or contact info block. It is now ready to be

added to any page on your site.

To edit the spotlight:

Page 31: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

31

31

4. Find the spotlight in View Content and click the Edit link.

5. Make your changes.

6. Click Save.

To delete the spotlight:

3. Find the spotlight in View Content and click the Edit link.

4. Click Delete.

FORMATTING CONTENT

The Office of Marketing and Communications has pre-programmed the formatting that you

need for your web pages into the template for the page in Drupal.

Normal text is used as regular paragraph text on the page

Heading 1 is used for the title of your page. You will not use Heading 1 on your page

because the title of your page is automatically formatted as Heading 1.

Page 32: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

32

32

Heading 2 and Heading 3 are used for subheadings on the page. Generally, subheadings are used to group paragraphs of text based on topic. The different between Heading 2 and Heading 3 is that Heading 2 is used for more everyday groupings of text that deal with relatively mundane subject matters (e.g. Frequently Asked Questions). Instead of introducing sections of text, Heading 3 should be used to display headlines that emote or market something, such as Your place in the world. Your place on campus.

Heading 4 is used to give a headline to a list of links as shown here. Generally, it should only be used in the link blocks and not in the regular body of a page. The reason you don’t want to use Heading 4 in the body of your page is because the formatting includes a line underneath the text. A line across the entire width of the page visually tells the user to stop, don’t read any further, there is nothing important below this line even if there might be very important content below the line. Using Heading 4 in link blocks avoids this problem

Page 33: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

33

33

because the formatting of the link block constrains the line so it only expands across half of the page.

In the Format dropdown menu, you will not use Heading 5 or Heading 6. Neither one of

those options have been programmed to adjust the formatting on your web page.

COPYING AND PASTING AS PLAIN TEXT When you are creating new content on your website or transferring content into your

website, you likely will have already written out the content in another software

application, e.g. Microsoft Word, Microsoft Excel, or your e-mail.

While this is common, the most important thing you can remember about editing your

website is that you NEVER want to copy and paste directly from another software

application into your website without first removing the formatting attached to that

content.

In the body of your website, Drupal offers what we call an editing palette. Within the

editing palette, there are three clipboard buttons that offer you the ability to paste your

content into your website. We ask that you use the clipboard with the small T next to it.

This clipboard is called Paste as Plain Text.

Copying and pasting as plain text removes the formatting associated with the content in

Microsoft Word, Microsoft Excel, another website, or your e-mail, and simply allows you to

paste the text into your website so that you don’t have to re-type the content.

Page 34: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

34

34

If you do not remove the formatting associated with this text before placing it in your

website, the HTML code associated with this formatting will cause problems in your

website (some common problems include: not being able to add paragraph breaks on the

page, not being able to add bold to text on your page). The reason these problems occur is

the formatting from the previous program is circumventing any new formatting from being

applied to the content.

The source code for content that has been properly pasted as plain text would look like

this:

The same content improperly pasted without removing the formatting from Microsoft

Word or another HTML-based program would look like this. And the editor would

experience many difficulties in trying to edit this web page.

So to reiterate once again, the most important rule to remember when editing your website

is that you always want to remove the formatting from your content before pasting

the text into your website by using the Paste as plain text icon in Drupal’s editing

palette.

Page 35: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

35

35

NAMING PHOTOS AND FILE ATTACHMENTS FOR MAXIMUM

SEARCHABILITY When you are resizing your images, you’ll want to rename them so that the images will be

search friendly. What I mean by search friendly is search engines use keywords to create

search results appropriate for your inquiry. If your file is named 08d4kdf.jpg, Google will

never return your image or your PDF document in response to a search about pottery at

Loyola. So instead, we ask content editors to rename their files so that they incorporate

certain key terms appropriate for the image or file.

For example, instead of 08d4kdf.jpg, you would rename your photo to loyola-university-

new-orleans-pottery.jpg. This way if someone searched loyola pottery, your image would

be one of the search results returned in Google Images.

Another reason you want to do this is that search engines use a complex mathematical

algorithm to calculate our Loyola University New Orleans’ general search results. The

combination of our page titles, using keyword terms in the content of each web page,

search friendly photo names and file attachment names, as well as always entering

alternate text for each photo uploaded helps move Loyola content to the top of the search

results.

Take for example the fact that there are four or more Loyola universities out there. If you

type the word Loyola into Google, Loyola University New Orleans is presented as the top

search result. This is because we strive for search engine optimization. By using Loyola’s

naming conventions for photos and file attachments, you can help us maintain our top

result in Google and other search engines.

To recap, the rules of thumb are:

All photo and file attachment names should be lowercase.

All photo and file attachment names should include loyola-university-new-orleans

in the image or file name followed by the name of your file (e.g. loyola-university-

new-orleans-crystal-vaccaro.jpg, loyola-university-new-orleans-ambassador-tour-

guides.jpg, loyola-university-new-orleans-ambassador-handbook.pdf).

To learn more about search engine optimization, read the web team’s standard on search

engine optimization.

Page 36: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

36

36

PHOTOS

Where to find them? Cropping photos, and the basics of uploading a photo to a page, to

a spotlight, or to a header image

WHERE TO FIND PHOTOS Loyola University employs a full-time photographer. The university photographer works in

the Office of Marketing and Communications. Please contact the Public Affairs team to

schedule the photographer to attend your event or to photograph your faculty or classroom

by calling (504) 861-5888 or e-mail [email protected]. The university photographer

uploads all of his photographs to a photography server. One person from each office on

campus can request access to this server by contacting [email protected]. A staff

member from the Office of Marketing and Communications will contact you to walk you

through the steps of connecting to the photography server.

Sorting through all of the university’s photographs can be time consuming. As a result, the

web team has done the work for you. We periodically sort through the university

photographer’s recent photographs and choose some of his best work to upload to the

university’s Flickr account, where you can download images to use on your website:

http://www.flickr.com/photos/loyolanola. There are more than two sets of images

displayed on the university’s Flickr account. Each is organized by general topic area. They

can also be searched by keywords tagged to each photo. Navigate to the lower right side of

Loyola’s Flickr account, to see all sets. Once you click one of the photo thumbnails to view it

at a larger size, an icon that says View All Sizes will display at the top of the photo. By

viewing all sizes, you can download the image size you would like to use on your website.

In addition to Loyola photography, the Office of Marketing and Communications also

subscribes to stock photography services. We have one account for such purposes. If you

need to search for a stock photo related to a general topic (e.g. nursing, calendars,

emergencies, storms), you may do so at http://thinkstockphoto.com. Search

thinkstockphoto.com for the photo you would like to use, then e-mail [email protected]

with the photo item number and we will respond by downloading the image for you and

sending it to you through e-mail as soon as possible.

CROPPING PHOTOS Before you upload photographs to the website, you’ll want to resize them to the exact size

that Drupal requests using www.picmonkey.com

1. Open Picmonkey in your web browser (e.g. Firefox, Internet Explorer, Chrome).

You will need to install Flash Player on your computer.

2. Click “Edit Your Photo”

3. Find the photo on your computer

Page 37: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

37

37

4. A preview of your photo will appear. Click the Crop button.

5. There will be a No Fixed Proportions dropdown menu. Below it, there are two

boxes that say Actual Size. Type in the dimensions for the size you need to crop.

For example, when cropping a spotlight photo, the size is 192 x 175 pixels.

6. After you type in the proportions click the Scale Photo check box.

7. A box will appear on your photo. Click and drag the circular handle bars on the

edge of the box to grab the part of the photo that you want to crop.

8. Click Apply

9. On the bottom left side of the browser, click the Save button.

10. Name your photo (using loyola’s file naming standars, e.g. loyola-university-

new-orleans-test-photo) and click Save Photo. You’ll save your photo back to

your desktop and upload it to Drupal.

UPLOADING PHOTOS When uploading a photo to a page, you do not need to worry about cropping the photo

before uploading it. But you will want to follow the guidelines outlined in Section VI of this

training guide Naming Photos and File Attachments for Maximum Searchability before

uploading your photo to the website.

Click on the Insert/Edit Image icon in your editing palette.

An image properties window will appear.

Page 38: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

38

38

Click on Browse Server. A new window will appear that will show you all of the images

that have been uploaded on the server for this website.

Click upload to upload a new photo from your computer. Browse your computer and find

the image on your computer then click Upload. When the browser has completed the

upload a preview of the image will appear in the lower right corner of the file browser box.

Click on the preview of the image.

Page 39: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

39

39

When you click on the image, you will be brought back to the Image Properties window. If

you click on the preview box in image properties, the image will appear.

At the top of the image properties window, a URL address will appear. This is the location

of the copy of the image you uploaded on the server. Underneath that text field, is the

Alternative Text field. Alternative text (also called alternate text or alt text) allows people

who are visually impaired read your web page using a screen reader machine attached to

their computer. You’ll want to type a sentence that describes the image you uploaded in the

alternate text field. In addition to assisting the visually impaired read your web page, you

Page 40: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

40

40

are also improving the searchability of your website. If the image is unable to be loaded

properly on the page, the alternate text will appear in its place. Google and other search

engines take this into account when calculating where your page will fall in a listing of

search results.

You may use the image properties window to adjust the width and the height of the image.

We generally recommend that an image in the body of your page be no larger than 350

pixels in width on the page. Please use your best judgment on how the image looks on the

page.

You should not add a border to the image, which would apply a black frame around the

picture.

HSpace (horizontal space) will add space either to the left or to the right of a photograph,

so that if the image appears next to a paragraph of text, the text won’t bump up against the

image. VSpace (vertical space) will add space either to the top or bottom of a photograph.

We generally recommend between 5 and 10 pixels of HSpace around the photograph.

Generally, there is no need to use VSpace.

To allow text to run around the image you’ve inserted on the page, you can align the image

to the left or right of text.

Page 41: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

41

41

Click OK from the Image Properties box, and the image will be inserted on your page. If you

want to return to the image properties box after the image has been inserted, right click on

the image and select Image Properties and the editing box will return.

If you want to delete the image from the page, simply click on the image and then click the

Delete button on your keyboard.

When uploading a photo as a header image or to a spotlight, you will want to crop your

photo to the exact size requested by Drupal. You will save yourself a lot of time by cropping

your photos to the correct size before you begin adding images or creating spotlights and

header images. The various image sizes requested by Drupal are as follows:

Body Images: Any size you want. We recommend something smaller than 350 pixels wide. Bio Images: 220 x 220 pixels Header Images: 710 x 200 pixels News Item: 90 x 90 pixels Photo Gallery Photos: The photos should be between 450 x 300 and 640 x 480, but the photo gallery feature will re-size the photo for you if it’s larger than that. Spotlight Feature: 192 x 175 pixels Spotlight Generic Photo: 220 x 220 pixels Spotlight News Story: 75 x 75 pixels Spotlight Quote: 220 x 220 pixels

As mentioned earlier when discussing uploading photos to the body of a page, you will

want to follow the guidelines outlined in Section VI of this training guide Naming Photos

and File Attachments for Maximum Searchability before uploading your photo to the

website.

Also, when uploading a photo to a header image or a type of spotlight, always enter

alternate text when prompted by Drupal to do so.

Alternate text allows people who are visually impaired read your web page using a screen

reader machine attached to their computer. You’ll want to type a sentence that describes

the image you uploaded in the alternate text field. In addition to assisting the visually

impaired read your web page, you are also improving the searchability of your website. If

the image is unable to be loaded properly on the page, the alternate text will appear in its

place. Google and other search engines take this into account when calculating where your

page will fall in a listing of search results.

INTRANET Every website created by the Office of Marketing and Communications is provided a

standard Loyola intranet.

Page 42: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

42

42

The intranet can be found in the grey footer at the bottom of every page on your website.

Intranet pages house important accreditation materials the university uses to seek

accreditation from the Southern Association of Colleges and Schools (SACS). The SACS

review committee reviews materials on all office, college, and department intranet pages

once every six years. The accreditation schedule is 2006, 2012, 2018, and 2024. All policies

and procedures, annual reports, planning and assessment documents with learning

outcomes and other criteria for accreditation must be posted on your intranet page. For a

full list of requirements for your intranet, please consult Loyola’s Office of Institutional

Effectiveness and Assessment at http://academicaffairs.loyno.edu/effectiveness.

WHAT KIND OF PASSWORD PROTECTION IS PROVIDED? There are two types of password protection: intranet protection and meeting minutes

protection:

I. Intranet protection provides any faculty or staff member with a loyno.edu e-mail

address access to the intranet page. This allows administrators and faculty from around

the university to participate in the accreditation process and review each department’s

documents.

II. Meeting Minutes protection provides only faculty and staff in your department access to

the content. The names of the faculty and staff allowed to view a meeting minutes page

is manually updated, so you must provide an updated list to the Office of Web

Communications to have access to this page updated when new faculty/staff join your

department and other faculty/staff leave.

HOW DO I ADD INFORMATION TO MY INTRANET? Once you’ve created the content that you want to display on your intranet and password

protected it. You can add the content to the intranet by creating a link to it from the

intranet page.

1. Copy the URL address of the page you want to link from your intranet.

2. Click on the Intranet link in the grey footer of your website and login to your

intranet using the username and password for your Loyola webmail

3. Edit your intranet page

4. Once you are in the edit mode, create a link to the new content by typing in a word

to link, highlighting the word, click the Insert/Edit Link icon in the editing palette

of the page’s body

5. Paste the URL address and click OK.

6. Save the page.

Page 43: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

43

43

If you are linking a PDF or word document from your intranet page,

1. Click on the intranet link in the grey footer of your website and login to your

intranet using the username and password for your Loyola webmail.

2. Edit your intranet page.

3. Once you are in the edit mode, scroll down toward the bottom of the page and

click File Attachments.

4. Browse to the document you would like to upload to the intranet and click OK.

5. Click Attach.

6. Drupal will show that the document has been uploaded. Below the document

name will be a URL address in small text. Copy this URL address.

7. Scroll back up to the Body of the page.

8. Highlight the word that you want to link to the PDF/Microsoft Word, Excel

document (e.g. the words Faculty Handbook would link to a PDF document of

the faculty handbook).

9. Click the Insert/Edit Link icon in the editing palette of the page’s body.

10. Paste the URL address and click OK.

11. Save the page.

SPOTLIGHTS You can use spotlights to:

Draw attention to a specific section of your website

Sharing content that the reader might not otherwise find

Highlight a person or an event

Adding visual interest to a page

Once you add a spotlight to a page, it appears in the right-hand column of the page.

Regardless of why you choose to add spotlights, it is advised that the length of the spotlight

column does not exceed the length of the main content area.

Spotlights are promotional features that web content managers create to showcase and

guide users toward pieces of related content. The related content may live on web pages on

your website. It may also be content that lives on other websites. Spotlights don’t

necessarily have to direct users to content within your website, but it is recommended to

encourage visitors to explore deeper layers and commit visitors to staying longer on the

site. Loyola University New Orleans offers several ways to spotlight your content through

video, features, news stories, fast facts, quotes, photos with captions, and link lists.

Page 44: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

44

44

Spotlights are made to be updated and changed frequently and easily. Users won’t keep coming back for information unless they see information that’s up to date and regularly changed out. The Office of Web Communications built spotlights with web content managers in mind, so that content managers could easily add graphics onto a web page without the need to request work from the Office of Web Communications each and every time.

Spotlights are a good way to fill out a page that may otherwise be graphically sparse or unexciting. Incorporating pictures, video, and other graphical elements into your content gives visitors various ways to dig deeper into your content.

Spotlights are created independently from the rest of your page. They are a self-contained

item that, once created, can be added to any page that you create or edit. For more

Page 45: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

45

45

information, see the Editing Content and Creating Content sections. You can only choose

one of each type of spotlight to appear on your page, and they appear in a set order (video,

feature, news story, fast facts, quote, generic photo, link list/contact).

FORMAT, STANDARDS, AND STYLE

We use HTML tags to format copy for the web. Different HTML tags dictate how copy appears in your web browser. Body copy is generally tagged with paragraph tags, and headings are tagged with heading tags. Headings are hierarchical; headings tagged with H1 appear large and prominent; headings tagged with H6 appear small and less prominent. We generally only use H1-H4 on Loyola web pages.

Formatting your copy in Drupal is similar to formatting copy in a word processing program such as Microsoft Word. Highlight the text you want to change, and choose a menu option. Drupal will apply the correct HTML tags to your copy.

Page 46: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

46

46

FORMAT OPTIONS

Highlight the text you want to format and choose one of the following options from the Format menu:

Normal (also known as Paragraph): This is the main format option you will use for your copy. Drupal uses Normal format by default; you won’t have to go in and format every paragraph of copy on your page.

Heading 1: Main heading. This heading should only be used once on your page. Your Drupal page title is automatically tagged with H1 so you shouldn’t need to use this Format option unless you choose Hide Header Title on your Drupal page and add a different title.

Heading 2: Informative Sub-heading. This heading can be used multiple times on your page to introduce sections. It is utilitarian, and is used for descriptive headlines such as Admission deadlines, Program requirements, and so forth.

Heading 3: Descriptive Sub-heading. This heading can be used for headlines that emote or market something, such as A tradition of excellence, The world is our blackboard, Back the ‘Pack! and so forth.

Page 47: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

47

47

Heading 4: Link List/Contact heading. This heading is reserved for headlines on link lists and contact information blocks.

The other available Format options are not used because they have not been programmed with a particular style.

STYLE OPTIONS

Certain styles are available for your use as well, which can be applied to pieces of copy to further change how it appears on the page.

Highlight the text you want to change, and choose one of the following options from the Style menu:

Intro text: This style can be used for introductory copy on any page. It displays copy in a slightly larger font.

maroon, navy, green, or gold: This style can be used to provide emphasis through a splash of color for your copy. We recommend using these colors sparingly within paragraphs and never within headlines.

For more information about formatting content in Drupal, see the Formatting Content section earlier in this guide.

Working with headlines

Headlines are an important element of your webpage. Most users will scan only the headings on your page before deciding whether your page is relevant. Well-written and properly formatted headlines can help engage readers and help them find what they are looking for.

HEADLINE CAPITALIZATION

Heading 1: Use Title Case.

Heading 2 and Heading 3: Use sentence case.

Heading 4: Heading 4 is preformatted to be in small capital letters (small caps). You do not need to enter your copy in all caps; the Heading 4 Format option will do the work for you.

HEADLINE PLACEMENT AND USAGE

Headlines should never immediately follow each other; there should be copy following each headline.

Page 48: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

48

48

Headline usage should be consistent. However you decide to use headlines on your site, make sure you use the same pattern from page to page. This not only looks professional but also helps users navigate your site easily.

If you find you need more than three heading levels on your page, your page may appear too visually busy for users. It may also be a sign that you have too much or too many types of content on one page and you need to break it in to multiple pages.

LINK FORMATTING

• Links are automatically formatted to be the right color and style when you create the link. There is no additional formatting required by the user.

• Headline tags should NEVER be links.

There are two different types of links. First is a contextual link, when you’re mentioning a piece of information and connecting users to relevant content. The second type is a link to a whole new page, section of additional pages, or a link to a downloadable file.

CONTEXTUAL LINKS

Contextual links should always be relevant. If you’re talking about how your programs support your mission statement, link those words to your programs and your mission statement. If you’re talking about a registration form, link the words registration form to the downloadable registration form document. This encourages your user to continue exploring your site.

NEW PAGE OR SECTION LINKS

When linking to something important within content such as a page or new section of the website, particularly when there are several pages or sections that need to be linked within content, the name of that page or section should be mentioned (and possibly linked) and followed by a sentence or two describing what the user will find at that page or section. Then it should be followed by another link to that page or section in an action-based sentence. If you are linking to several pages, you might consider using bullet points to delineate them as well.

STANDARDS AND BEST PRACTICES

In addition to the above, the Office of Web Communications offers information on best practices and standards on our Reply All blog and our website on topics such as:

Choosing and effectively using photos

Search engine optimization

Social media

The importance of keeping your website up to date

Writing for the web

Page 49: TABLE OF CONTENTS - Loyola University New Orleans · Drupal Training Guide 7 7 When in Drupal, you will notice that when you navigate to the Faculty and Staff listing page in the

Loyola University New Orleans Drupal Training Guide

49

49

Reply All blog: http://blogs.loyno.edu/webteam/

Office of Web Communications website: http://www.loyno.edu/webteam/policies-procedures-standards/index.html

UNIVERSITY STYLE

The official Loyola University New Orleans Editorial Style Guide outlines style practices specific to Loyola University New Orleans.

Loyola University New Orleans Magazine (LUNOM), Loyola Executive, Loyola Lawyer, and all other official university publications, including the website, follow university style (primarily taken from Webster’s Standard American Style Manual, Webster’s New World Dictionary, U.S.News & World Report Stylebook, and The Little, Brown Handbook). For style questions not specifically addressed in this style guide, consult The Chicago Manual of Style.

The Associated Press Stylebook is followed for all news releases and Loyola at a Glance.

Style guide: http://www.loyno.edu/ia/publications/publications_policy_book/