Page Comparison

Choosing an image

Because pdx.edu is designed to be responsive to different screen sizes, you do not want to crop an image to fit into a specific block. Different screen sizes (mobile, tablet, desktop) will display different dimensions and ratios for the image.

As such, you'll want to upload an image that will fit into one of the categories below, to ensure it will display well in all screen sizes. You can then use Focal Point to adjust the focus of the image, to ensure it will always make a certain section visible. However, do keep in mind that each image can only have one focal point. So that focus will be the focus for every block the image is used in.  

Additionally, do not use photo editing software to create image collages or add text to an image. As the image ratio changes, sections of the image will not display, which means the full photo collage or text will not always be visible. Additionally, using photo editing to add text to an image creates accessibility concerns.

Image dimensions

Hero images and the CTA: Full Width Image block are broken out since they require much larger images than other blocks. These are approximate sizes, you can go larger but we do not recommend choosing smaller dimensions. Also, keep in mind the file size limitation (2MB). 

• Large Hero and CTA: Full Width Image: 2000x700 (WxH)

• Other Blocks: 650x650 (WxH)

• Text Blocks: There are not pre-set sizes for images in text blocks. As such, you will need to upload an image that is already customized to the size you want. However, you will need to test your page on different screen sizes to ensure the image and text combination looks good on all screen sizes. 

Uploading images

In the admin menu, “Content ￫ Add Media ￫ Image” will take you to the image upload form. In the form, you have the following selections: 

• Name: Keep this descriptive but short. 

• Image: Click “Choose File” to upload an image. Once the image is selected, you'll have additional options, such as Focal Point and Alternative Text, which are discussed in the next sections 

• Revision Information, URL Alias, Authoring Information: Leave these to the defaults.

• Published: Make sure the checkbox is checked. Otherwise you can’t embed the image.

• Click “Save” when done.

Alt text (Alternative Text)

Alt text is an important component of accessibility. It presents the content and function of an image when the image itself can not be displayed, due to visual impairment or technical difficulties. 

When writing alt text, think of it like an original Twitter tweet: 140 characters or less. It should be short, sweet, and simple. Additionally, you want to think about the purpose and content of the image so you can add equivalent alt text. That’s true for all purpose-based images.

Generally, decorative images use null alt text. However, our system doesn’t allow for null alt text. So for a decorative image, include a very brief description of the image. 

Note: If an image is a link, the alt text must describe the link's function or intended direction. Where's the user being sent?

Adding alt text to an already uploaded image

There are two methods to edit an image to add alt text.

Method 1: Using the Media Folder

In the admin menu, “Content ￫ Media” will take you to the full listing of everything you uploaded to your site.

1. Use the search/filter section or click through pages to find the image you need to edit.

2. Click on the file name to open the Edit window for the image.

3. In the "Alternative Text" box, enter the alt text you want to use.

4. Save your changes.

Method 2: From the page where the image is embedded

Navigate tot he page where the image is embedded. 

Click Edit for that page (to see the Editing view for the page), then click Edit for the block where the image is used.

1. If the image is in a text block:

   1. Right-click on the image and choose "Edit Entity Image Embed"

   2. In the "Alternative Text" box, enter the alt text you want to use.

   3. Save your changes.

2. If the image is not in a text block:

   1. Click on the file name to open the Edit window for the image.

      1. If you are currently editing this page, you'll want to either open the link in a new window or save your changes to the page before following the link.

   2. In the "Alternative Text" box, enter the alt text you want to use.

   3. Save your changes.

Focal Point

Since images can be used in a variety of shapes and sizes, you don’t want to customize your image to a specific size. Instead, you want to upload a high quality image and use Focal Point to set a focus for the image that’s always visible, no matter where it’s used. 

The crosshairs on the image thumbnail is the Focal Point. Click and drag the crosshairs to change the focus. Each image has only one Focal Point, so the set focus will impact every location on the site where the image is used. 

When you’ve selected a new focus, click “Preview” beneath the thumbnail to see how the image will look in different block types. 

Keep in mind, it’s hard to make an image look good in every block, but you can ensure it looks good in the ones you intend to use. You cannot customize the focal point on a per-block basis - it's a one-per-uploaded-image setting. There is one focal point per image uploaded. 

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:

• 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 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 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 in YouTube or Media Space:

• Generate automated captioning in YouTube

   and edit captions in YouTube for accuracy.

• Generate machine captioning in Media Space

   and edit captions in Media Space for accuracy.

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:

1. Upload your multimedia content to Media Space

   .

2. Submit a Caption Request for pdx.edu Multimedia.

3. Allow 5-7 business days for your request to process.

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:

1. Log in to PSU Media Space to access your video.

2. Select the Actions button.

3. In the resulting Actions menu, select Edit.

4. In the resulting Edit view, select the Captions tab.

5. In the Captions tab, select Download to access the SRT file.

6. Upload your original video to YouTube

   .

7. Add the SRT file to your YouTube video

   .

   • In the provided link, select “Upload a file.”

To Download Transcripts:

1. Log in to PSU Media Space to access your video.

2. In the “Attachments tab,” download the .txt file.

3. 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.

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

1. Navigate to the video you want to embed

2. Click the Share link under the video

3. Copy the URL in the popup

4. This is the URL you’ll use in the Video Embed form 

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 “Copy” button (it looks like a piece of chain). 

3. Use this URL in the Video Embed upload form.

Text blocks

There 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 blocks

There are two other blocks allow you to use a video embed instead of an image. Those blocks are:

• Header: Large Hero

• Feature: Content with Media

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". 

Uploading documents

Go 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 link

Documents 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:

1. Go to “Content ￫ Files”

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

3. Right-click on the file name to open the options menu

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

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 documents

Deleting a document

After 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 deletion

If 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.

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.

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 the Settings menu (it looks like a gear) and then Settings.

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

4. Click on "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
      In this example, I've bolded the content I kept from the original public URL.

8. 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:

1. 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.

2. 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.

3. Click on the iframe menu item in the edit bar for the block (it looks like a world).

4. Complete the popup window as follows:

   1. URL: Paste the URL you just created in the previous set of instructions.

   2. Width: 100%

   3. Height: 600px

5. 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.

6. If everything looks right, save your page (if previewing, you'll need to click "Go Back to Content Editing).

At this point, any changes you make to your calendar will be updated on the embedded calendar. To remove the calendar iframe, just edit your page and click on the iframe box, then click the delete key on your keyboard.