Webtools How-to Guide
Article: Inline media
How to...
How to create and manage hyperlinks in the body of an article
In order to create a hyperlink in the body of an article, you should select the text you want to hyperlink and click the Hyperlink Manager button in the text editor toolbar on the Add/Edit Article page: 
In the pop-up window, Hyperlink Manager, you will find a number of fields under three tabs: Hyperlink, Anchor, E-mail.
Under the Hyperlink tab is the URL field, which you will use the most. You can either directly type in the address, or if you want to copy/paste the URL, simply remember to delete the protocol characters http://
By using the Target dropdown you can choose to display this link in the same window, in a new window, or in a new browser tab. You have a number of other options as well.
You can also assign an email address to this link by typing in the address under the E-mail tab.
When you are done with your settings, click OK and you are good to go. Finally, do not forget to Save the article for the changes to be reflected on your actual article page.
Let’s have a look at the preview of this article at the International Institute website design. This is how we display the hyperlink.
Back to top
How to insert images or files in the body of an article using the text editor
You can insert images or files in the body of an article on the Webtools application. To do so, simply place your cursor where you want to place the image or file, then click the Insert Image or File button in the text editor toolbar: 
Here you have options to either insert an image or a file. To insert an image, click Select and select the image file and click Upload.
Accepted file types:
- Images: .jpeg, .jpg, .png, .gif, .bmp
- Files: .pdf, .txt, .doc, .docx, .ppt, .pptx
Now you can right click on the image and click Properties. You can change the size and alignments of the image as you like. You can add a buffer around the image (5px all around is recommended). You can add a Class called Caption to allow for an image caption (the caption text goes in the Alt Text field). Click OK when you are done.
Using this technique, you can add multiple images.
In order to insert a file, again, you click where you want to place it, then click on the same icon; this time select File as a link. Locate your file in the file picker and in the Link Text field right below that, type in, let’s say, Click here to download the file. When you are done, click Upload.
When you right click on this link and select Properties, you see the Hyperlink Manager pop-up window with a number of editing options.
Here you can choose to open it in a new window, a parent window, or in the other ways provided. Click OK when you are done editing. Finally, do not forget to Save the article for the changes to be reflected on your actual article page.
Here is how the inline image and file look on the International Institute page.
Back to top
How to add extra media (audio, image, video) to the body of an article
If you want to embed audio, image, or video files the body of an article, you can do this through the extra media options of the Advanced Media Files section. (Please note that you can embed images in the article body by using the Insert Image or File button of the text editor as well.)
You can see three file types in the dropdown of Advanced Media Files section: ExtraImage, ExtraAudio, ExtraVideo. Let’s try extra video now. Actually all three file types work quite similarly.
First Choose the file, then fill in the Title, Caption and Description fields as you wish. You have an option here to make the video downloadable via the checkbox. Click Save when you are done. Here we have the video saved in our article.
Accepted file types:
- Images: .jpeg, .jpg, .png, .gif
- Videos: .mp4, .mov
For the next step, you should select the embed code, copy it, go up to the text editor, and locate the cursor to wherever you want to embed the video, then type Ctrl + V for Windows to place the embed code. In the pop-up window, paste the code and place it within double square brackets: [ [ ] ] (no space between adjacent brackets or the brackets and the embed code).
To finish this action click Paste.
Here you can see the embed code inside double square brackets in the article body. Do not forget to Save the article to reflect the changes.
Here is how this embedded video looks like on International Institute page. We have the title here, description here, and caption down here in smaller font. And here is our actual video.
Back to top
