Edit image properties in the WYSIWYG editor

WYSIWYG controls

Once you have added an image to your content using the WYSIWYG editor, you can change its properties - alignment, border, width, height, spacing, alternative text and more.

Right-click the image and select 'Image Properties':

Edit image properties

Image style result

Information tab

  • URL - Shows the location of the image file in your site's media library.
  • Alternative Text - Add an "alt" text to the image. This increases the accessibility of your site for screen readers and other, similar technologies and can also boost your overall search engine rankings.
  • Width - Change the width of your image (by default, your image's aspect ratio is locked and changing this value will change the its height commensurately). Click the circular arrow symbol to regenerate the image preview and display its current dimensions.
  • Height - Change the height of your image. See "Width" above for more details.
  • Border - Define the width of the border around your image. To change other CSS-controlled aspects of your image, edit the inline CSS properties under "Style" on the advanced tab (see below).
  • HSpace/VSpace - Define the inline CSS margin properties of your image. To change other CSS-controlled aspects of your image, edit the inline CSS properties under "Style" on the advanced tab (see below).
  • Align - Define the inline CSS float properties of your image. To change other CSS-controlled aspects of your image, edit the inline CSS properties under "Style" on the advanced tab (see below).

Edit image information

Link tab

  • URL - Turn the image into a link to any URL you specify here.
  • Target - Specify the link target. The most commonly used and broadly compatible options here are "not set" (link opens in the same browser window or tab) and "new window".

Edit image link

Advanced tab

Not all of the properties on the advanced tab are useful for manipulating your images in Drupal Gardens. Some may be useful in combination with future functionality.

  • 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 - Shows the classes associated with this image in Drupal Gardens CSS style sheets.
  • Style - Add or edit custom inline CSS for this image. For example, change the border color to red, make it dashed, etc.

Edit image advanced properties

Feedback