...
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
Files and images Images should be limited to 2MB (2,000KB). In general, there is no reason for an image to be larger than 1MB (1,000KB). You can While the site will allow you to upload larger files, however once you reach a certain file size the file/image will upload but not function. This limit is in place to ensure all your files will work as intended, while still giving enough room to upload a high quality image or file.
...
Choosing an image
...
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,
...
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.
Use the search/filter section or click through pages to find the image you need to edit.
Click on the file name to open the Edit window for the image.
In the "Alternative Text" box, enter the alt text you want to use.
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.
If the image is in a text block:
Right-click on the image and choose "Edit Entity Image Embed"
In the "Alternative Text" box, enter the alt text you want to use.
Save your changes.
If the image is not in a text block:
Click on the file name to open the Edit window for the image.
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.
In the "Alternative Text" box, enter the alt text you want to use.
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.
...
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 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. |
...