Page Comparison

Panel

panelIconId	atlassian-info
panelIcon	:info:
bgColor	#FFFFFF

The information on this page is dedicated to written content, documents, images, and videos added to your site.

On this page

Table of Contents

Panel

bgColor	#F4F5F7

PDX.edu support resources

Panel

panelIconId	atlassian-warning
panelIcon	:warning:
bgColor	#FFEBE6

Any content added to a PDX.edu site must be accessible to users with disabilities and follow appropriate legal guidelines. Additional information can be found in PSU’s Digital Accessibility, Digital Privacy, and Copyright policies.

Written content

While most paragraph blocks allow only basic text entry, some allow more complex formatting options. Most of the formatting options are self-explanatory, however, there are a few that require additional information.

Expand

title	Copying written content from other sources

Content copied from external sources such as an email or document will try to keep the original formatting. There are two ways to fix this:

When pasting,

To prevent this from happening, always use ctrl+shift+v (PC)

or command

or command+shift+v (Mac) to paste your written content as plain text.

After pasting, highlight the content and select the T_x button in the toolbar to clear the formatting.

This will ensure your written content follows PSU’s Brand Identity guidelines.

Expand

title	Using headings

Text paragraph blocks allow you to manage your own content headings using the “Format” “Paragraph” dropdown; in most other paragraph blocks the heading structure is set by the paragraph block title.

A few things to remember about headings:

Headings are applied to section titles so visitors using screen readers can "skim" a page to understand its structure and content.
Maintain the appropriate heading structure. Apply Use Heading 2 to for main section titles, Heading 3 is applied to for heading 2 subsection titles, Heading 4 is applied to for heading 3 subsection titles, etc. This pattern also applies for Heading 5 and Heading 6, if you get that far into the heading structure (rare).
Headings should never be used for emphasis; use bold, italics, or block quotes for those options.
Although Heading 1 is shown as an option, do not use Heading 1. That will create severe accessibility issues.

Expand

title	Adding tables

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, select the Insert 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 screen reader 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 “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.

Expand

title	Including block quotes

Block quotes allow you to add emphasis to important content on a page. To add a block quote:

Highlight the text you want in the block quote
Center-align the text
Select the quotation marks in the formatting menu

The block quote text won't look different on the Edit tab. However, when you save the page the text will be larger and a different color/style.

Expand

title	Making relative links

Relative links are links that don’t require the full URL because they link to a page on the same domain (eg. www.pdx.edu) as the source page. Fully external links require the full URL.

On your site, there are three kinds of relative links you can make. These instructions are not all-encompassing, but you can use them as a starting point:

Links internal to your site (for CTA and Link paragraph blocks)

In the URL field, begin typing the page title.
Select the correct page title from the list of options that appears.
- Only published pages will show up in the list of options.

Links external to your site but internal to www.pdx.edu (for CTA and Link paragraph blocks)

Enter the URL into the URL field.
Replace http://www.pdx.edu/ with /../
- Example: /../student-life/campus-life

Relative links in Text paragraphs

In the link popup, select "Other" as the protocol

In the URL, replace https://www.pdx.edu/ with /../.

Example: /../admissions/how-to-apply

use the pop-out to select the number of rows and columns (this can be adjusted later). When working with your table, if you place your cursor in a particular cell, a pop-out will display which has options to work with a column, row, or cell. It also has the option to toggle the table caption on and off.

Things to include:

You must identify a header row or column by placing your cursor into the applicable row or column and choosing the row or column option (depending on your need). Near the top of the list of choices is an option to assign the row or column as a header - toggle that on. . This is a component of accessibility as it helps a person using a screenreader navigate the table.
Tables by default align left. - you are unable to center or right-align your table..
Cells auto-adjust to fit contents - you cannot manually adjust cell widths.
Table widths are capped at the page width - never fear that your content will move off the side of the page; table width expands with added content until the page width is met and then the content will begin wrapping.
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.

Expand

title	Including block quotes

Block quotes allow you to add emphasis to important content on a page. To add a block quote:

Highlight the text you want in the block quote
Center-align the text
Select the quotation marks in the formatting menu

