Insert/Edit Images Using The WYSIWYG Editor

The Insert/Edit Image button in the WYSIWYG editor lets you add an image to your message.

About this task

If you plan to use a hosted image, it can be uploaded using Bronto's file manager.

To insert an image:

Procedure

  1. Move your cursor to the place in the message where you want the image to go.
  2. Click the Insert/Edit Image button.
  3. On the General tab:
    1. Add the image URL for the image you wish to add in the Image URL text box.
      You can also click the Browse button next to the Image URL text box to use the file manager to either find the image you want to link to or to upload a new image. For more information see Uploading Files to Bronto.

      Make sure to always add the http:// protocol on to the beginning of your URL. If you forget to do this, when you go to insert the image, a popup will appear asking if you would like to add the http:// protocol. Click Ok to add the protocol on to the beginning of your URL.

    2. Add a description for the image in the Image Description box.
      This text will act as the alt attribute for your image and will be shown if the image can not be displayed.

      Although not required, it is important to provide a description for your image in case your contact's have adjusted their inbox settings to block images, or their email client disabled images.

    3. Optional: Add a title for the image in the Title box.

      When a title is added to an image, a tool tip containing the title is displayed when you mouse over the image.

    4. Use the Preview window make sure you have uploaded the correct image.
  4. Optional: Use the Appearance tab to style the image placement:
    • Alignment Adjusts the position of the image in your message. You can use the preview window directly next to the Alignment menu to see how the different alignment options will position the image in your message.
    • Dimensions Defines the width and height in pixels (px) for the image in the Dimensions text boxes.
    • Vertical space Defines the amount of empty space above and below the image in the Vertical Space text box. This is the same as adding top and bottom padding in CSS.
    • Horizontal space Defines the amount of empty space on the left and right of the image in the Horizontal Space text box. This is the same as adding left and right padding in CSS.
    • Border Defines a border to place around your image in the Border text box. For example, if you enter 5, then a 5 pixel border will be placed around the image.
    • Style Sets the style for the border in the Style text box. You will use the same conventions used in CSS to define the style for the border. The default style is border: 5px solid black;.
  5. Optional: Make images that you add to webforms responsive:
    1. In Dimensions, ensure that the height field is empty.
    2. In Style, input the following: display:block; width:100%; height:auto;.
  6. Click Insert to add the image to your message.