Login
Home Knowledge Base Documentation CMS 10 Authoring Basics Completing Page Elements XHTML Editor Inserting Images in XHTML Editors

Inserting Images in XHTML Editors

On This Page

Images must be uploaded to Ingeniux CMS before they are available through the XHTML editor. If you upload and select an image asset, use the Insert/Edit Image dialog to configure attributes that control the alternate text, image title, class, and dimensions of the asset in the page or component.

Note: Images are editable within the Assets pane and Assets Tree (e.g., cropping, resizing). See Editing Image Assets for details. The XHTML editor reflects the inserted image's current published version.

To insert an image in an XHTML editor:

  1. Navigate to Site > Site Tree.
  2. Select the page with the XHTML editor to contain the inserted image in the Site Tree.
  3. Place your mouse cursor in the desired image location of the XHTML editor field.
  4. Click Insert/edit image.

    Insert/Edit Image

    The Insert/edit image dialog displays.

    Insert/Edit Image Dialog

  5. Click the browse icon, which is to the right of the Source field. The Select an Asset dialog displays.

    Note: For the Insert/edit image option, only image files are visible and selectable in the Select an Asset dialog.

    Select an Asset Dialog

  6. Use the Assets Tree folder structure on the left to navigate to the image you want to include.
  7. Select an image file in the right pane.

    Note: If you want to include all descendants of the selected asset, enable the Include Descendants checkbox to the right of the Search for assets field.

  8. Click Select. This populates the Source field with the ID of the selected image.
  9. Optional: Enter an image description in the Image Description field. Your entry displays in the XHTML source code as the alt attribute value.
  10. Optional: Enter an image title in the Image Title field. Your entry displays in the XHTML source code as the title attribute value.

    Note: The value defaults to the image's path.

  11. Optional: Enter the pixel width and height in the Dimensions fields.

    Note: If you enable the Constrain proportions checkbox, the original aspect ratio of the image is kept intact by automatically entering the correct height value when you change the width (or vice versa).

  12. Select a class from the Class drop-down list. Options include:

    • Block Image
    • Floated Image
    • Banner Image

    Note: Your selection displays in the XHTML source code as the class attribute value. The DSS requires further display property configuration to style the image.

  13. Click OK.