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

Inserting Images in XHTML Editors

Prerequisites: The CMS Assets Manager must contain uploaded image assets.
Users can insert image assets within XHTML editor elements in pages and components. Use the Insert/Edit Image dialog to configure attributes that control the alternate text, image title, class, and dimensions of the image.
Note
Users can directly make changes to images (e.g., crop, resize) via the CMS Assets Manager or via the Image Manipulator within the XHTML editor. The XHTML editor reflects the inserted image's current published version.
To insert a CMS image asset in an XHTML editor:
  1. Navigate to Site > Site Tree.
  2. Select a page or component that contains the XHTML editor element.
  3. Check out the content item, and expand the XHTML editor element in the Edit tab.
  4. Choose one of the following steps.
    • Select an area in the XHTML editor, and click Insert > Image... in the XHTML editor toolbar.
    • Select an area in the XHTML editor, and click the Insert/Edit image icon in the XHTML editor toolbar.
      Note
      If the Insert/Edit Image icon doesn't initially display, then click the More... icon to access the icon in the toolbar.

      Insert/Edit Image Icon

    • Right-click an area in the XHTML editor and click Image... in the context menu.
    The Insert/Edit Image dialog displays.

    Insert/Edit Image Dialog

  5. Click the Source icon button.
    The Choose File dialog displays. See Choose File Dialog for details about the dialog UI.

    Select an Asset Dialog

  6. Browse for and select the image asset to insert from the Assets Tree.
    Tip
    Only image assets are visible and selectable in the Choose File dialog.
  7. Click Confirm.
    The image asset's a/ID populates the Source field.

    Image Asset in Insert/Edit Image Dialog

  8. Optional: Complete the following fields to suit your needs.
    FieldDescription
    Alternative DescriptionProvide alternative text for the image. This serves as the @alt attribute value in the XHTML source code.
    Version Notes: CMS 10.0–10.5
    This field is called the Image description field in CMS 10.0–10.5.
    Image TitleProvide the title for the image. This serves as the @title attribute value in the XHTML source code.
    WidthProvide a width value for this image. This serves as the @width attribute value in the XHTML source code.
    Version Notes: CMS 10.0–10.5
    This is the first field within the Dimensions settings in CMS 10.0–10.5.
    HeightProvide a height value for this image. This serves as the @height attribute value in the XHTML source code.
    Version Notes: CMS 10.0–10.5
    This is the second field within the Dimensions settings in CMS 10.0–10.5.
    Constrain proportionsThis option is selected by default. If selected, the system maintains the image's original aspect ratio by automatically providing the correct Height value when you change the Width value (or vice versa).
    Class drop-down listSelect a class from the drop-down list options. This serves as the @class attribute value in the XHTML source code.

    Options include:

    • Block Image
    • Floated Image
    • Banner Image
    Note
    The DSS requires further display property configuration to style images based on these classes.

  9. Click Save.
    The image asset displays in the XHTML editor element.

Version Notes: CMS 10.6
CMS 10.6 displays the unpublished assets icon when XHTML editor elements contain the following:
  • Asset items not marked for publish.
  • Asset items marked for publish but have never been published.
The unpublished assets icon displays next to the XHTML editor element in the Edit tab. See Unpublished Assets Icon for details.

Asset File Not Marked for Publish in Asset Element