Simon Fraser University
Engaging the World

Content Management System

Home / Working in AEM / Components / Text & Image Component

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 AEM.

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. It can also be used to overlay a body of text on an image by specifying a CSS class.

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 AEM (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 - Set a maximum width on the image. Note that, as with the Image component, an image will resize based on the width of the screen (or container element). This option allows you to set a maximum width for your image.

Image Location - Choose whether the image is aligned to the left or right of the text block. If you have a tall image, you may find that the alignment of any succeeding components is thrown off when "Right" is selected. To fix this, place the Text & Image component inside a 1-Column component. 

Example of Text & Image Component usage

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:

overlay - sets the image to occupy 100% of the container width and overlays the text on the image. Use only Heading 1 or Paragraph for this style.

overlay-bg - adds a black semi-transparent background to the overlay class. 

overlay class example

overlay-bg class example

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.

 

 

General

Columns

Form

Social

Other