Adding and editing content

There are two environments editors are able to update and change their content in: WYSIWYG and the in-place editor. The WYSWIYG 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 WYSWIYG 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 click menu > content
  2. Click on the add content link in the top left-hand corner
  3. Select the content type you would like to add (usually content 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.

Note: The url address of the page is automatically generated from the page title. Best practice is to have a short, easy to remember title that describes the content on the page (oswego.edu/staff vs. oswego.edu/meet-the-staff). Google uses words in page titles to crawl through for their search results, if it's named after the content users may be searching for it will rank higher. The url is automatically formatted in lowercase letters with hyphens in between words- 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

Use of these features is similar to other 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 opens up a new row of editing options, including the paragraph dropdown where headers 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 pieces, which helps your audience understand and remember the information better. Since users don't usually read a whole page we recommend topping off the sections with a short, descriptive heading that will catch the readers attention while they scan for the information they need.

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, 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 don’t often read every single word and skim content instead. Organizing content into lists creates a concise presentation, and your learners will still take in the content even if they skim.

Using headers
Headers are important for many reasons, they help with page usability allowing users to find information easily and quickly, for accessibility and for search engine optimization. Headers should be used similarly to a book:

  • header 1 is like a book title
  • header 2 is comparable to a chapter title
  • header 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 user headers to style text- it can be very tempting to use heading tags to emphasize text but if the header styles were changed you may be surprised with a completely different look, it will also counteract any SEO strategies.

Add an image

  1. Navigate to the page you would like to place an image, 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 readinf 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 through Service Now (Click Employee Service Requests> Website Request Forms at the bottom) and fill out a form noting the error or email kelli.ariel@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 h
ighlight 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, example https://www.youtube.com/watch?v=YjyeU_cizUk.

  3. Click next, then save.

Note: videos must be uploading to a video sharing site such as Youtube or Vimeo. If your office/department doesn't have their 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 or print the information, you should never use pdf/word documents for content you expect your users to read. Often, they aren’t accessible with assistive devices.

PDF files are preferable to Word documents. Even though Microsoft Word is the most popular document creation tool, not all devices have it, making the the content inaccessible to some users, and Word files can contain viruses.

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 content button

  4. External Link (outside your site)
    Paste the external link in the box below and then click insert link 

    Internal Link (within your site)
    Type a keyword in the name of the page or document you wish to link to and then click insert link button
    Linking email addresses
    Type mailto:emailaddress in the link url box
    Example: mailto:proffice@oswego.edu

  5. Under the options>target drop down choose whether you would like the link to open in a new window or the same window

  6. 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 amount 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.