The block quote text won't look different on the Edit tab. However, when you save the page the text will be larger and a different color/style.

Images

Images should be no larger than 1MB (1,000KB). While the site will allow you to upload larger files, once you reach a certain file size the file/image will upload but not function. Additionally, do not use photo editing software to create image collages or add text to an image.

Your pages will display differently depending on your visitor’s screen size (mobile, tablet, desktop). As such, your images will adapt to different screen sizes which means you cannot guarantee the full photo collage or text will always be visible.

Expand

title	Choosing image dimensions

These are approximate sizes, you can go larger but we do not recommend choosing smaller image dimensions. When using an image for a particular block, you’ll want to ensure the image meets these minimum recommended dimensions (in pixels):

Large Hero and CTA: Full-Width Image: 2000x700 (WxH)
Other Blocks: 650x650 (WxH)
Text Blocks: There are no pre-set sizes for images in text blocks. As such, you must upload images that are already customized to the size you want. Some recommended widths are:
- Small: 250px
- Medium: 400px
- Large/Full span: 800px
Event image: 455x325 (WxH)
News Article image: 945x520 (WxH)image: 945x520 (WxH)
For images in text blocks, the image will cap out at the width of the page. However, you cannot customize the size of the image after upload, so make sure you’re uploading an image already scaled and cropped to the desired dimensions.

Expand

title	Upload an image

Use the admin menu to navigate to “Content ￫ Media ￫ Add Media ￫ Image”. A few things to note:

Image names are an important part of SEO. Learn more about image names.
Alt text, added after selecting an image to upload, is an important part of accessibility. Learn more about alt text.

Expand

title	Selecting a focus point for your image

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

On a newly uploaded image

After uploading the image, a thumbnail of the image will appear.
Select and drag the crosshairs on top of the thumbnail to change the focal point.
Save your changes.

On a saved image

Use the admin menu to navigate to “Content ￫ Media”.
Select the image you want to edit, to open the editing screen.
Select and drag the crosshairs on top of the image thumbnail to change the focal point.
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.

Videos

All content on the public-facing PDX.edu website must be accessible to people with disabilities. Accessibility is not only an important part of building a welcoming and inclusive university culture; it’s also PSU policy. This means that all PDX.edu multimedia content must include the following:

accurate, synchronized captions;
an accompanying transcript; and
audio or text descriptions for any visual elements not accurately accompanied by equivalent audio.

These features ensure that people with vision or hearing disabilities can access your multimedia content. It also allows for greater accessibility and usability for those who are second language learners, those with cognitive learning disabilities, or those who are simply trying to watch a video in a loud or distracting environment.

The Digital Accessibility Basic Training Series offers a good example of accessible multimedia content. Note that the narrator provides an audio description of visual information at the end of each video. This is an important practice to emulate when generating new multimedia content.

Expand

title	Captioning & transcription options

Caption Your Own Multimedia Content

Content developers may generate captions and transcripts themselves using video hosting sites like Youtube and Media Space. Both of these services offer machine-generated captions and accompanying editing tools. Please note that machine captions are not fully accessible for people with disabilities and must be edited for accuracy. Follow these steps to caption your own Multimedia content on YouTube or Media Space:

Request Professional Captioning and Transcription

Affordable professional captioning and transcription services are currently available through OIT at a cost of $1 per video minute. Follow these steps to request paid, professional captioning and transcription:

Upload your multimedia content to Media Space.
Submit a Caption Request for PDX.edu Multimedia.
Allow 5-7 business days for your request to process.

Expand

title	Using Media Space captions and transcripts

Currently, you cannot embed Media Space videos on pdx.edu, only YouTube videos. You can, however, download the captions from Media Space and upload them to YouTube. You would then embed the captioned YouTube video and upload the associated Media Space transcript to pdx.edu.

To Download Captions:

Log in to PSU Media Space to access your video.
Select the Actions button.
In the resulting Actions menu, select Edit.
In the resulting Edit view, select the Captions tab.
In the Captions tab, select Download to access the SRT file.
Upload your original video to YouTube.
Add the SRT file to your YouTube video.
- In the provided link, select “Upload a file.”

To Download Transcripts:

