table of contents - loyola university new orleans · drupal training guide 7 7 when in drupal, you...
TRANSCRIPT
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
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
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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
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.
Loyola University New Orleans Drupal Training Guide
21
21
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.
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)
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.
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.
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.
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:
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:
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
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:
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.
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
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.
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.
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.
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
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.
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.
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
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.
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.
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.
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.
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
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.
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.
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.
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
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/