WYSIWYG and source editing mode

There are two viewing options for the content editor: WYSIWYG and source.

• The WYSIWYG editor is the default and opens when a new page is created. The editor has similar tools to MS word, for example bullet-pointed or numbered lists, hyperlinks and formatting.

• The source editor will allow you to view and edit the underlying html on the page.

It is possible to edit the content entirely through the source editor. This enables much greater control over layout and styling, however it takes more time and can be quite fragile. See our documentation page on Bootstrap styling for more information.

Tip: if you do use the source editor to create html you can validate it online using various tools like the W3C Markup Validation Service.

Embedding images in content

The most common method of embedding images in a webpage is to upload them to the website server and link to them from there. If your image is already uploaded onto the server then proceed to step 6 below.

Tip: prepare you images before you upload them by giving them an easily recognisable name and resizing them to the size you would like them to appear on the page.

1. Click the ‘Image’ button in the WYSIWYG editor to open the ‘Image Properties’ pop-up.
   
   

2. Click ‘Browser Server’ to open the website file manager.

3. In the website file manager, choose the folder you would like to upload the file to and then click the ‘Upload tab’.
   
   

4. You may wish to untick the ‘Reduce Image Size For Web’ checkbox (especially if the images have been resized already).

5. Click ‘Choose Files’ to find the files on the local machine or drag and drop the image into the website file manager.

6. Go back to the ‘Browse’ tab and select the image to embed in the webpage.

7. Set the 'Alternative Text' for the image, which is important for accessibility. Alt text is a short written description of an image, which makes sense of that image when it can't be viewed for some reason.

8. The dimensions of the image can be changed in the ‘Image Properties’ pop-up. For example, if the image should be full-width set ‘Width’ at ‘100%’ and delete the ‘Height’ value. The best setting for images is the "img-fluid" class, which ensures that the image will resize responsively for different screen resolutions. This can be changed in the source editor. For example:

   <img alt="Image Properties Pop-up" src="/images/documentation/createpageimageproperties.png" style="height: 670px; max-width: 600px;">

   Would become:

   <img alt="Image Properties Pop-up" class="img-fluid" src="/images/documentation/createpageimageproperties.png">

Using "figure" elements for images

The following is an example of an image added using the WYSIWYG editor:

A better way of expressing this, which tells search engines a lot more and allows the mark-up to explicitly link the copyright statement/caption with the image, is as follows. This requires manual editing in the source editor:

Which creates the following figure with associated caption:

Embedding media in content

It is possible to embed media like video into content pages, for example YouTube videos.

1. Click the ‘Embed Media from External Sites’ button in the WYSIWYG editor to open the ‘Embed Media Content’ pop-up.
   
2. Fill in the 'Title' field.
3. Insert the URL of the media in the 'URL' field.
4. Adjust the rest of the settings as required.

Embedding PDF documents in content

It is possible to embed PDF documents, or indeed other types of document/file, into content pages.

1. First upload the document to a sensible location using the File Manager. You might create a folder for “documents”.
2. In your content, make a hyperlink on some text, and set the target to the PDF/document. To find out the URL, if you work with the File Manager in a separate browser window, you can grab the relative address of the PDF by selecting the file in “Browse” mode in the File Manager, which then shows the address above, where you can select and copy it.
3. It is best practice to make the hyperlink text descriptive of what will be opened, so hyperlink on "field recording form suitable for printing" rather than on "click here". You can also use the "Advisory Title" attribute of the hyperlink to give descriptive guidance such as "Click here to open a field recording form suitable for printing".
4. For a really fancy result you could prepare a smallish image of the front page of the document, insert that image into your content, and make this image the hyperlink that accesses the PDF (with suitable guidance in a caption and advisory title to make it clear this is what to do).
5. A PDF linked in this way should open in the user’s browser, or possibly a separate PDF reader, depending on their setup, and they will then be able to print it. Other document formats may be downloaded, if they cannot open in the browser.

Creating a table

It is simple to create a basic table using the 'Table' tool in the WYSIWYG editor. Be aware that tables should not be too wide as they do not behave as well on small screens. It is possible to make more stylish tables using Bootstrap classes.

Creating an anchor link

Anchor links enable the user to jump directly to a marked section of a webpage. This can be very useful if the webpage is long.

1. First select the section you would like to be able to jump to and set this as an anchor. Highlight the section and click the 'Anchor' button in the WYSIWYG editor (the image of a flag).
2. Give the anchor a short recognisable name.
3. Highlight the word(s) that will become a link to this anchor and click the 'Link' button (a chain link image) in the WYSIGWYG editor to open the 'Link' pop-up.
4. In the 'Link Type' drop-down select 'Link to anchor in text'.
5. Select the relevant anchor name from the dropdown in 'Select an anchor'.

Putting content into modal popups

Content can be presented in popups if desired, using Bootstrap "modal" elements; ("modal" means the user cannot do anything else until the popup is closed again). Here's the code for a little example, and I've put it in a popup!

Click here to see the source code for the popup in a modal popup!

<p>This is an example of showing content in a popup using a Bootstrap "modal" div. Click the button to try it. (NB this doesn't have to be a button - it can be any link).</p>

<p><button class="btn btn-primary" data-bs-target="#BootstrapTableModal" data-bs-toggle="modal" type="button">Click here to see stuff in a modal</button></p>

<div class="modal" id="BootstrapTableModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Example</h4>
<button class="close" data-bs-dismiss="modal" type="button">×</button></div>

<div class="modal-body">
<p>Here's the content of your new modal. This can be any html content.</p>
</div>

<div class="modal-footer"><button class="btn btn-danger" data-bs-dismiss="modal" type="button">Close</button></div>
</div>
</div>
</div>