Log in to PSU Media Space to access your video.
In the “Attachments tab,” download the .txt file.
After embedding your captioned YouTube video, upload your transcript to pdx.edu and include a link immediately below the video.

Refer to pdx.edu/accessibility for an example.

Expand

title	Uploading videos

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:

Use the admin menu to navigate to “Content ￫ Media ￫ Add Media ￫ Video Embed” to access the video embed form.
Enter the remote video URL. Supported resources are YouTube and Gfycat.

Getting the Remote Video URL for YouTube

Navigate to the video you want to embed.
Select the Share link under the video.
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.

Navigate to the gif you want to use.
In the right-sidebar select “Copy” (it looks like a piece of chain).

Expand

title	Embedding videos

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

Alternatively, there are two other paragraph blocks 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, 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.

Documents

Before uploading a document, ask yourself if it really should be a document. Web content is the easiest kind of content to make accessible, and is easier to update while maintaining accessibility.

Ideally, you should only upload documents if they're intended for print distribution. If you have information that's not intended to be printed, then you consider making it a web page instead.

All documents must be made accessible to users with disabilities prior to uploading the document. You cannot modify the document after upload. To make a document accessible, follow the instructions on the Resources page of the Accessibility site.

If you have questions or need further assistance, you can email help-accessibility@pdx.edu.

Expand

title	Uploading documents

Use the admin menu to navigate to “Content ￫ Media ￫ Add Media ￫ File”. A few notes:

The name the file is saved under on your computer determines the document name; make sure that name is the same as the one you enter in the “Name” field.
The “Summary” field is currently non-functioning; do not invest time in entering a summary.

Expand

title	Linking to documents

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:

Use the admin menu to navigate to “Content ￫ Files”.
Find the file you want, either by using the search of by manually looking for it.
Open the options menu. Using a mouse and keyboard: Right-click (PC) or ctrl+click (Mac).
Choose "Copy Link Address", "Copy Link URL", or whichever similar verbiage your browser uses.

Expand

title	Deleting documents

After you delete a document, it no longer displays in the "Media" section of your site. However, it will take up to a full day for the document to be removed from the "Files" section of your site.

Embedding external content

Content from other sources, such as Google Calendar and YouTube, can be embedded using an iframe. Most programs that allow content to be embedded elsewhere allow you to create iframes which are then inserted into the page’s HTML. Your site has a built-in method to create iframes in the Text: 1 Column paragraph block.

Do be aware that embedding external content is appropriate for stand-alone widgets and elements that supplement PDX.edu content; they are not intended to replicate entire other sites. If there is an existing well-developed external resource, link to that content instead. This is a mutual benefit as it reinforces the connection between content through interlinking and page views.

Expand

title	Make an iframe

To add a new iframe:

Log in to your site and navigate to the page where you want to add the

iframe

.Add a new Text

:

1 Column paragraph block to the page.

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

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

Complete the popup window. A few notes:

URL: this is not the full iframe embed code, just the URL extracted from that code.
The 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.

Select Ok to close the pop-up; on the edit page, the iframe will show as a box with the words iframe in it. It will display appropriately

Login to your site and navigate to the page where you want to add the iframe.
Add a new Text: 1 Column paragraph block to the page if you’re not using an existing Text block.
Select the Insert HTML option in the editing menu (it looks like a document with the text HTML written over it).
Paste the iframe embed code (retrieved from your source content) in the HTML Snippet box.
Select the checkmark on the right of the HTML Snippet box to save the code.
The raw code will display when on the edit page, but will function as intended when the page is saved.

Expand

title	Embedding a Google calendar

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:

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.
In the top right, select the Settings menu (it looks like a gear) and then Settings.
On the left side of the screen, select the name of the calendar you want to embed.
Select "Integrate Calendar" in the menu that expands under the calendar name you selected.
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
Open some kind of text editor and paste the URL in it. This is just for temporary purposes so we can edit this URL.
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
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.

1. .calendar.google.com &ctz=America%2FLos_Angeles
Copy the new URL, this will be used for the iframe.

Versions Compared

Old Version 43

New Version 44

Key

Written content

Images

Videos

Documents

Embedding external content