Adding Images
Images
Adding images to a page requires two separate steps;
- Adding the image to the Media Library
- Adding the image to a webpage
The first step on adding an image to the Media Library is covered on out Media Library page.
After the image has been added to the Media Library you can add it to a web page. There are two ways to do this in TinyMCE. First you place your curser in the location you would like the image to appear. Then you can select "Insert » Insert Image", or you can use the Media Library icon button.
The next step is to locate the image in the Media Library. Once you select the button to add an image a pop-up window will appear showing the media library. From here you will navigate to the folder where the image is located. The navigation for the media library is located to the left of the screen. The main folder for the media library is called "Categorized". When you expand and open this folder by using the "+" icon it will show a number of additional folder. Images for the SMU website are held in the "SMU5" folder. Continue to navigate to the folder where your images are housed. Make sure the folder where you images are located is highlighted in blue. This means the folder has been selected to show the contents. If it is not blue then it has not been selected. It often takes several seconds for the images in the media library to populate the screen, so be patient while they load.
Once you have selected the appropriate folder you can locate the image you would like to use.
When you click on the name of the image a new pop-up window will appear. In this window you can select the version (shown below) of the image you wish to use on the page. The T4 system will create a number of different versions of an image automatically when it's placed in the media library. In the list that appears the first image is always the original sized image.
Select the version of the image you would like to use and click on the image name. This will place the image on the page for you.
Image Options and Adding Links
Once an image has been added to a page there are some options availabe to re-size, adding, adjust its location, alignment, and padding.
There are two ways to access these options.
1) Right click within the image to pull up the menu to insert a link (shown below). Here you can add a link to the image in much the same way you would do for text. You can link the image to other sections or content within T4, or to an outisde webaite. 
2) Double click within the image to pull up the Set Media Attributes window (shown below). Here you can re-size the image if it's a little too big (you should always size down an image, never try to make it larger than the original). If the image is a lot too big then the best option is to create a variant of the original image and use that variant. Creating a variant is covered in Editing Images In The Media Library section of the tutorial.
You can also add padding and margin (space around the image), and change the alignment in the media attributes. Under Float and Alignment you need to fill in the words for the alignment you wish to use such as "left", "right", and "center". You can also use the standard text alignment buttons in TinyMCE to change the alignment.
If you want to move the image you can simply click on the image and while still clicking drag it to the new location.
Note: This is not always easy so it is recommended that you place your cursor where you will want the image the first time.
Related Information - Using the Media Library »
Next Lesson - Working With Links »