Drupal Enterprise 7: Style Images through the WYSIWYG Editor

Owners of sites in the University's enterprise Drupal Enterprise 7 (DE7) service can set up the WYSIWYG editor so contributors can add CSS styles to images.


Turn on the Entity View Modes Module

  1. Select Modules from the administration toolbar.
  2. Check the box next to the Entity view modes module.
  3. Select Save.

Configure the View Mode

  1. Select People, then Permissions from the administration toolbar.
  2. Scroll to Entity view modes and check the box next to "Add, edit and delete custom entity view modes" under the Administrators column.
  3. Click Save Permissions.
  4. Select Configuration, then System, and then Entity view modes from the administration menu.
  5. In the "File" area, select Add new view mode.
  6. Enter an appropriate label name (i.e., if you want people to upload portrait pictures to be displayed with a certain style, the label could be "portrait").
  7. Check the box next to Image under "Enable this view mode for the following types."
  8. Select Save.

Configure the Image Style

  1. Select Configuration, then Media, and then Image styles from the administraiton toolbar.
  2. Select Add style.
  3. Enter a name for the style you want to create (i.e., "portrait").
  4. Add any effect you want (i.e., resizing, rotating, cropping).

Set Up the Image Display

  1. Select Structure, then File types, then Image, and then Manage file display. (Note: if you are doing this in production, you will also need to turn on the Field UI module which is turned off nightly for performance reasons).
  2. Under the heading "Enabled displays," make sure the Image option is checked.
  3. Under the "Image" tab, select the name of your image (called a "view mode", i.e., "portrait"). 
  4. Select Save configuration.

Note that other options for the image display are available under the manage display tab.

Now the image style is completely set up. For instructions about how your content contributors can use it, see Drupal: Add an Existing Image to a Page.

Add CSS Styles

If you want to add css styling, the class name will be "file-" followed by the image style name (i.e., portrait). For example, if you want to add padding to the image, the css would look something like this:

img.file-portrait {padding: 25px 15px 25px 50px;}