How to add images/photos to any website content
Want to add a graph to a summary of your research? Or perhaps you want to add a banner to an announcement you've created? This tutorial will show you everything you need to know about adding images to your content. This tutorial is broken up into four parts: basic image uploading, adding alternate and title text, editing your image with WYSIWYG, and linking to your image. Let's get started!
Step 1: Basic Image Uploading
Find the image uploader located below the body text editor:
Click on the "browse" button and look for the image you would like to upload. Then select your image. You may want to double check that your images have a compatible file format. Images can be png, gif, jpg, and jpeg.
Click "open" to select your image. The filename will be displayed by the "browse" button. Click on the "upload" button (outlined in red below) to upload your image:
Repeat this process for all the files you would like to upload. Your uploaded images should look like this (click for larger image):
Congratulations, you've successfully uploaded your image(s)! You're almost ready to insert them into your body text. Now we're on the last step: adding a description of your image into the "alternate text" and "title" boxes.
Step 2: Alternate and Title Text
You will notice that each uploaded image has two text fields: alternate text and title.
Alternate text is a description of your image that will be read by screen readers. Good alternate text will describe the medium of the image (e.g. photo, screenshot, chart, etc.) and will give a brief description of the image itself. Example: "Soybean field."
Note: It is not necessary to add "Image of" or "Photograph of" at the beginning of your alt text since screen readers will already indicate that for users.
Your title text is the text that your site visitors will see when they hover their mouse over your image. Title text does not have to be as descriptive as the alternate text.
Here is the Luggage logo with alternate text:
Inserting your image into the body text is simple. Click the "insert" button next to the image filename. The image will be inserted at the location of the cursor in the body text editor.
Now your image should be added to your body text. If you are unsatisfied with the position of your image within the body text, you can click and drag it to a new location in your body text.
You may notice that your image has been resized to smaller dimensions. That is because images over 300 pixels wide are automatically resized to have a width of 300 pixels when they are inserted into WYSIWYG. We will go into more detail on this in the next section.
Step 3: Editing Your Image with WYSIWYG
Now that you've successfully uploaded and inserted your image, it's time to utilize the image editing settings that WYSIWYG gives you. Before we get started in this section, it should be noted that the WYSIWYG editor only works for images in the body text itself. If you link to an image, it will be shown in its original format.
Let's take a look at the available functions by double clicking the image or selecting the little image button 
in the editor:
First, you'll notice that the alternate text you entered in the file information area appears in the first text box in the menu. Next, you'll notice that your image appears in the "preview" box, along with some preview text taken from Lorem Ipsum.
Another thing that you may notice is that there are two boxes labeled "width" and "height." Next to these text boxes are two icons: a lock and a circular arrow. The width and height boxes alter the size of your image in the body text:
If the lock is in "locked" position, it means that altering either the height or the width of your image will maintain aspect ratio. This means that if you change the height, the width will change proportionally. If the lock is in the "unlocked" position and you change the height or width, then your image will not maintain its aspect ratio.
Clicking on the circular arrow will revert the image to its original size. Remember: images are automatically resized when they are inserted into WYSIWYG if they are over 300 pixels wide. You can quickly override this by clicking on the circular arrow. Be sure to preview your page with your image on it to make sure that your image is the size that you want. Here's an example of what the Luggage logo would look like on this page if it were at its full size. Yikes!
Next, there are HSpace and VSpace, which creates padding around your image:
HSpace is short for Horizontal Space and it controls the padding to the right and left of the image. VSpace means Vertical Space and it controls the padding above and below the image.
Most images look best with an HSpace and VSpace of 5. To give an exaggerated example of image padding, here is the luggage logo with 50 pixels of HSpace and VSpace:
Another function in the WYSIWYG image editor is image alignment. You can choose to either left- or right-align your image:
When you change 
the alignment of an image, your body text will automatically wrap around it. If you align your image to the left or right, be sure to use some HSpace and VSpace or the text will crowd the image too closely. Click here for an example.
To the left is an example of the Luggage logo with 5 pixels of HSpace and VSpace, scaled to 100x100, and left-aligned.
The last function in the WYSIWYG editor is the "Link" tab, which you can find at the top of the dialog box. This tab is an easy way to link your image to a URL. Click on it and you will be brought to this view:
Next, copy the URL of the site you want to link your image to and paste it in the box. If you want to link to another page on your site, delete your URL up to the first backslash. To link the Luggage logo to Luggage Documentation website (http://www.biology-it.iastate.edu/luggage_doc/), you would change the URL to the folllowing:
The other thing highlighted in this screenshot option is the ability to change where your link will open. If you choose no options, your link will open in the same window/tab as the website.
Here is the Luggage logo with the link settings shown above. Notice how it is linked to the Luggage documentation site:
After you are done using the WYSIWYG editor, click the "OK" button to save your changes. As mentioned above, be sure to double-check your changes to make sure that your image looks nice.
Step 4: Linking to Your Image
The last thing left to learn is how to directly link to your image. First, go to where your image is uploaded.
The direct link to your image can be found where the filename is, boxed in red in this image:
Right click your filename and select "Copy Link Address" from the menu.
If you are directly linking to the original image in your body text, remember to delete the URL up to the first backslash. Directly linking to the Luggage logo image would look like this:
With this shortened URL, you can either link to your image by embedding it somewhere in your body text or by linking it an image in your body text. You can look at the tutorial about files to learn more about adding links to your body text.
Congratulations! You have uploaded an image.
Now that you've learned how to add images to your Luggage site, you can add all the charts and graphs that you need to properly represent your research. Or you can update your picture in your public profile. You can even add a banner image to an announcement. Hopefully, this tutorial answered all of your questions.
If you have questions about this tutorial, please contact Ann Greazel by emailing websupport@iastate.edu.