CQ SupportUniversity of CincinnatiCQ Support HomeUniversity of Cincinnati

CQ Support

UC Image

Summary:

When inserting images to your pages, use the UC Image component. With this customized image component, it is extremely easy to make any adjustments necessary for images to live on your page just the way you want. In order to put an image on your page, you must first upload the image to Digital Asset Management (DAM).

Getting Started:

Empty UC Image

UC Image is under the 'General' section of the Components tab on the Sidekick. Click and drag the component into a valid field on the page, and you'll see this icon denoting an empty UC Image component.

Once you've placed the UC Image component on your page, use the content finder on the left to bring an image from DAM.

When you drag an image into the component, it will display at its full resolution, and with some default formatting. To change the properties of the image, double-click on the component.

 

Under the Advanced tab, you'll see several options:

  • Image Alignment: Place the image at the Left, Right, or Top of the component's space. When aligned to the Top, it will also center itself in the space
  • 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.
  • Caption: Use this field to have a small, pre-formatted caption appear below the image.
  • 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 accomodate 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.
  • Pop-Up Slideshow: A great way to show high resolution photos on your page. The thumbnails on this page have it enabled.

Under the Image tab, you'll the the rest of your editing abilities:

  • Map: Create shapes that will be clickable "hotspots" for internal or external pages.
  • Crop: Crop the image for use on this page without affecting the original in DAM.
  • Rotate: Rotate the image.
  • Clear: Delete the current image from the component without deleting the component itself.

Component Functions:

  • Alignment
  • Caption
  • Size
  • Link
  • Map
  • Crop
  • Rotate
  • Clear

Related CQ Training: