Adding and editing content

There are two environments editors are able to update and change their content: WYSIWYG and the in-place editor. The WYSIWYG editor is best for quick edits that are in the main body area or in a one-column layout. The in-place editor allows more layout flexibility and the use of components and more stylization. 

The WYSIWYG editor is accessed through the Edit tab on any page, while the in-place editor is accessed by clicking the “Customize this page” button on the bottom toolbar in your browser.

Note: if you are using a multiple-columned layout (not including the navigation bar) you can only access all columns to edit by using the in-place editor.

Create a new page

1. In the top toolbar, select Manage then Content
2. Select the +Add content link in the top left-hand corner
3. Select the content type you would like to add (usually Basic page)

You will then be brought into a blank template called the WYSIWYG editor (what you see is what you get) where you can start adding content.

Naming a page

Type the name of the page in the title field. Best practice is to keep the title short and easy to remember. It should concisely describe the content on the page (for example, oswego.edu/staff instead of oswego.edu/meet-the-staff).

Note: The URL address of the page is automatically generated from the page title. Google uses words in page titles to crawl through for their search results. If the page is named after content users may be searching for, it will rank higher. The URL is automatically formatted in lower case letters with hyphens between words, for example, www.oswego.edu/test-page. 

Add text

Editors can manually type or copy/paste text by clicking their cursor into the body area. If copy/pasting text from a Word document use the “Paste from Word” button. Formatting from Word is carried over into Drupal and may not display correctly on your site.

Basic features
Drupal has many basic editing features similar to Word or Google Docs including:

• Bold
• Italic
• Bullet and number lists
• Text alignment
• Spell check

The use of these features is similar to other word editor programs like Word and Google Docs. Select the text you wish to change and select the button with the style you want to apply.

Formatting text

Clicking the show/hide tools button (the last button on the right in the top row) opens up a new row of editing options, including the paragraph dropdown where headings can be applied and changed.

Chunking content
If you have a page with a lot of content, we recommend chunking it. Chunking means breaking your content into small, digestible paragraphs, which helps your audience understand and remember the information better. Since users don't usually read a whole page we recommend starting the sections with a short, descriptive heading that will catch the reader's attention while they scan for the information they need.

Using headings
Headings are important for many reasons. They help with page usability, allowing users to find information easily and quickly. Headings are also needed for accessibility and for search engine optimization. Headings can be compared to parts of a book:

• Heading 1 is like a book title
• Heading 2 is comparable to a chapter title
• Heading 3 is comparable to subsections within a chapter

Search engines read HTML and they understand the relevance of heading tags. If you use heading tags appropriately across your pages, search engines will give more weight to text that is inside a heading tag. 

Don't use headings simply to emphasize text. Use bold or italics to highlight or emphasize text within a paragraph. Using headings inappropriately will cause surprise changes to the look of the page if the heading style is modified. It will also counteract any SEO strategies.

Prioritize information
Determine the content hierarchy and the user tasks. What information is most relevant to help users make a decision or to complete a task? Example: if you're advertising an event, what's the most important information? You'd probably want to include the title and a short description of what it is. The next level of important supporting information is what factors into the decision process of whether they'll go or not - most likely the date, location, and cost. These should be placed near the top of the page.

Bullet and numbered lists
Bullets and numbered lists are easy ways to present your information clearly. People often skim over a page instead of reading every word of every paragraph. When presenting three or more items or ideas, organize them into a list. This will help draw a reader's eye. It also helps with accessibility, as assistive technology can alert the user there is a list.  

Add an image

1. Navigate to the page you would like to place an image on, then click your cursor in the area you would like the image placed

2. Click the add media button

If adding a new image

1. Click choose file and find where the image is saved on your computer, then click upload and hit next

2. Name your image and add description text for Alt text
   Note: always fill in alt text for better site accessibility. Users with visual impairments use screen reading devices that don't display imagery but will read a description of the image, which editors fill in through the alt text field. 

