CQ SupportUniversity of CincinnatiCQ Support HomeUniversity of Cincinnati

CQ Support

UC Text & Image

Summary:

With the UC Text & Image component, you have many ways to edit and augment the copy of your site. With the UC Text & Image component, you also have the option of adding and removing images to go along with your content. Click and drag the UC Text & Image component from the 'General' section of the Sidekick to get started.

Text & Image component icon

Getting Started:

Once you've dropped a UC Text & Image component into your page, you'll see this gray icon, which denotes an empty UC Text & Image component. Double-click the icon to open the Edit Component window.

Text Tab

In the Text tab of the UC Text & Image component, you can add text either by typing directly into the window or by pasting from an outside source. After you're inserted your copy, there are a number of functions available to you to make your content more dynamic.

  • Cut, Copy, Paste: The first five icons at the top left provide you with cut, copy, and paste functions. This is useful, but the standard keyboard commands work as well.
  • Find, Replace: The next two icons allow you to search through your text, and/or replace a segment with another.
  • Formatting: The next several icons allow you to bold, italicize, underline, super- and sub-script your text.
  • Alignment: Align your text to the left, center, or right of the component's space.
  • Link: Select a segment of text and click the Link icon to create a hyperlink with the selected text; works with both internal and external pages. The Link icon with the red 'x' will remove the hyperlink, and the Anchor icon inserts an anchor for in-page navigation.
  • List: The beginning of the second line of icons allows you to select paragraphs and convert them to a list, either bulleted or numbered. You can also select a list item and indent or outdent.
  • Table: Insert a table. Right-click on a table to edit its columns, rows, size, padding, spacing, etc.
  • Special Characters: Insert characters that don't have a common keystroke, such as foreign currency symbols.
  • Check Spelling: Check the spelling of your text.
  • Source Edit: At any time, you can click this icon and see the HTML code that this component has created.
  • Format: Change a paragraph's style to one of several Headers, or select a blockquote.

Enabling Images

If you would like to include an image with your text, click the Enable radio button found on the Enable Image? tab.

To add an image, drag and drop an image from the DAM into the Image tab.

On the first field of the Advanced Image Properties tab, you'll be asked to add a Title (Alt Text). This is a mandatory field that provides a brief text description of the image. Also in the Advanced Image Properties tab, you'll see several additional options:

  • Title (Image Alternate Text): This field is required. If the user's browser fails to load the image, this short text description will show in its place. (if no
  • Caption: Use this field to have a small, pre-formatted caption appear below the image.
  • Image Alignment: Place the image at the Left, Right, or Top of the component's space. All text included in the component will wrap around the image when it is aligned to either the Right or the Left. When aligned to the Top, it will also center itself in the space.
  • Size: This control will always maintain the image's original aspect ratio. In the example above, we've scaled an image to 140 wide to accommodate the text beside it. The height is adjusted accordingly.
  • Link: Allow the user to click the image & be routed to another page, either internal or external.

If you add an image that you no longer wish to use, you can click the Disable radio button in the Enable Image? tab.