| Info |
|---|
Use the information on this page to learn how to update your site’s navigation, page URLs, and manage redirects on your site. |
...
| Info |
|---|
For best practices resources, visit the Getting Started guide. |
On this page
| Table of Contents |
|---|
...
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. |
Linking to PDX.edu Content
When editing your site, you need to use the Drupal Admin backend. This backend starts with the URL of drupal-admin.web.wdt.pdx.edu and is not publically accessible. However, it is a mirror of our publically accessible front-end, which uses URLs starting with www.pdx.edu.
With that, if you ever copy a link (be it a link to a document or a page on your site) while editing your site, the URL will likely start with drupal-admin.web.wdt.pdx.edu. To ensure all links can be accessed by external visitors, always replace drupal-admin.web.wdt.pdx.edu in linked URLs with www.pdx.edu.
Managing Your Site’s Navigation
There are two main ways to manage your site’s navigation: using the PSU Primary Menu or
...
by editing a page. Whichever method you choose, you will have the following choices to make:
Menu link title: the text used in the menu for this page
Description: additional context text that appears on hover
Parent Item: determines the menu structure; <PSU Primary Menu> puts this in your top-level navigation. Choosing anything else nests this item under the selected page.
Weight: helps to reorder the menu items. Ignore this; there is an easier way to reorder your menu.
Things to note:
There are three navigation layers:
Top-level: displays in the white bar next to the search button
Secondary: displays in the drop-down menu
Third-level: displays in the drop-down menu under the secondary navigation
Your site’s top-level navigation can onlybe all direct links with no drop-down navigation, or all have a
...
drop-down menu. This is an accessibility requirement. Follow
...
...
(both drop-down and direct links) if your site has mixed navigation.
...
While you can nest navigation items beyond the third
...
level,
...
they will all display the same as third-level navigation.
If you have secondary menu items with third-level items and secondary menu items without third-level items in a drop-down menu, the secondary items without third-level will always group together to the right of the menu.
Your top-level menu is limited by the amount of space you have. When adding pages to it, review the spacing to
...
check if you need to rename menu link titles so it doesn't look "shoved together".
| Expand | ||
|---|---|---|
|
...
| |
Not all pages have this option. When editing a page that does have this option, you'll |
...
notice a "Menu Settings" |
...
section in the right sidebar of the page |
...
If you have one of those pages, check the “Provide a menu link” box to add the link.
Menu link title is the actual displayed text. Make it topical and focused.
Description is text that appears on hover. It's not required, and is not beneficial for accessibility.
Parent Item helps you build your structure. <PSU Primary Menu> puts this in the top-level. Anything else will place it in a sub-menu under the selected parent. Note: You can only select published pages as parent pages.
Weight determines how high or low your menu item will display in the menu. There's an easier way to do this, though, under "Reordering your menu" on this page.
...
. To add the page to your site’s navigation, expand the “Menu Settings” and select “Provide a menu link” |
| Expand | ||
|---|---|---|
|
Adding to navigation using the PSU Primary Menu
While you can add any page to your navigation menu using this option |
...
, |
...
your site's menu should be for navigating within your site. |
...
Use CTA and Link paragraph blocks to create links to |
...
external resources and documents.
|
...
Menu link title is the actual displayed text. Make it topical and focused.
|
...
|
...
Description is text that appears on hover. It's not required, and is not beneficial for accessibility.
...
Show as expanded - leave this unchecked, by default all our menu items show as expanded
...
Parent Item helps you build your structure. <PSU Primary Menu> puts this in the top-level. Anything else will place it in a sub-menu under the selected parent.
...
Weight determines how high or low your menu item will display in the menu. There's an easier way to do this, though, under "Reordering your menu" on this page.
...
|
| Expand | ||
|---|---|---|
|
...
Reordering your menu
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
Important note: When ordering your sub-navigation, secondary navigation without a third layer of navigation under it will always move to the end of the sub-menu.
...
|
| Expand | ||
|---|---|---|
|
...
Creating top-level links with sub-navigation (from scratch)
Start by creating one of your sub-navigation pages. Alternatively, if you're adding a link in the sub-navigation to what would have been the top-level navigation link, make the top-level page instead.
Add the page to the navigation menu, using the instructions in "Adding to navigation by editing a page" (at the top of this page). Important: the menu link title should be what you want the top-level navigation title to be. This can be different than the page name. Save your page.
Now, follow the instruction in "Adding to navigation using the PSU Primary Menu" to create a new menu link:
The menu link title should be what you want to display in the secondary navigation.
In the link field, type in the page title of the page you just created.
The parent should be the top-level menu item you just created.
Save your changes.
All about redirects
What is a redirect?
A redirect is a way to programmatically tell our system that when someone goes to a specified URL, they should actually be sent to a different URL instead. That way, the old URL (which someone may have saved in their browser or found through an old link) will still get them to the right place.
...
| title | Redirects |
|---|
My site is changing its URL, do I need to make a redirect for every page?
No, you don't! As part of the transition to the new pdx.edu, we are implementing 1:1 URL redirects. You can read more about that in the Redirects for sites changing URLs blog post. There are some instances where you may want to manually create a redirect, mentioned in the blog post. If that's the case, you'll want to use the instructions on this page to create that redirect.
What's the difference between a URL alias and a redirect?
Let's say I have a page on my site: "About Us", and the URL is /../example-site/about-us. However, on my old site, the URL was /../example-site/about-us-0
The /about-us-0 is not a very attractive URL so I don't want to maintain it for the future. As such, I'd want a redirect. That way when a person goes to /../example-site/about-us-0, the URL in the address bar is changed to /../example-site/about-us. The new (more attractive) URL is the only authentic URL for the page.
A URL alias is a way to change the authentic URL for a page (the URL displayed in the user's address bar). Every page comes with a default alias based on the page title, but you can customize that alias using the Managing URLs documentation. It's best practice to have one alias for a page, though you can make multiple redirects.
How to make a redirect
Making a URL redirect is pretty straightforward. It is important to note, though, that you can only make redirects for originating URLs on your own site. You cannot make redirects from other site's pages. You can, however, make a redirect to a different page or site.
To make a redirect:
...
Login to your site
...
In the admin menu, navigate to “Configuration ￫ Search and Metadata ￫ URL Redirects” (pdx.edu/site-name/admin/config/search/redirect)
...
|
Custom URLs
Using Redirects
Redirects are custom URLs on your site that “redirect” a person to a different URL. They’re useful for creating user-friendly URLs for pages with long clunky URLs (such as Google Docs or PDFs) or important pages and documents that frequently change URLs. This prevents you from having to find every place where the old URL was in use; instead, you just need to update the redirect.
To make a redirect:
Use the admin menu to navigate to “Configuration ￫ Search and Metadata ￫ URL Redirects”
Select "Add redirect"
Complete the form:
Path:
...
this is the
...
custom redirect URL.
...
To: This is the new URL (on your site). If it's a page you've previously published, just start typing the page name and you can select it from the list of options. You shouldn't make redirects to pages you haven't published.
...
Redirect status: It defaults to "301 Moved Permanently". That's generally what you should leave it as, but you can change it if need be. Just be sure you understand what the other options are before selecting a different one.
...
Save the redirect, then test it to ensure everything works as intended.
Example 1: Internal Site Redirect
Let's say the Maseeh College of Engineering and Computer Science had an About page with the URL (on their old http://pdx.edu site) of pdx.edu/cecs/about-0
With the http://pdx.edu upgrade, that URL will automatically update to pdx.edu/engineering/about-0
However, the new URL for that page is pdx.edu/engineering/about. We don't want to keep the /about-0 alias, since it's not very attractive. So in this case we want to make a redirect. This is how we would complete the form:
Path: about-0
To: (start typing title of new About page, and select it from the dropdown list)
Redirect status: 301 Moved Permanently
Example 2: Cross-Site Redirect
In this case, the University Policy Library used to be located on the Office of the General Counsel site, with the URL of http://pdx.edu/ogc/university-policy-library
That page is now a fully formed site with a URL of http://pdx.edu/policies . However, the old URL is likely bookmarked for people, so we want to make a redirect for it.
The OGC site has a new URL of /general-counsel, so the old URL is automatically transitioning to http://pdx.edu/general-counsel/university-policy-library . Remember: you always make the redirect on the originating site.
So in this case, we'll want to make the redirect on the OGC site (http://pdx.edu/general-counsel ). This is how we would complete it:
Path: university-policy-library
To: /../policies (you can and should use relative links in redirects, when linking to a separate http://pdx.edu site)
Redirect status: 301 Moved Permanently
Redirects for 404 error pages
What is a 404 error?
A 404 error is also known as a "page not found" error. You get this error when the url you're trying to go to doesn't connect to an actual page. This can be fixed using redirects, though.
When not to make a redirect for a 404 error
That's up to you! Sometimes you have URLs for old pages which don't exist anymore, because the content is no longer relevant. In that case, you may choose to leave the 404 error as is, rather than making a redirect.
Making a redirect for a 404 error page
In some cases, you might already know which pages are going to make a 404 error. You might even encounter them yourself. However, that's not always the case.
Luckily, though, there is an admin page in our system that lets you see which URLs site visitors are going to which are giving them 404 errors. To find your 404 error pages:
Login to your site
In the admin menu, navigate to “Configuration ￫ Search and Metadata ￫ URL Redirects ￫ Fix 404 pages” (pdx.edu/site-name/admin/config/search/redirect/404)
This page shows you all the 404 errors being produced on your site. If you click on "Add redirect" to the right of a listed path, it will take you to the "Add redirect" page with the originating URL path already filled in. You just need to fill in the page you want that URL to redirect to, and make sure you're choosing the right status.
Managing URLs
...
| title | URLs |
|---|
What is a URL alias?
The URLs used you generally see in the address bar are not the actual URLs for your pages. The actual URLs look something more like "pdx.edu/node/123". That's not very user friendly.
...
You’ll note your site URL is already added, you just need to enter the text that follows your site’s URL.
Example: the Policy Library has a redirect for the Prohibited Discrimination & Harassment Policy (pdx.edu/policies/pdhp). They entered pdhp into the Path text box.
Note: you cannot use a path that is already in use, even if the page using the path is archived or in draft mode. You will need to use a different URL or update the URL on the other page to something else, otherwise the redirect will not work.
To: this is the true destination URL.
Redirect status: Leave this as the default.
Do note that redirects sometimes take a few minutes to come into effect; wait a little bit before testing the redirect.
Changing Page URLs
The URLs for each of your pages default to the page title. However, you can customize
...
Updating/Customizing your URL aliases
From the Edit tab of a page
...
the URLs for landing pages and a few other page types. If a page you’re editing has that option, you’ll notice a "URL Alias" option on the right side of the page.
...
When that menu is expanded, there is a checkbox to "Generate automatic URL alias". If you leave this checked, the URL alias will default to the page title. Uncheck that box to create a custom URL alias.
Once the box is unchecked, enter the new end to your URL in the textbox. The new URL must start with a / - the alias is what will show after your site name in the URL structure.
Example: If you are working on the health-counseling site and want the URL for the page to be pdx.edu/health-counseling/about, your alias would be /about.
From the URL alias admin menu
There is also an admin area where you can edit the URL aliases for any pages on your site. Navigate to this area by going to: “Configuration ￫ Search and metadata ￫ URL aliases” in the admin menu.
You can use the Filter Aliases section to find aliases with specific text in them.
To edit an alias, click "Edit" to the right of the alias.
Existing system path is the actual page the alias is associated with. You'll notice it shows as /node/### - that's the true URL for the page.
If you want to make this alias associated with a different page, you can find the node in the address bar when editing a page. When you edit the page, the true URL (with the node number) displays.
Path alias is the alias you want. use the format /end-of-URL - with that section being what displays after your site name in the URL.
Important notes
You cannot use top-level URLs as an alias
Our URLs are structured as: http://pdx.edu/ top-level/page-name. You cannot have the same end URL as a top-level page/site URL (the text directly after the http://pdx.edu/ ).
For example, http://pdx.edu/research exists. So you cannot have a page with an end URL of "research" (i.e. pdx.edu/health-counseling/research). Instead, you have to have a unique end URL, such as pdx.edu/health-counselg/our-research.
You cannot make aliases for other sites
The URL aliases you make will always associate with your site. You cannot make an alias that would connect the page to a different site.
Fixing it when the alias you want to use is in use on a different page
...
Provided the page you’re editing has that option, follow these instructions to customize the URL:
Expand the URL Alias menu
Deselect “Generate automatic URL alias” - this is the option that defaults the URL to the page title.
Enter the new end to your page’s URL; this is just the text that appears after your site’s URL starting with a forward slash.
Example: you want your page titled About Us (defaulting to /about-us) to just end in “about”. You would enter /about for the URL alias.
Please note: your URL Alias cannot end with the same text as a site URL or top-level page. For example, pdx.edu/research (site) exists, as does pdx.edu/transfer-student (top-level URL). So you cannot create a custom URL that ends in /research or /transfer-student.
Making Anchor Links
An anchor link is used to "jump" a site visitor to a specific section of a page. These are useful in long or text-heavy pages where scrolling through the page to find the correct section would be tedious for the visitor. There are two main steps to making an anchor link: making the anchor and making the anchor link.
The anchor is the end destination, where you want to link to bring the visitor. The anchor link is what the visitor selects to navigate to the anchor - this may be on the same page or on a different page.
Step 1: Make the anchor
Log in to your site and navigate to the text block where you want to insert the anchor. Remember: the anchor is the end destination.
Place your cursor at the start of a paragraph or heading where you want the anchor to exist.
Select the “insert HTML” option - this is in the editing menu for all text blocks and looks like a document with HTML superimposed on the icon.
To create your anchor, enter the following text into the HTML snippet: <div id=“anchor-name”></div> - you will want to replace anchor-name with the actual name of the anchor. Things to remember:
No spaces should be in the anchor name as it is part of a URL.
Capitalization matters - if a letter is capitalized in the anchor, it will need to be capitalized in the anchor link.
Keep the quotation marks on either side of the anchor name in the HTML snippet.
Note: Drupal sometimes automatically adds an additional set of quotation marks when the page is saved; anchors will not work with two sets of quotation marks. If your anchor is not working after saving, check if there are extra quotes around the anchor name. If so, remove the spare set and re-save the page.
Select the checkmark to the right of the entry area to save the HTML snippet - if you do not select the checkmark the snippet will not save and the anchor will not work.
Save the page.
Step 2: Make the anchor link
Log in to your site and navigate to where you want to make the anchor link. Remember: the anchor link is what the visitor selects to navigate to the anchor location.
Create a link as you would make any other link, with these modifications:
If the anchor is on the same page as the link, use #anchor-name as the link URL. Be sure the anchor name is identical to the one used in the anchor.
If the anchor is on a different page than the link, add #anchor-name to the end of the URL for the page where the anchor exists when making the link.
Save the page, then test the link to verify it works as intended.