University of Oregon

How to Style Images

Aligning the Image

If you want text to sit to the side of your image (rather than being forced below it), you can align the image to the left or right.

  1. Select your image in the editor and either right click and select Image Properties or use the Image button  in the toolbar.
  2. At the bottom of the Image Properties window there is an Align option, you can choose from left or right.
  3. By default, text will go up to the edge of the image. If you want to add some spacing between the image and text, go to the Advanced Tab.
  4. In the Stylesheet Classes field, add the text "image-left" or "image-right", depending on your alignment. If there is already text here, separate the multiple values with a space.
  5. Click OK, your image should now be aligned. If you chose to add padding to your image it will not affect the image in the editor, but it will change on the page.

Re-sizing an Image

  1. Select your image in the editor and either right click and select Image Properties or use the Image button  in the toolbar.
  2. The width and height fields are automatically filled with your image's original dimensions. Change either of these values to re-size the image. If the padlock icon is closed, the porportions of the image will not change. If it is unlocked, changing one dimension will not affect the other.

Additional Styling Options

  • If you want to add your own css styles to an image, you can add them under the Advanced tab in the Styles field (located at the bottom of the window).