Video created by Iowa State University Extension and Outreach IT
How to utilize the image properties button
The last useable button in the CK Editor toolbar is the image formatting button. If you click on an image and then click on the image formatting button, you will be able to alter the properties of that image. Before you get started here, you may want to read the detailed explanation of how to upload images on the Adding Images tutorial page.
Step 1: Formatting Images
First, let's find where the image formatting button is located on the CK Editor toolbar:
If you click on that button while an image is selected, this dialog box will appear.
Step 2: Adding Alternative Text
At the top of the image properties box is a text box labeled "Alternative Text." This box is usually populated when you upload the image. It is read by screen readers, search engine robots, and it is the text that appears should the image ever break. You can learn more about alternate image text on this Wikipedia page.
The "Alternate Text" field is the same text field that you can find in the file information when your image is uploaded. If you enter text there, you will notice that it is the same as it is in the image properties dialog box. In this example, the text in the screenshot above is the same as in the image information below:
Step 3: Using the Preview box
Now, let's talk about the most prominent feature of the image properties dialog box: the preview box. This will show you what the image looks like within a body of text. You can preview the image's size, alignment, and horizontal or vertical space as it will appear in your body text. Here is where the preview box is located:
Next to the preview box, you can find the image resizing settings. Here you can change the image's height and width:
If you change the image height and width, its new size will be shown in the preview box:
As you can see, the image became larger than in the other previews.
Now, let's look at the two buttons next to the height and width. One of them is a little lock and the other is a circular arrow:
When you are adjusting the size of your image, it is important to make sure the lock is in the "locked" position. It is the button that maintains the aspect ratio of the image. If you resize your image without ensuring the aspect ratio is locked, your image will probably look stretched, such as in the image below:
Sometimes, you may want the image at its original resolution. You should be wary, however, because sometimes the image may be far too large to put the original size on the page, such as in the example below:
Instead of leaving the image size at such a large resolution, I resized it back to 100 x 75.
Step 4: Image Padding
Let's move on to image padding. Below the image width and height, you will find text boxes for HSpace and VSpace:
Image padding is whitespace added to the horizontal and/or vertical area around an image. It prevents the text from running into the image if it is in line with the text (this process will be described later in this tutorial). You can see an example of HSpace and VSpace in action below.
Next, below HSpace and VSpace you can find a dropdown called "Alignment." This will affect the alignment of the image in your body text. The default is not set, which does not make the body text flow around your image:
However, if you set the alignment to left or right, you will notice that the body text wraps around your image:
Step 5: Linking images
The last thing this tutorial will cover is the link tab that can be found at the top of the image properties dialog box.
You will notice that it is linked to the people page of the site this image is located on. This link box operates almost exactly the same as the link button in the CK Editor toolbar. So in the same way, if you want to link to a page on your website, you will need to remove the URL before the first backslash (/). Now you should be well on your way to adding images to your pages!