Image Properties

Page

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:

Screenshot of Body Editor box with Image Properties button

If you click on that button while an image is selected, this dialog box will appear.

Screenshot of the dialog box that appears when you edit an image

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.

Screenshot of where the alternate text

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:

Screenshot of alternate text box

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:

Screenshot of the image preview box

Next to the preview box, you can find the image resizing settings. Here you can change the image's height and width:

Screenshot showing the image height and width options

If you change the image height and width, its new size will be shown in the preview box:

Screenshot showing the resize preview

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:

Screenshot of the lock aspect ratio button and the revert image size butotn

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:

Screenshot of an image that was stretched by not keeping its aspect ratio

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:

Screenshot of the full size image

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:

Screenshot of the horizontal and vertical space

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.

Screenshot of text wtih HSpace and VSpace added.

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:

Screenshot of text alignment

However, if you set the alignment to left or right, you will notice that the body text wraps around your image:

Screenshot of image aligned to the left

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.

Screenshot of an image with a link

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!

Category: