The information on this page is dedicated to written content, documents, images, and videos added to your site. All content added to your site must be accessible to users with disabilities and follow appropriate legal guidelines.
Review the EIT Accessibility Policy and the PSU Copyright Guide for more information.
On this page
Table of Contents |
---|
Written content
While most paragraphs 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 | ||
---|---|---|
| ||
Content copied from external sources such as and email or document will try to keep the original formatting. There are two ways to fix this:
|
Expand | ||
---|---|---|
| ||
Text paragraphs allow you to manage your own content headings using the “Format” dropdown; in most other paragraphs the heading structure is set by the paragraph title. A few things to remember about headings:
|
Expand | ||
---|---|---|
| ||
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 the Table button and complete the Table Properties popup. Things to include:
Important notes:
|
Expand | ||
---|---|---|
| ||
Block quotes allow you to add emphasis to important content on a page. To add a block quote:
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 | ||
---|---|---|
| ||
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. In 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 paragraphs)
Links external to your site but internal to www.pdx.edu (for CTA and Link paragraphs)
Relative links in Text paragraphs
|
Expand | ||
---|---|---|
| ||
Anchor links direct visitors to a specific section of a page, rather than the top of a page. Terms you’ll want to be familiar with:
Make an anchor
Add an anchor link to a page Once the anchor is made, link to it by adding #anchorname, replacing anchorname with the actual anchor name, after the URL. Example: pdx.edu/current-student#classesregistration. In this example the anchor name is “classesregistration” and the anchor exists on the Current Student page. |
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 | ||
---|---|---|
| ||
These are approximate sizes, you can go larger but we do not recommend choosing smaller image dimensions.
|
Expand | ||
---|---|---|
| ||
Use the admin menu to navigate to “Content → Media → Add Media → Image”. A few things to note:
|
Expand | ||
---|---|---|
| ||
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
On a saved image
A few things to note
|
Videos
Expand | ||
---|---|---|
| ||
All content on the public-facing http://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 http://pdx.edu multimedia content must include the following:
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 offer 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. Captioning OptionsCaption Your Own Multimedia ContentContent 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 in YouTube or Media Space: Request Professional Captioning and TranscriptionAffordable 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:
Using Media Space Captions and TranscriptsCurrently, 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:
To Download Transcripts:
Refer to pdx.edu/accessibility for an example. |
Expand | ||
---|---|---|
| ||
Note: It's important to use this process to upload your videos. You do not want to upload them directly from your computer as our site does not have the bandwidth to host videos on the site itself. Additionally, if you're planning on using the video in a text block, please skip to the Embedding Videos in Text Blocks instructions below. Go to “Content → Add Media → Video Embed” to access the video embed form: Remote video URL: This is the URL for the video you want to use. Supported resources are YouTube* and Gfycat. Revision Information: Add details if desired, but it’s not needed. Click “Save” when done. Getting the Remote Video URL for YouTube
Getting the Remote Video URL for GfycatGfycat 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.
|
Expand | ||
---|---|---|
| ||
Text blocksThere are two ways to embed a video in a text block. One is through an iframe, and the other is through the video entity embed. If embedding through the Video Entity Embed, make sure you're editing the text block you want to add the video to. Then click the "Video Entity Embed" button in the editing toolbar (it looks like a black rectangle with a right-pointing arrow in it, similar to a "play" button). In the popup, just paste the Share URL of the video you want to embed. If embedding using an iframe, follow the instructions for iframes in the Block Pages documentation. Other blocksThere are two other blocks allow you to use a video embed instead of an image. Those blocks are:
To use a video embed in any of those blocks, click on "Add Media" as if you are adding an image. In the pop-up, there is an option for "Video Embed" in the left sidebar (under "Image"). Click that link. You can then select a video embed that's already been added and click "Insert selected", or directly add a new one by entering the embed URL and clicking "Add". |
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 by your site visitors, then you should consider making it a web page, instead.
If you are certain the content should be a document, you'll need to make sure it's accessible 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.
dsds
Expand | ||
---|---|---|
| ||
Uploading documentsGo to “Content → Add Media → File” to see the file upload form: Name: Keep this descriptive but short. Summary: The site search uses the summary field since it cannot read the contents of a file. Exclude from Search Results: Check this if you don’t want the file included in the site search. Revision Information: Add notes if desired. Click “Save” when done. Getting the document linkDocuments cannot be embedded on pages, instead you create links to them (much like any other link). After uploading the document, follow these steps to get the document URL:
Once you've done that, the URL has been copied and you can use it to make a link on one of your pages. Important note: Making relative links is always best practices when making a link to a http://pdx.edu page or document. To make your document URL a relative link: replace “https://ondeck.pdx.edu/” or "https://www.pdx.edu/ " with /../ in the URL (so the URL starts with "/../site-name/sites/" - for example: "/../student-life/sites/"). For more information, visit the Making Links documentation. Important notes about deleting documentsDeleting a documentAfter you delete a document, it will no longer display in the "Media" section of your site, but it will take 6 hours for the document to be removed from the "Files" section of your site. So after deleting the file, it's best practices to check on the file the next day to verify deletion. Uploading a replacement document after deletionIf you intend to upload a new file with the same URL/file name as a previously deleted file, you must wait 18 hours after initially deleting the file. So best practices would be to delete a file one day, then go in the following day to upload the new file. If there are pre-existing links to the file, update the links so site visitors are aware the the file is pending. Links to documentsMaking a link to a document is essentially the same as making a link to anything else. The only difference is that you need the document's URL. If the document is hosted elsewhere (such as on Google Drive), then you can link to the Share URL for the document. If the document was uploaded to your site, then follow these steps to get the URL:
|
Embedding external content
Google calendars and iframes
...
title | iframes |
---|
...
title | Google Calendars |
---|
Google Calendar vs. Syndication
There are two main ways to display a calendar: Syndication and Google Calendar.
Syndication is the build-in program for http://pdx.edu , which allows you to create calendar events which can be imported to your (and other) sites. This allows events created in Syndication to be shared throughout http://pdx.edu . Here's a calendar of events built using Syndication, to see what it looks like; click on an event to see what individual events look like.
Pros of Syndication:
Events can easily be shared throughout http://pdx.edu sites
Display of calendar and events matches http://pdx.edu
Visitors remain on your site at all times
Cons of Syndication:
Only one calendar per http://pdx.edu site
Must complete Syndication Training to build content
The PSU Google Calendar is a program managed through PSU's Office of Information Technology. You are able to embed a Google Calendar onto pages on your site using an iframe.
Pros of Google Calendar:
No required training (beyond standard CMS training to initially embed the calendar)
Can build multiple unique calendars for different purposes
Cons of Google Calendar:
Does not match http://pdx.edu styling
Can be challenging to embed
Visitors exit your site when viewing events
The calendar you choose is up to you. In general we recommend the Syndication calendar to display events, however if you choose to use the Google Calendar you can do so with some instruction.
Embedding the Google Calendar
Step 1: Get the URL
The Google Calendar is embedded as an iframe. However, there is a unique process to build your iframe URL to ensure it's accessible to all users. Follow these steps to create the URL.
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, click on the Settings menu (it looks like a gear) and then Settings.
On the left side of the screen, click the name of the calendar you want to embed.
Click on "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_AngelesOpen 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&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
In this example, I've bolded the content I kept from the original public URL.
Copy the new URL. You'll need it later.
Note about embedding an Appointments calendar: You cannot embed a calendar that has appointment slots. It will only display the scheduled appointments, not the available times to book. In that instance, you'll want to use a call to action or other link type to link to the appointments calendar.
Step 2: Make the iframe
For this part, you'll need to be logged into your site and on the page where you want to add the calendar. Once that's done, follow these steps:
Add a new Text: 1 Column block to the page. It's good to have the calendar in its own block so it's easier to move around and manage.
Optional: add a Heading 2 with the calendar name or another identifying title to the top of the block. You would then add the calendar (using these instructions) under that block.
Click on the iframe menu item in the edit bar for the block (it looks like a world).
Complete the popup window as follows:
URL: Paste the URL you just created in the previous set of instructions.
Width: 100%
Height: 600px
Click Ok to close the pop-up, then preview the page. Hint: the iframe will show as a box with the words iframe in it. It will not look like a calendar.
If everything looks right, save your page (if previewing, you'll need to click "Go Back to Content Editing).
...
Info |
---|
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 | ||
---|---|---|
| ||
pdx.edu Support Resources |
Panel | ||||||
---|---|---|---|---|---|---|
| ||||||
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 | ||
---|---|---|
| ||
Content copied from external sources such as an email or document will try to keep the original formatting. To prevent this from happening, always use ctrl+shift+v (PC) or command+shift+v (Mac) to paste your written content as plain text. This will ensure your written content follows PSU’s Brand Identity guidelines. |
Expand | ||
---|---|---|
| ||
Text paragraph blocks allow you to manage your own content headings using the Paragraph dropdown; in most other paragraph blocks the heading structure is set by the paragraph block title. A few things to remember about headings:
|
Expand | ||
---|---|---|
| ||
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 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.
|
Expand | ||
---|---|---|
| ||
Block quotes allow you to add emphasis to important content on a page. To add a block quote:
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 | ||
---|---|---|
| ||
When using an image for a particular block, you’ll want to ensure the image meets these minimum recommended dimensions (in pixels):
|
Expand | ||
---|---|---|
| ||
Use the admin menu to navigate to Content → Media → Add Media → Image. A few things to note:
|
Expand | ||
---|---|---|
| ||
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
On a Saved Image
A Few Things to Note
|
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. (Please refer to the Digital Accessibility Policy for additional information.) 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 | ||
---|---|---|
| ||
Caption Your Own Multimedia Content Content developers may generate captions and transcripts themselves using video hosting sites like YouTube and PSU 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 PSU 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:
|
Expand | ||
---|---|---|
| ||
Currently, you cannot embed PSU Media Space videos on pdx.edu, only YouTube videos. You can, however, download the captions from PSU Media Space and upload them to YouTube. You would then embed the captioned YouTube video and upload the associated PSU Media Space transcript to pdx.edu. To Download Captions:
To Download Transcripts:
|
Expand | ||
---|---|---|
| ||
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:
Getting the Remote Video URL for YouTube
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.
|
Expand | ||
---|---|---|
| ||
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:
To 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
PDX.edu is not a file storage system; we are a public-facing website with finite storage space that must prioritize web content and visual imagery. As such, if you regularly upload documents for public consumption, such as meeting notes or general resource documentation, we recommend using a shared Google Drive to store the documents. You can then set the appropriate access permissions on the file itself, and link to the file from your PDX.edu site.
Additionally, 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, review the Accessibility for Non-HTML Content resources in the PSU Help Center.
If you have questions or need further assistance, submit a request for Digital Accessibility Support.
Expand | ||
---|---|---|
| ||
Use the admin menu to navigate to Content → Media → Add Media → File. A few notes:
|
Expand | ||
---|---|---|
| ||
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:
|
Expand | ||
---|---|---|
| ||
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 | ||
---|---|---|
| ||
To add a new iframe:
|
Expand | ||
---|---|---|
| ||
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:
|