3. Click save on the dialogue screen

4. You will then be prompted to a new dialogue screen where you have a few options to adjust the size of the image. You may select the original size, quarter size, thumbnail, or link. (In most cases original is best)

5. When finished click submit

Images from the library
If you already uploaded an image you don't have to re-do the upload process:

1. Click the add media button and select the library tab

2. Choose your image from the Library

3. Click submit

Hint: If your image doesn’t appear, never fear! Chances are there is a caching problem. Please contact the Web Team by emailing digital.services@oswego.edu. We’ll take care of it quickly and get your site back on track.

Styling images
Images can be cropped and resized within Drupal. While uploading the image there is an option to crop. Once the image is placed in the WYSIWYG editor it can be resized, smaller is usually better than larger to avoid pixelation and blurriness. If you click the image four corner squares will appear, click a corner box and resize, it will automatically retain is proportions.

Images can also be placed aligned left or right with a text wrap applied using the styles dropdown menu in the WYSIWYG editor. Click on the image once it's placed and then select image align left/right. The change will not appear in the preview, once the page is saved/published you will be able to see the correct display. 

Tips
Web images should be:

• RGB
• jpg, png, gif
• 72 dpi

Image content
Images should highlight students and faculty in action, avoid posed photos, capture genuine expressions and interactions. Try to avoid large group shots, or when taking a group photo select an individual to focus on. Crop your images to highlight the subject you want the audience to focus on.

Image editor
If you need to resize or edit any photos there are many free tools available, we recommend Pixlr. It’s very similar to Photoshop, and you can download the Essential package for free.

Add a video

1. Select the media icon
   

2. Select the web tab on the top right, and copy/paste the URL of your video, for example, https://www.youtube.com/watch?v=YjyeU_cizUk.

3. Click next, then save.

Note: videos must be uploaded to a video-sharing site such as Youtube or Vimeo. If your office/department doesn't have its own channel please send your video to tim.nekritz@oswego.edu to upload.

Link documents

1. Click the Content tab underneath the menu button in your horizontal navigation
2. Navigate to the files tab
3. Select add file
4. Click choose image and find where it is saved on your computer, then click upload and hit next
5. Navigate to the page you want to add the file to and click the edit tab
6. Type or highlight the text you want to link
7. Click the link to button in the toolbar
8. In the search for content box type a keyword in the document name
9. Under options>target select ‘new window’ to have the linked page open in a new tab or ‘same window’ to layer the new page on top of the current page
10. Click the Insert link button

Note: Only link to PDF or word documents if you expect users to download and print the information. When used digitally, PDFs and word documents must be made accessible in order to be compatible with assistive technology devices.

Add hyperlinks

1. Navigate to the page you want the link to appear on

2. Highlight the words you want to add a link to

3. Click the link to the content button (in the top row)

4. External Link (outside your site)
   Paste the external link in the dialog box and then click insert link 
5. Internal Link (within your site)
   Type a keyword in the name of the page or document you wish to link to and then click the insert link button
6. Linking email addresses
   Type mailto:emailaddress in the link URL box
   Example: mailto:proffice@oswego.edu

7. Under the Options drop-down, select Target, then choose whether you would like the link to open in a new window or the same window

8. Click Submit and then save to apply the changes

Add a table

1. Click cursor where you would like the table to begin

2. Select the show/hide button in your edit tab

3. Click the insert/edit table button

4. Fill in the number of rows (horizontal) and columns (vertical) you would like the table to contain

5. Select insert

6. Fill in table with information

Publish/save a page

After you're finished adding content to your page click the save or publish button on the right-hand side. On the first action, the publish button will make the page live while saving adds the page to the Drupal archive until you're ready to publish it and make it live.

After initially publishing a page you will only have the save option which will update the page in real-time.

HTML editing mode

If you're familiar with HTML and prefer to work in that environment, there's a dropdown menu below the WYSIWYG editor to toggle modes.