Add Links

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.

Image

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") – so your links will not break when your site launches at your production URL.

Image

Image

3. To link to pages outside of your site (external link), simply copy/paste the link into the Add Link field.

Image

Anchor Link

1. In the WYSIWYG editor, click the Anchor icon.

Image

2. In the Anchor Name field, add a short title for your anchor.

• Example: mediabutton

Image

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

Image

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.

Linking Directly to Files (e.g., PDF files)

There are two methods to link directly to files that live on your site:

1. Select from an auto-suggest dropdown:

1. In a WYSIWYG editor, select the text you want to link, and click the Link icon.
2. In the Add Link > URL field, start typing the name of a file you want to link to and select it from the auto-suggest dropdown.

2. Enter URL into a Link field: 

1. In the Media Library, find the File you want to link to, and click Edit.
2. 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).
3. In the new tab, copy everything after the ".edu" in the URL – for example: /sites/default/files/filename.pdf.
4. Enter this value into any link field to link directly to the file.

Linking to Phone Numbers

To add a clickable telephone link to your site (very helpful for mobile users!):

1. In a WYSIWYG editor, select the phone number you want to link, and click the Link icon.
2. In the Add Link > URL field, type "tel:+" followed by the desired phone number
   • Example: tel:+9195555555"

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.

Image