Image Formatting dialog

The Image Formatting dialog is accessible by selecting an image in the template and then selecting Format > Image in the menu.

All settings in this dialog are in fact CSS properties. Cascading Style Sheets (CSS) were originally designed for use with web pages: HTML files. Since Designer templates are HTML files, they are styled with CSS. To learn how to use CSS in the Designer, see Styling and formatting and Styling templates with CSS files. For information about specific properties and their options, see MDN Web Docs - CSS Reference.

For more information about the use of images, see Images and Styling an image.

Image Tab

  • General group:

    • Width: Set the width of the image in measure or percentage. Equivalent to the CSS width property.

    • Height: Set the height of the image in measure or percentage. Equivalent to the CSS height property.

    • Angle: Set the rotation angle of the image in clockwise degrees. Equivalent to the CSS transform:rotate property.

    • Corner radius: Set the radius of rounded border corners in measure or percentage. Equivalent to the CSS border-radius property.

    • Display: Use the drop-down or type in the value for how to display the image. Equivalent to the CSS display property.

    • Overflow: Use the drop-down or type in the value for how to handle overflow (the part of the image that does not fit in the current size of the box). Equivalent to the CSS overflow property.

    • Source: Enter the web address or local file address of the image. Equivalent to the HTML src attribute.

    • Alternate text: Enter an alternate text for the image. This is displayed in browsers and email clients when the image is loading or if the image cannot be displayed. It is also used for accessibility. Equivalent to the HTML alt attribute.

  • Text wrap group:
    • Float: Use the drop-down or type in the value for how to float the image, if the image is not in an absolute position (see Position, below). Equivalent to the CSS float property.
    • Clear: Use the drop-down or type the value to clear pre-existing alignments. Equivalent to the CSS clear property.
  • Positioning:

    • Position: Use the drop-down or type in the value for the type of positioning for the image. Equivalent to the CSS position property (see Using the CSS position property).

    • Top: Set the vertical offset between this image and its parent's top position. Equivalent to the CSS top property.

    • Left: Set the horizontal offset between this image and its parent's left position. Equivalent to the CSS left property.

    • Bottom: Set the vertical offset between this image and its parent's bottom position. Equivalent to the CSS bottom property.

    • Right: Set the horizontal offset between this image and its parent's right position. Equivalent to the CSS right property.

    • Z-index: Set the z-index of the image. The z-index defines in which order elements appear.  Equivalent to the CSS z-index property.

Spacing Tab

  • Padding group: Defines padding (spacing inside the element) in measure or percentage:

    • All sides: Check to set all padding to use the Top value. Equivalent to the CSS border property.
    • Top, Left, Bottom, Right: Set padding for each side. Equivalent to the CSS border-left, border-top, border-right and border-bottom properties.

  • Margin group: Defines margins (spacing outside the element) in measure or percentage:

    • All sides: Check to set all margins to use the Top value. Equivalent to the CSSmarginproperty.

    • Top, Left, Bottom, Right: Set the margin for each side. Equivalent to the CSS margin-left, margin-top, margin-right and margin-bottom properties.

Border Tab

  • Same for all sides: Defines the border properties for all sides using the Top properties. Equivalent to the CSS border property.

  • Top, Left, Bottom, Right: Each group defines the following properties:

    • Width: Specify the thickness of the border. Equivalent to the CSS border-width property.

    • Style: Specify the style of the border such as solid, dashed or dotted. Equivalent to the CSS border-styleproperty.

    • Color: Specify the color of the border: select a named color (defined in the Colors Properties) from the drop-down, or click the colored square to open the Color Picker dialog (Color Picker). Alternatively you could type a name or value in the Color field directly. It must be valid color name (see MDN Web Docs - named color), a hexadecimal color code (HTML Hex Color), an RGB color value, for example rgb(216,255,170) or a CMYK color value, for example cmyk(15%, 0%, 33%, 0%). Equivalent to the CSS border-color property.