Page Settings

  • Show menu: true
  • Use horizontal menu: true
  • Show sidebar: right
  • Skip to main content

    Format an Image

    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.


    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.


    Image padding:

    1. Insert an image into the WYSIWYG of a Web Page Content item.
    2. Click on the image to highlight it.
    3. Select the "Insert/Edit Image" button in the toolbar of the WYSIWYG.
    4. In the dialogue box that appears, chose the "Appearance" tab.
    5. In the "Vertical Space" and "Horizontal Space" fields, input a number of pixels that will determine the amount of space around your image.  For instance, if you type in "15" in the "Horizontal Space" field, there will be 15 pixels of white space on the right and left sides of your image.
    6. Continue styling or formatting your image as desired.
    7. Click the "Insert" button at the bottom when you are done.

    Watch the video >>


    Aligning an image:

    1. Insert an image into the WYSIWYG of a Web Page Content item.
    2. Click on the image to highlight it.
    3. Select the "Insert/Edit Image" button in the toolbar of the WYSIWYG.
    4. In the dialogue box that appears, chose the "Appearance" tab.
    5. Choose either "right" or "left" from the "Alignment" drop down.
      NOTE: If you do not get the effect you want, you can experiment with other alignment options or the location in which you are inserting the image. 
    6. Continue styling or formatting your image as desired.
    7. Click the "Insert" button at the bottom when you are done.

    Watch the video >>


    Re-sizing an image:

    1. Insert an image into the WYSIWYG of a Web Page Content item.
    2. Click on the image to highlight it.
    3. Select the "Insert/Edit Image" button in the toolbar of the WYSIWYG.
    4. In the dialogue box that appears, chose the "Appearance" tab.
    5. Input a number of pixels in either the text boxes of the "Dimensions" field.
      Note: If you do not want the image to be re-sized unpropotionately, which would cause it to skew, make sure the "Constrain proportions" check box is selected. 
      Also Note: Even though it's not labeled, the first text field is the width and the second field is the height. 
    6. Continue styling or formatting your image as desired.
    7. Click the "Insert" button at the bottom when you are done.

    Watch the video >>