Child pages
  • Embedded Images in Rich Text Fields
Skip to end of metadata
Go to start of metadata

As browser and device widths narrow, images resize for the new width, potentially to a degree where image detail may be obscured. Best practice is to always use a 'float' (see Image Positioning) for embedding images in WYSIWYG/Text Editor fields. The responsive design adds several improved float styles (see instructions below), beyond the current 'Float Left' and 'Float Right' options.

NOTE: Site publishers should review all content with embedded images to ensure proper settings. Although the standard "Float Left" and "Float Right" styles will resize images without breaking the page in the responsive theme, their appearance on smaller devices may be reduced to the point of undesirability.

Example

Embedded images example

Action Items

  • Review all pages containing images embedded in rich text fields for proper formatting.
  • Edit each these pages, and for each embedded image:
    • Check for an Alignment value in the Appearance area of the Insert/Edit Image interface; if a value is set, remove it. If the value that had been set was "Left" or "Right", instead use the Class setting and select the comparable float value (i.e., "Float Left" or "Float Right").
    • Check for Vertical Space and Horizontal Space values; if values are set, remove them.
    • Save changes and publish. Live pages should not be negatively affected by these changes; if they are, or if you have concerns or questions about the best way to align images, contact Robin McGlauflin (robin.mcglauflin@maine.edu) or Bill Blais (william.d.blais@maine.edu) for assistance.

Using Improved Float Styles for Images

The following improved float styles are available for use with the responsive web design theme:

  • Full size (min. width 910px)

  • Large, Float Left (700px - 909px)

  • Large, Float Right (700px - 909px)

  • Medium, Float Left (400px - 699px)

  • Medium, Float Right (400px - 699px)

  • Small, Float Left (100px - 399px)

  • Small, Float Right (100px - 399px)

Steps to use these styles:

  1. In the WYSIWYG editor, select the location for the display of the embedded image and follow the usual steps for selecting and uploading the image with the Insert Image button.
  2. Select the Appearance tab in the Insert/Edit Image interface.
  3. In the Class selector dropdown, select the appropriate style which will be a combination of:
    1. the target image width size (small, medium, or large) based on the width of the uploaded image (ranges are listed in parentheses), and
    2. the desired float effect (left or right)
  4. Insert the image.
  • No labels