Help: Fix Images

This video shows how we can easily fix some common problems with images.

For a better view when playing the video, move your cursor to the bottom right corner and click the little box to enter full screen mode.

The technique we use here is to edit the imgage and in the 'Image Properties' dialog 'Advanced Tab' , add the name of certain classes in the 'Style Sheet Classes' field.

Here are the classes we can use.

  • image-top-left  - as above it puts extra padding on the right and bottom.
  • image-top-right – puts extra padding on left and bottom.
  • image-left – puts extra padding on right, top and bottom.
  • image-right – puts extra padding on left, top and bottom.
  • image-container-top-left - float left, extra padding right and bottom
  • image-container-top-right – float-right, extra padding on left and bottom.
  • image-container-left – float left, puts extra padding on right, top and bottom.
  • image-container-right – float right, puts extra padding on left, top and bottom.

Correction to the Video:  I mistakenly said use image-left or image-right if the image is at the top.  I meant to say use image-left or image-right if the image is in the middle of the text.

Additionally these classes from Bootstrap can be used:

  • img-responsive - make the image resize for small devices. Be sure to remove any height or width settings from the 'Style' field.
  • img-rounded - give it rounded corners
  • img-circle - makes it round
  • img-thumbnail - gives it a little border.

img-rounded and img-circle should be used with img-responsive and remove height/width settings.