-  This is the old CMS documentation site. To view the most up-to-date information, please visit http://www.sfu.ca/cms.html

Text & Image Component

The Text & Image component allows you to display text to the right of an image with an appropriate amount of whitespace padding around the image. Large amounts of text will wrap around the image.

The Text & Image component also allows you to create an image map, and offers several image manipulation options, such as cropping and rotating.

Two editing options are available for text in this component: In-Component Editing and Source Edit.  In-Place Editing is not available in the current version of CQ.

When should it be used?

Use a Text & Image component whenever you need to wrap text around an image rather than displaying the image inline.

CSS Class (Text)

The CSS Class field allows an author to provide an optional class name that will apply a style to the contents.  See Styles section below for a list of styles that can be applied to a text & image component.

Advanced Image Properties

Link to - Add a link to a file or page in CQ (external links not allowed)

Title - Text that appears when a mouse pointer is hovering on the image

Alt Text - Text that appears for browsers that do not display images.  If left blank, it will use any text that is entered in the Title field

Description - A caption that appears underneath the image

Size - Allows specification of an exact width and height of an image in pixels.  If only one field is entered (e.g., only the width is defined), the image will scale the other dimension automatically.

Style - (deactivated; no styles available at this time)

Example of Text & Image Component usage

Student at window

Here is some text that will be wrapped around the image.  Also note that the Text & Image component automatically "pads" the image with whitespace.

The Text & Image component also allows you to manipulate the image. You can crop, resize, rotate, and even create an image map.  Advanced Image Properties allows you to define the title text and alt text of the image.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Styles

The following styles can be applied using the CSS Class field:

Tips & Tricks

  • When a Text & Image component contains a particularly tall image, you may find that the component that follows it wraps around the image. If you would like the new component to be forced to the next line, simply add the CSS class clear to that component's CSS class field.
  • Numbered and bulleted lists in the Text and Image Component will conflict with the image. If you need to make lists in a Text & Image Component, number them manually, or use a dash ( - ) or other symbol for bullets. Alternatively, use a Text component and an Image component separated by columns.