Last updated: February 9, 2023
Minimum user level: Contributor
This article covers
- How to add an image to your webpage
- How to delete an image
- How to format and position an image
Video tutorial
Watch a short video tutorial or read the step-by-step.
Step-by-step
Some content types allow you to add an image to your content. When you add images to your content, please follow UFV's best practices.
How to add an image
- Place your cursor where you want your image to go.
- Use the Insert menu item and choose Insert file link or image or click on the shortcut image icon in the toolbar. T4 will open the media library.
- Find the image you want to add. Navigate around the folders in the Media categories menu on the left or use the search filter box to find what you are looking for — this is where clear description names come in handy. If you haven't yet uploaded your image to the media library, you can do that here too by clicking the +Add media button.
- To add the image, click the title, the thumbnail, or use the blue drop-down button and choose Select media. Now the image is in your content.
How to delete an image
- Click on your image to select it.
- Press the delete button on your keyboard.
How to format and position your image on your page
If you double-click on the image, you'll see that you have the ability to format your image.
Changing the image size
- The width and height let you change the size of your image. In general, it's best to upload the image into the media library at the correct size, but you can adjust the size here if needed.
- If you change the size of your image, make sure you click the "Maintain aspect ratio" checkbox to prevent the image to be distorted.
Wrapping text around your image
- To wrap text around your image, use the float box. For example, if you want your image to be on the left with the text wrapping on the right, type "left" in the float box.
Adding padding around your image
- If your text is wrapped too tightly around your image, you can add a little padding around the image. The padding attribute lets you choose how much padding to add on all four sides of the image.
- Padding always needs to have four values (top, right, bottom, left) that can be specified in one box. Top is always first, and then the order is clockwise. For example, you might enter:
0 15px 10px 0 — That's no padding on top (you don't need to add a unit when the value is zero), 15 pixels on the right of the image, 10 pixels at the bottom of the image, and no padding on the left.
