Add an Image with the Rich Content Editor

  • Release version: Washingtondc
  • Updated February 1, 2024
  • 3 minutes to read

    • Use the Rich Content Editor canvas to add images in your content.

    Before you begin

    Role required: sn_cd.content_manager

    Fill in the New content form fields. See Create rich content

    Create the page layout using modules or columns.

    About this task

    The Rich Content Editor supports the following types of images:
    • .jpg
    • .png
    • .bmp
    • .gif
    • .jpeg
    • .ico
    • .svg

    Procedure

    1. Navigate to the canvas by selecting the Open editor button from the Design tab of the New content form.
    2. From the Blocks column, use a drag-and-drop method to move the Image component to your canvas.
    3. Click in the file picker pop-up to select an image.
      Or, if you have previously selected images, select the image from the available images on the right side of the Select Image pop-up.Rich Content Editor - Image pop-up
    4. Navigate to Settings tab.
    5. Configure the following settings:
      Table 1. Content styling settings
      Settings field Description
      Styling
      Display Configure the appearance of multiple components within the same column, such as an image and a text component. Select from the following options:
      • Top and bottom (default): Image appears above the other component.
      • Side by side: Image appears with the other component next to it.
      Note:
      For best results, set the same display for the components. For example, if you have an image and text components in a column and want the image to appear on the left and the text to appear at the right, change the Display settings for both components to Side by side.
      Horizontal align Configure where the image appears in the container. Choose from the Right, Center, and Left icons.
      Advanced styling

      When you insert an image into a container, by default the image is the full width of the container and the height auto-adjusts based on the image dimensions.
      Width and Height Specify the value by entering a number or dragging the sides of the image.
      Select the unit of measure:
      • px: pixel
      • %: percentage
      Padding Padding is the space between content and the border of an element. Specify the value for top, bottom, right, or left padding by entering a number.
      Margin Margin is the space between a row and another element/the canvas boundary. Specify the value for top, bottom, right, or left padding by entering a number.
      Properties
      Alt text Describe the appearance or function of your image for accessibility purposes.
    6. Select Save or Save and Finish.
      Selecting Save saves your content and you remain on the Rich Content Editor canvas. Selecting Save and Finish saves your record and returns you to the New content form.

    What to do next

    • Preview your content from the New content form.
      Note:
      Content Preview is designed to provide a general idea of how your content looks. Content may look different once published due to variations in device resolution, theme difference, or mobile app style configuration.
    • (Optional) Translate your content.

      Select a different language to view your session or request a language translation for the content you are creating. For more information, see Language support for Content Experiences and Content Publishing.

      Use the Language settings drop-down menu to select a different language to view your session in or request a language translation for the content you are creating.
      • Switch language: This allows you to switch your system settings language to a different language. This is similar to changing your language at login. For more information, see Switch language for Content Publishing.
      • Translate content: When you activate the sn_cd.enable_localization_framework_integration system property, created content from the Content Library displays the Translate content selection from the Language settings drop-down. This allows you to request translation for the content to the language you selected. For more information, see Integration with Localization Framework.
        Note:
        Only translate content after you are done modifying the content. For best results, we do not recommend that you add or remove components or change the formatting after translation.

        To create rich content that is formatted differently in different languages, duplicate the content and modify the formatting as needed. Then, use Audiences to target the content to users by language. See Audiences

    • Configure a publish plan to control where the content is delivered, the audience, and the period of time it is available: Create a publish plan for your content.