Editing image properties in the WYSIWYG editor

The WYSIWYG editor in Drupal Gardens supports not only formatted text, but also images that you upload to your website or embed from another website. Images have several properties that you can modify to affect their display on your website, including their height, width, alignment, and if they should include a border — essentially, many of the attributes that would normally require the use of custom CSS code.

Modifying image properties

To modify an image's properties in the WYSIWYG editor, complete the following steps:

  1. Edit a content item that contains a image in a text field that uses the WYSIWYG editor (normally a body text field).
  2. Find the image that you want to modify, and then right-click the image.
  3. Click Image Properties in the properties menu.

    The Image Properties pop-up window appears.

    Image Properties pop-up window

  4. After you have modified your image's display properties, click OK to save your changes.

Using the Image Properties window

The Image Properties pop-up window that appears includes the following tabs and image properties:

  • Image Info tab
    • URL - Displays the location of the image file in your website's media library.
    • Alternative Text - Enter alt tag text for the image to increase website accessibility for screen readers and other similar technologies. Alternative text can also boost your overall search engine rankings.
    • Width - Enter a value for the image's width in pixels. By default, your image's aspect ratio is locked, and changing this value will also change the height.

      Click the lock icon to switch between associating the width and height of the image and allowing you to set their values separately from one another.

      Click the circular arrow symbol to redisplay the image in the Preview area using the dimensions that you have entered.

    • Height - Enter a value for the image's height in pixels. For more information on how this value relates to the Width field, see the previous entry.
    • Border - Enter the width of the border around your image in pixels. To edit additional border attributes, click the Advanced tab and then directly modify the Style field.
    • HSpace / VSpace - Enter the inline CSS margin properties of your image in pixels. To edit additional CSS-controlled attributes of your image, click the Advanced tab and then directly modify the Style field.
    • Alignment - Select the CSS float property of your image from the following list:
      • <not set>
      • Left
      • Right
  • Link tab
    • URL - Enter a URL in this field to send visitors to the location when they click the image.
    • Target - Select the link target from the following options:
      • <not set>
      • New Window (_blank)
      • Topmost Window (_top)
      • Same Window (_self)
      • Parent Window (_parent)
  • Advanced tab
    • Id / Language Direction / Language Code / Long Description URL / Advisory Title - These properties do not relate to images inserted using the Drupal Gardens WYSIWYG editor.
    • Stylesheet Classes - Displays the classes associated with the image in Drupal Gardens CSS style sheets.
    • Style - Directly enter or modify the custom inline CSS assigned to the image.