Important Guidelines for Links
1. LINK TO INTERNAL CONTENT WITH RELATIVE LINKS
To link to pages within your site (internal link), either:
- Whenever possible, use an autocomplete field to search for and select the desired page.
- Type the relative URL (e.g., "/news") into the Link field. Absolute URLs (e.g., "https://yoursite.cloud.duke.edu/news") will break when your site launches at your production URL and should only be used when linking to an external site.
2. CREATE ACCESSIBLE LINKS
Avoid links that say "Read more," "See all," and "Click here" – since this provides no context for where the link is taking a user. Instead, use more descriptive link text, such as "Register for TechExpo" or "View all Events." Learn more about accessible links.
3. LINKS CANNOT OPEN IN NEW TABS
Sites@Duke Pro does not allow links to open in a new tab or window, following web accessibility best practices.
Two Ways to Add Links
1. Add Links via WYSIWYG Editor
1. In the WYSIWYG editor, click the Link icon.
- You can also highlight the desired text or image to be linked, and then click the Link icon.
2. To link to pages within your site (internal link), start typing the name of a page you want to link to and select it from the auto-suggest dropdown.
- For links to list pages, simply enter the appropriate URL (e.g., /news) from the List Page URLs quick guide.
- Using the above methods of linking to internal content ensures you are using the relative URL (e.g., "/news"), and not the absolute URL (e.g., "https://yoursite.cloud.duke.edu/news") that will break when your site launches.
3. To link to pages outside of your site (external link), simply copy/paste the link into the Add Link field.
2. Add Links via Specific Content Blocks
1. For content blocks that have link fields, you will need to add the Link URL. The link can be to another piece of content on your site (internal link) or to a page on another site (external link). Note that there is no auto-suggest dropdown for these fields.
- Internal links: use the relative URL (e.g., "/about"), and not the absolute URL (e.g., "https://yoursite.cloud.duke.edu/about") – so your links will not break when your site launches at your production URL.
- Links to list pages: simply enter the appropriate relative URL (e.g., "/news") from the List Page URLs quick guide.
2. Add Link text which is what the link will say on your site. Be sure to make your link text accessible so that it is clear what you are linking to.
Additional Types of Links
1. In the WYSIWYG editor, click the Anchor icon.
2. In the Anchor Name field, add a short title for your anchor.
- Example: mediabutton
3. Highlight the text you want to link to your anchor. Select the Link icon (see previous steps above) and enter all the characters of your internal link after your main URL followed by the "#" character and the Anchor Name you created in step 2.
- Example: If the URL you want to link to is https://sitespro-userguide.duke.edu/manage-media/upload-media, then use the following to link to your anchor: /manage-media/upload-media#mediabutton
Linking Directly to Image Files
1. In the Media Library, find the Image you want to link to, and click Edit.
2. Click on the Preview link beneath the Image.
3. Right click on the Original Image to open it in a new tab (this action may vary across browsers).
4. In the new tab, copy the URL of the original image. Note that this URL belongs to your content site, so it is only accessible on the Duke network or VPN.
5. In that URL, replace the word "content" with "files" (e.g., change "yoursite-content" to "yoursite-files"). This is now the publicly accessible URL of the original image.
6. Enter this publicly accessible URL in any link field to link directly to the image file.
There are two methods to link directly to files that live on your site:
1. Select from an auto-suggest dropdown:
- In a WYSIWYG editor, select the text you want to link, and click the Link icon.
- In the Add Link > URL field, start typing the name of a file you want to link to (the Name field of the file, not the filename) and select it from the auto-suggest dropdown.
2. Enter URL into a Link field:
- In the Media Library, find the File you want to link to, and click Edit.
- Under the Document heading, click the filename link (e.g., filename.pdf). A preview of the file will open in a new window (this action may vary across browsers).
- In the new tab, copy everything after the ".edu" in the URL – for example: /sites/default/files/filename.pdf.
- Enter this value into any link field to link directly to the file.
Linking to accordions and faqs
Certain content type items do not have their own individual pages and must be linked to in other ways:
Linking to Phone Numbers
To add a clickable telephone link to your site (very helpful for mobile users!):
- In a WYSIWYG editor, select the phone number you want to link, and click the Link icon.
- In the Add Link > URL field, type "tel:+" followed by the desired phone number
- Example: tel:+9195555555"