Skip to main content area Skip to institutional navigation Skip to sub-navigation

Image Formatting

There will be many times when you will need to incorporate an image into a text area of your page.  In that case it is best to follow these best practices to make sure that the image is a supplement to the rest of your page and doesn't distract from your message by interrupting the flow of the information.

Visit the image format pages of the Tips, Tricks & Training section to get more information on how to format your images

Image alignment:

Ballerina - align leftIf your image is small enough to wrap text around, you can align it either to the right or left of your paragraph.  If there is a large amount of text on your page, you can include an image in several different places, alternating between left and right alignment to give your page a balanced look.  Typically, you would not want to have an image on the right and left in the same area of a page because the text content would then be squeezed into the middle area between the images.

Image PaddingBallerina - right align:

Once you have aligned your image to either the right or the left of a paragraph so that the text wraps around it, you will need to add some space around the image, or image padding, to prevent the text from touching the sides of the images.  You may need to play with the amount of space you add to get the look you want.


Image Dimensions:

Most of the sizing and formatting of your images should be done outside of dotCMS to make the best use possible of the space on our servers and to keep your image files organized for the administration of your site.  However, if you have an image already uploaded to your website files and you would like to reuse it with a small modification to the dimensions of the image, you can do that when you insert the image into your content item.

Lightbox Images:

Adding a "lightbox" to your image means that a visitor to your page can click on one of your images to get a larger, more detailed view of it.  You would use this when you have an image that you want to display with larger dimensions, but it doesn't fit neatly into your page.  The lightbox also displays a caption basen on the title of the link you use when you apply the lightbox format, so you will want to make sure you do that.