Page Comparison

Tables should only be used for tabular content, never for visual layout. Tabular content is written content that has a clear header row or column. 

To make a table, click select the Table button and complete the Table Properties popup. Things to include:

• Select a header row or column in the Headers dropdown. This is a component of accessibility as it helps a person using a screenreader navigate the table.

• Change the table width to "100%". This makes the table responsive to devices of different screen sizes (you don't want a fixed width). 

Important notes:

• Tables can be added to any text block, but they should only be used in the the “Text: 1 Column” block. They don’t display correctly in other blocks.

• Links should never be added to a header row or column as the color contrast between the background and the linked text is not sufficient for accessibility purposes. 

You can set a Focal Point so one section of your image will always be visible, no matter which paragraph it’s used in, or your visitor’s screen size. To set a focal point:

On a newly uploaded image

1. After uploading the image, a thumbnail of the image will appear.

2. Click Select and drag the crosshairs on top of the thumbnail to change the focal point.

3. Save your changes.

On a saved image

1. Use the admin menu to navigate to “Content ￫ Media”.

2. Select the image you want to edit, to open the editing screen.

3. Click Select and drag the crosshairs on top of the image thumbnail to change the focal point.

4. Save your changes.

A few things to note

• Each image has only one focal point, so the set focus will impact every location on your site where the image is used. 

• You can preview the new focal point by selecting “Preview” beneath the image thumbnail, before saving your changes.

Our site does not have the bandwidth to host videos on the site itself. As such, your videos must be hosted externally using programs such as YouTube. To upload a video:

1. Use the admin menu to navigate to “Content ￫ Media ￫ Add Media ￫ Video Embed” to access the video embed form.

2. Enter the remote video URL. Supported resources are YouTube and Gfycat.

Getting the Remote Video URL for YouTube

1. Navigate to the video you want to embed.

2. Click Select the Share link under the video.

3. Copy the URL in the popup.

Getting the Remote Video URL for Gfycat

Gfycat is best used when uploading your own videos to turn into gifs. These can then be used in large and small hero headers and other blocks to give video snapshots that auto-play.

1. Navigate to the gif you want to use.

2. In the right-sidebar click the select “Copy” button (it looks like a piece of chain).

You can embed videos in Text paragraphs using the standard formatting options.

Alternatively, there are two other paragraphs that allow you to embed a video instead of an image:

• Header: Large Hero

• Feature: Content with Media

To use embed a video in either of those blocks, click on select "Add Media" as if you are adding an image. In the pop-up, there is an option for "Video Embed" in the left sidebar.

Since documents change over time, and the URL for a given document changes every time the document is updated, the best practice is to [create a redirect] to the document. That way the redirect is the only thing that needs to be updated when the document URL changes; visitor bookmarks and existing links would still use the same redirect URL.

When making the redirect, you’ll need the document URL. Use these instructions to get the document URL:

1. Use the admin menu to navigate to “Content ￫ Files”.

2. Find the file you want, either by using the search of by manually looking for it.

3. Open the options menu. Using a mouse and keyboard: Right-click (PC) or ctrl+click (Mac) on the file name to open the options menu.

4. Choose "Copy Link Address", "Copy Link URL", or whichever similar verbiage your browser uses.

To add a new iframe:

1. Login to your site and navigate to the page where you want to add the iframe.

2. Add a new Text: 1 Column paragraph to the page.

   • It's best practice to have the iframe in its own block so it's easier to move around and manage.

3. Select the the iframe menu item in the formatting menu (it looks like a world).

4. Complete the popup window. A few notes:

   1. URL: this is not the full iframe embed code, just the URL extracted from that code.

   2. Width can be set to exact numbers (eg. 600px) or percentages (eg. 100%); height can only be set to exact numbers. You may need to play around with sizing to get the desired fit.

5. Click Select Ok to close the pop-up; in the edit page the iframe will show as a box with the words iframe in it. It will display appropriately when the page is saved.

You can embed a Google Calendar using an iframe. However, there are a few added steps you need to take, to ensure the calendar is accessible:

1. On a computer, open Google Calendar. You can only get the code to embed in your website from a computer, not the Google Calendar app.

2. In the top right, click on select the Settings menu (it looks like a gear) and then Settings.

3. On the left side of the screen, click select the name of the calendar you want to embed.

4. Click on Select "Integrate Calendar" in the menu that expands under the calendar name you selected.

5. Copy the "Public URL to this calendar" section URL. For example, the Public URL to my 1:1 help calendar is: 
   https://calendar.google.com/calendar/embed?src=pdx.edu_p6hjlahv1gsmk0e8g6oereldh4%40group.calendar.google.com&ctz=America%2FLos_Angeles

6. Open some kind of text editor and paste the URL in it. This is just for temporary purposes so we can edit this URL.

7. Replace everything before src= in the URL with: 
   https://www.google.com/calendar/embed?showTitle=0&showNav=0&showDate=0&showPrint=0&showCalendars=0&showTz=0&mode=agenda&height=600&wkst=1&bgcolor=%23FFFFFF&  

   1. Example: the new URL for my 1:1 calendar is:
      https://www.google.com/calendar/embed?showTitle=0&showNav=0&showDate=0&showPrint=0&showCalendars=0&showTz=0&mode=agenda&height=600&wkst=1&bgcolor=%23FFFFFF& src=pdx.edu_p6hjlahv1gsmk0e8g6oereldh4%http://40group.calendar.google.com &ctz=America%2FLos_Angeles

8. Copy the new URL, this will be used for the iframe.

A few notes:

• When creating the iframe, set the width to 100% and the height to 600px.

• Calendars with appointment slots cannot be embedded; they only display the scheduled appointments, not the available times to book. For appointment calendars, use a call to action to link to the appointment calendar.