QRG: Adding Images, Files and Links in the WYSIWYG Editor

Size: px

Start display at page:

Download "QRG: Adding Images, Files and Links in the WYSIWYG Editor"

Charlotte McCarthy
6 years ago
Views:

1 QRG: Adding Images, Files and Links in the WYSIWYG Editor QRG: Adding Images, Files and Links in the WYSIWYG Editor... 1 Image Optimisation for Web use:... 2 Add an Image... 2 Linking to a File... 4 Adding Links to Pages... 6 To add a link to an address... 6 To add a link to an external website... 7 To Add a Link to another Page within the Same Website... 8 Anchors the exception to the rule... 9 To add an Anchor: a link to another part of the same page... 9

Image Optimisation for Web use: The advantage of adding images in the WYSIWYG Editor is that you have maximum flexibility with image placement in the page; however, it does not resize the image for

2 Image Optimisation for Web use: The advantage of adding images in the WYSIWYG Editor is that you have maximum flexibility with image placement in the page; however, it does not resize the image for you as the Images tab does. Therefore, before you upload an image you need to use photo editing software to resize the image and save as a jpg file. Reducing the image to the actual dimensions that you want on your page will at the same time reduce the number of pixels, and the file size, (amount of bytes); this is important as it makes loading the image on the page faster, (particularly important for optimal user experience). There is much information about this on our online help function, and the internet, but as a general rule: 1. Resize the image in photo editing software and save to your computer. 2. Keep images to less than 100 Kilobytes. Add an Image 1. Once you have resized your image open up the Record Form so that you can edit the Detailed Description field, (which is a WYSIWYG Editor) Add and highlight some text where you want to place the image, then click on the image icon. A pop-up box will appear. NB: The text will be replaced. 2

Once the file name appears next to the Choose File button, click Send it to the Server.

3 If you want to upload an image that is stored on your computer: 2. In the Image pop-up, select the upload tab Click Choose File and select the file from your computer. Once the file name appears next to the Choose File button, click Send it to the Server. When it has uploaded, the pop-up box will open the Image Info tab automatically. 3. Select alignment and click OK. NB: Changing the dimensions in the Width and Height fields changes the image display size, but does not reduce the file size. Remember resize in photoediting software first! 3

4 Linking to a File The following procedure is for documents already uploaded in the Document Repository. 1. In the WYSIWYG editor, highlight the text that you want to turn into the document link and click on the link icon. A Link pop-up window will appear 2. Select the Target Tab In the Target drop-down field, select the popup window or new window option so that your document will open in a new window. Do NOT select OK!! Instead, select the Link Info tab. You should be in the Link Info tab 3. In the Protocol drop-down field, select <other> Click on Browse Server A window will appear 4

Select the Browse Documents tab, which displays the Document Repository 4. Click on the directory and document you want to link to Click Select This will bring you back to the Link Window.

5 Select the Browse Documents tab, which displays the Document Repository 4. Click on the directory and document you want to link to Click Select This will bring you back to the Link Window. The URL field is now populated. 5. Select <OK. This will bring you back to the WYSIWYG editor. Save your work, and check that your link works in either the Preview tab or the front end. 5

Adding Links to Pages This quick reference guide is dealing with adding links directly into the WYSIWYG Editor, so that you have flexibility over their placement.

6 Adding Links to Pages This quick reference guide is dealing with adding links directly into the WYSIWYG Editor, so that you have flexibility over their placement. There are several different types of links that you can add, however they all have 3 steps in common: Highlight the text that you want to replace with a link and select the link icon. Identify the destination URL using the pop up boxes Save and check your link in the Preview Tab or front end. To add a link to an address 1. In the WYSIWYG Editor, highlight your text and select the link icon, the Link popup box appears: 2. From the Link Type drop-down, select Complete the Address and Message Subject fields. 3. Select OK and check that it works. 6

7 To add a link to an external website 1. In the WYSIWYG Editor, highlight your text and select the link icon, the Link popup box appears: 2a. Select the Target Tab In the Target drop-down field, select the popup window or new window option so that your document will open in a new window. Do NOT select OK!! Instead, select the Link Info tab. 2b. From the Protocol drop-down, select the appropriate option, (see notes) In the URL field, type in the URL of the website you want to link to. Select OK and check that it works. Protocol Definitions: This is the very beginning of the URL and means something! regular website secure website, encrypted, (e.g. banking sites) ftp:// A directory of files or an actual file available for download news:// a news group file:// A file located on your hard drive or some other local drive <other> A different location within your website 7

In the Browse Frontend window, navigate to the page that you would like to link to.

8 To Add a Link to another Page within the Same Website After completing step one, the Link pop-up box appears: 2a. Click on Browse Server A browse window will open 2b. In the Browse Frontend window, navigate to the page that you would like to link to. Click on Select & Close at the top of the window. The Link pop up will appear again. 2c. The Protocol and URL fields are now populated; when your site goes live they will be updated to the new URL automatically. Click on OK and test. 8

9 Anchors the exception to the rule Every rule has its exception, and for adding links, the exception is the Anchor. An anchor is a link to another part of the same page; a typical example would be Back to Top clicking on this would take you to the top of the page. The process for adding an anchor has 4 steps: Create the anchor Highlight the text that you want to turn into a link and select the link icon. Link the text to the anchor Save and check your link in the Preview Tab or front end. To add an Anchor: a link to another part of the same page 1. Place your cursor in front of the text you want the link to land on, for example, the top of the page and click on the Create Anchor Icon: The Anchor Properties box will appear. Give your anchor a short & simple name that you will remember easily Click on OK 9

The anchor icon now appears in the WYSIWYG Editor Step 2: Highlight the text that you want to link to the anchor, and select Link icon, a pop up box will appear.

10 The anchor icon now appears in the WYSIWYG Editor Step 2: Highlight the text that you want to link to the anchor, and select Link icon, a pop up box will appear. Link type link to anchor in the text 3 In the Link Type drop-down field, select Link to anchor in the text. In the By Anchor Name drop-down field, select the anchor name. Click on OK Save your work and test in the Preview Tab or the front end. 10

QRG: Using the WYSIWYG Editor

WYSIWYG Editor QRG: Using the WYSIWYG Editor WYSIWYG stands for What You See Is What You Get. The WYSIWYG Editor is the reason you don t need to be an IT Programmer to write content for your web page.