• IT@UC Knowledge Base

 AEM CMS Guide

 Guide for the University's AEM web content management system.

    AEM Basic Authoring Resources


Table of Contents:



     ·    Websites Console (Site Admin)
o   Creating New Pages
                   o   Author Mode
                   o   Components
                                  UC Text
                                  UC Image
                                  UC Title
                                  UC Download
                                  UC Text & Image
                                  UC YouTube Player
                                  UC Navigation List
                                  Pop-Up Slideshow
                                  UC Image Rotator
                                              Image Rotator Trouble Shooting
                                   MP3 Player
                                   Social Media Bar
                                   Pull Quote
                                   Tagging Lens
                                   Column Control
                                   UC Recursive Navigation
                  o   Dropdown Navigation in AEM
                  o   Tables
                  o   Anchors
                  o   Check Spelling
                  o   Responsive Overview

     ·     Digital Assets Manager (DAM)
                 o   Uploading Assets
                 o   Compressing Images
                   Photo Policies



AEM Training

      AEM WCM Basic Authoring


A three hour, in-class AEM Training course is offered monthly. Registration for this course can be found at https://www.uc.edu/ucflex/trainingopp/. 

Additionally, UC's Business Core Systems currently offers an online, on-demand training. Instructions for accessing the course are included in the AEM Basic Authoring PDF. Please follow the instructions carefully, and if you have any questions about the training itself, contact Stephanie Schuckman.

      AEM 5 Basic Training Information (156.7 KB) 

Basic Author Training Resources:

Basic Information (515.0 KB) 
Exercises (1.0 MB)  
Slideshow (4.1 MB) 

         AEM Overview:


Screen shot of CQ homepage 


  AEM is a web-based content management system that is accessed using a web browser. The preferred browser for authoring in AEM is Firefox. Generally speaking, Chrome also functions very well as a browser for AEM.


The AEM interface is divided into various consoles, with two primary consoles for most users – the Websites Console and the Digital Assets (DAM) Console. Other consoles are primarily for admin use.


 Websites Console

(AKA “Site Admin View”)

Access all the pages in your website; create, edit, and delete pages; start a workflow; activate and deactivate pages; restore pages; check external links; and access your user inbox.


The websites console will allow you to create and edit your site's pages. You'll see the folder tree containing your site on the left, and selecting a node will display its children on the right. Along the top, you'll see controls and information columns.

Website Admin 


Websites Console [+]



Click "New" to add a page beneath the selected node.



Use "Move" to reorganize or rename pages.



Copy / Paste / Delete

Basic page management controls

copy paste delete 


Activate / Deactivate

Control what gets published (Activated pages are live)


activate deactivate 




The title that appears on the page


The name AEM refers to the page. Also used in the page's URL.


Indicates whether the page has been published and provides the publication date and time.


Indicates whether the page has been modified and provides the modification date and time. In order to save any modifications, you must activate the page.


Indicates the template used for the page.


You can choose what columns appear by hovering over one of the column titles and clicking on the arrow that appears.


When you want to add a new page to your site, select the page which will be its parent in the websites console and click "New..." to bring up the template chooser.


Choosing a template

Create Page 


Choose a template [+]


Each UC site has its own custom template for Content pages. If you're the Author of a single website, you'll only see one Content Page template. The Contact Sheet templates will be for use with Lens components (see Announcements, Image Rotator).

  • Title: The title displayed on the resulting web-page.
  • Name: The page name to be used in the URL.
  • Template: A list of templates available for use when generating the new page.

Once finished, click "Create." You'll see your new page in the websites console. Select the page, and then double-click to begin editing the page in Author Mode.

Page Properties

Page Properties can be accessed from the websites console by right-clicking on a page, or from the Sidekick under the Page tab (second from the left).

Page Properties dialog 

Page Properties Dialog [+]


  • Title: Change the Title of your page.
  • Page Title: Change the text in the UC Title component.
  • Navigation Title: Change the text in the Recursive Navigation.
  • Hide?: Hide the page from the navigation (necessary for contact sheets).

Naming Standards

When creating Web addresses, do not use the following file or folder names:

  • admin
  • apps
  • backup *
  • bin
  • common *
  • content
  • dam
  • data *
  • disp
  • etc
  • lib, libs
  • protected
  • secure
  • shared_content
  • system
  • uc
  • webapps
  • windows *

* Folders or filenames with these names will not be included in search results from UC's Google Search Appliance.

Using other names from the list may cause the file to be unreadable.

In addition, follow these guidelines as outlined in the Domain Naming Policy:

  • Website addresses shall be short and consistent with site-wide naming conventions.
  • Standard format for Web addresses is college.uc.edu/department/ or server.uc.edu/department/. 
  • Names will adequately, appropriately and uniquely describe the unit/content, while keeping the address as short as possible. 
  • Use all lowercase letters. 
  • When necessary, use an underscore to separate words. 
  • Do not use spaces or any special characters (e.g., #, %).
  • Whenever possible, do not repeat college, division or unit name when it already appears in the address. (e.g., uc.edu/ucchildcare/ or uc.edu/ucdisability_services/

Refer to the Domain Naming Policy for more information on Doman names.

Author mode is the interface you'll be working in as you build your pages. It essentially shows you the page as it is so far, but with spaces for you to add new components and edit the configuration of existing ones. There are two important tools on-screen in Author Mode: Sidekick and Content Finder.

The Sidekick 

The Sidekick [+]

The Sidekick

Think of the sidekick as your toolbox while you're building in AEM. All of your page's information and available components are accessible from here.

Components Tab 

Components Tab [+]

In the Components tab, you'll find all of the available tools for adding content and functionality to your page. There are many available for use on UC websites, and the Components page on this site provides an overview on how to utilize many of them.

If you don't see a component you'd like to use, contact AEM Support to request permission.

The Page tab of the Sidekick will allow you to Activate and change information using Page Properties.

Content Finder

The left side of your Author mode interface has a panel called the Content Finder. Anything stores in DAM is accessible here, as well as other pages in AEM. There are six tabs:

Content Finder 

Content Finder [+]

  • Images
  • Documents
  • Flash
  • Pages
  • Paragraphs
  • Browse

Inside of each of these tabs, there'll be a search bar for you to filter what the content finder display.


When working with any components, you can add them either by double-clicking or dragging and dropping the component from the sidekick onto the page. Some default components are hidden from view and are usually only added by a developer.

The following components have been built specifically for University of Cincinnati websites.

List of UC Components




UC Text


Displays text-based content, including hyperlinks, bullet and ordered lists, and charts.

UC Image


Displays an image with an optional caption. Uploading, resizing, cropping and rotation can all be done from within this component.

UC Text & Image


Combines the functionality of 'UC Image' and 'UC Text' into one component. Text will wrap around images aligned left or right, or display normally when images are aligned top or bottom.

UC Title


Displays the page title in a large red header, or as a black header with an ingot.

UC Download


Provides a quick and customizable way to give your users access to digital assets.

Social Media Bar


Displays small icons that link to social networking pages such as Facebook, Twitter, YouTube, and many more.



Display a specific component from another page in AEM.

UC Navigation List


Creates a bullet list of links to other pages in the CMS.

UC Recursive Navigation


Creates working links using the page structure of the current site.

Column Control


Allows for further division of the main content area.

Tagging Lens (Announcements)


Use this component to build dynamic content which is easily updateable and can be configured to always reflect current events & updates.

UC Image Rotator


This component will create an embedded photo slideshow with animated transitions, captions, and links to quickly guide users to important pages of the site.

UC YouTube Player


Embeds a YouTube video on the page.

MP3 Player


Embeds an MP3 Audio Player on the page.

Pull Quote


Displays a stylized quote on a page.



Pull in Data about faculty and staff straight from eProfessional.



Pull in data about majors and programs straight from eCurriculum.

Script Component


Use a script component to embed script within a page in AEM.


The use of page templates and components provide plenty of formatting abilities for your site. The Column Control Component takes your page formatting a step further, allowing you to create more complex designs while keeping the page organized and coherent. The Column Control Component can be found in the 'Other' tab of Components in the Sidekick.

Getting Started:

An empty column control 

Empty Column Control [+]

Column Control can be found in the "Other" section of the Sidekick. Click and drag it onto the page to get started.

The Column Control will default to "1 Column" layout. Click the edit button to see the available layout options. If you don't see layout options, you'll need to add them in Design mode. Find "Design of colctrl" and click "Edit" to insert the styles. Styles are listed on this FAQ page.

Column Control layouts 

Column Control Layouts [+]

Each column layout will break up your page horizontally using the respective percentages. For example, this page was created with the 2 Column (70%, 30%) layout. The 70% column holds the bulk of the content, while the 30% holds the "Component Functions" outline.

An empty 70/30 column control 

2 Columns (70%, 30%) [+]

Here's what you'll see after choosing the 2 Columns (70%, 30%) layout. If you've decided to add column controls after you've already authored content on the page, you can quickly and easily move those components into the columns. Click once to select a component (orange outline), then click on the orange outline and drag it to the column you'd like it to be in.



With the UC Download component, you have a quick and fully customizable solution to providing your user with the content you've uploaded to DAM.

Getting Started:

empty download component 

Click and drag the UC Download component from the sidekick to get started. Double-clicking or right-clicking this icon will allow you to edit the component. Bring any asset from the content finder into this window to insert it into the component.

UC Download Edit Dialog: Download 

Edit Dialog: Download [+]

  • Target: Declare whether you'd like the asset to open in the user's current tab/window or a new one.
  • File: Displays information about the file currently linked to the component.

Once you've connected the file, click the "Display" tab to format how that link will appear on your page. Ideally, you've already inserted a Title and Description for the file in DAM, but if not you're still capable of inserting that from within the component itself.

UC Download Edit Dialog: Display 

Edit Dialog: Display [+]

  • Hyperlink Text Display: Choose from the asset's file Name, Title, or customize the text for this page.
  • Custom Hyperlink Text: Fill this in only when choosing "Use custom hyperlink text" from the dropdown menu above it.
  • Description Display: Choose from the asset's Description, write one for this page, or choose not to display a description.
  • Custom Description: Fill this in only when choosing "Use custom description" from the dropdown menu above it.
  • Display File Size?: If yes, the file size will appear in parenthesis after the hyperlink.

Sample Downloads:

*  Academic Calendar 2012 - 2014 (72.5 KB) 
The tentative schedule of important dates for UC's first two years of semesters.

*  UC Football - Student Section 

Component Functions:

  • Target
  • File
  • Hyperlink Text Display
  • Description Display
  • Display File Size
  • Custom Class or ID

Editing the dropdown navigation on the Division of Administration and Finance (AF) website:

Screen shot of Admin & Finance home page 


Screen shot of A&F navigation in CQ 

  • In the left nav of AEM, open the “Admin & Finance” node (located under “University of Cincinnati”)
  • Each dropdown main menu item (ex: Offices & Units, Services, Priorities, etc.) has a node of a corresponding title located under the Admin & Finance node
    • To add to one of these lists, single-click on the node you (ex: Offices and Units)
    • Once you have selected a node, you will see a list of the items that appear in the dropdown nav (circled to the right)
    • To add to the dropdown list, create a new page with the title you would like to have appear in the dropdown list

§  Once that page is added, it will display on the dropdown once activated

o    After creating the new page, drag and drop the page to its proper location

o    Right click the new page to open the page properties

§  In the “Advanced” tab, click the Redirect arrow

§  Add a redirect target to the appropriate location (illustrated below)

Screen shot of redirect steps in CQ 

eCurriculum Component in AEM Web Authoring System

e curriculum final output 

The eCurriculum Component is particularly useful for colleges that want to have a clone of the program listing on their websites. This component will pull the data from eCurriculum and display that information in the format desired.

This method is much more preferable compared to managing such data on the local sites, since this data will update as eCurriculum is updated. This way, all of the information is stored in one place and will remain concurrent with the official information available on eCurriculum.

ECurriculum panel 1 

Content Finder [+]

General Setup

The component has 2 main options, to display a list of all programs in a certain college, choose Full college A-Z list in What to Display. This option will allow you to use the College dropdown to select which college to retrieve data from.

Alternatively, the Selection of Programs option allows you to put PASLA codes into the Programs to Display widget. If you put in only one PASLA code, it will bypass the listing and show only that program.

Select Items from eCurriculum to display 

Table Options

Chose any of these options to disable columns in the table. By Default the table output for the list includes the following:

  • Program Name (Cannot be removed)
  • Degree
  • Location
  • Area

Panel 3 of ecurriculum 

Content Finder [+]

Program Output Options

The third panel controls the output of the program data. Users have 3 options. 

  • Full Listing will show a preconfigured list of data including the name and description ("What is") of the program, admissions requirements, program details, curriculum, special features and contact info.
  • Mobile Listing will show an abbreviated full listing, leaving out curriculum, special features, admissions requirements, and some program details.
  • Custom Listing allows you to choose which sections of the data to show using the Items for Custom Listing widget

eProfessional Component

The eProfessional component, in the Lenses group, allows users to duplicated data from eProfessional. This will be particularly useful for colleges who have many faculty and staff members who need to have listings on their websites.

With the eProfessional component, users can display a list of profiles or a single profile. They can pull data for an entire college or a subset, and display a long profile or an abbreviated one (suited for mobile viewing).

eProfessional Panel 1 

General Settings

There are two main options:

  • Group Listing, corresponds to the Group Options field set. There, users enter the group code of the area they want to pull data from (view list of all codes). Then, a user can select the output type, either by choosing an A-Z list, or by splitting the data further down into groups.
  • Selection/Single Profile uses the Selection Options group, where users manually input a selection of 6+2's for people they want to retrieve data for. If a single 6+2 is entered, the list if bypassed and that profile is retrieved.

Eprofessional Panel 2 

Content Finder [+]

Ordering Options

Users have 2 display format options for individual profiles:

  • Full Listing displays a picture, name, contact info, educational experience and a listing of scholarly publications and achievements.
  • Mobile Listing displays a picture, name, and contact info.


"Group Listing," "CECH.Arlitt" for "Group Code," "Sort in Groups," and "Full Listing" selected.





Carr, Victoria W

Associate Professor and Director, Arlitt Child & Family Research & Education Center


Cefalo, Andrea

Program Coordinator


Corkwell, Connie Candler

Director of Professional Development and Outreach


Hensler, Joyce L.

Early Childhood Teacher Education Specialist / Education Coordinator


Reddert, Sharon M.

Business Administrator


Stroud, Greta Arlene

Program Coordinator


Volz, Casey S

Program Coordinator


Wright, Mary Elizabeth

Director of Children's Programs


Classroom Teachers




Cable, Beulah M

Assistant Teacher


Chambers, Jane M

Assistant Teacher


Evans, Christina

Asst Preschool Teacher


Hensler, Joyce L.

Early Childhood Teacher Education Specialist / Education Coordinator


Horwitz, Jennifer L

Early Childhood Teacher Education Specialist


Judd, Brenda

Early Childhood Teacher Education Specialist


Kochanowski, Leslie J

Graduate Assistant

Konerman, Rachel M

Early Childhood Teacher Education Specialist


Papin, Dena Martino

Assistant Teacher

Sand, Lauren

Early Childhood Teacher Education Specialist


Schulman, Gregory D.

Asst Preschool Teacher


Theobald, Christine Helen

Early Child Tchr Ed Spec


Underhill, Abraham

Early Child Tchr Ed Spec


Wilmes, Fernanda Marques

Early Childhood Teacher Education Specialist


Woltermann, Ashley N

Early Childhood Teacher Education Specialist


Wynn, Gayle D.

Early Childhood Teacher Education Specialist






Brockhaus, Kathleen M

Head Start Tech 2-U


Maddox, Napoleon

Assistant Preschool Teacher





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.

Using the Content Finder 

Content Finder [+]

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 Edit Dialog: Advanced 

UC Image Edit Dialog: Advanced [+]

  • 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 accommodate the text beside it. The height is adjusted accordingly.
    • Note – in a responsive template, images that are larger than their containers will automatically be adjusted to fit within the space in which the image has been placed.
  • 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 rest of your editing abilities:

UC Image Edit Dialog: Image 

UC Image Edit Dialog: Image [+]

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


The Pop-Up Slideshow function is an option in the UC Image and UC Text & Image components. It gives your Web visitors an option to view images in a larger format. 

Getting Started:

UC Image Edit Dialog 

UC Image Edit Dialog [+]

The Pop-Up Slideshow function is an option in the "Advanced Tab" in any UC Image or UC Text & Image component. In the Advanced tab, scroll to the bottom and open the "Pop-Up Slideshow" option.

Simply by selecting Enabled, you've allowed your user to click on the image to view a full-size version, with the rest of the page dimmed in the background. We call this the "Gallery View."

Also, as the name suggests, it's the easiest way to make a quick slideshow on your page. If more than one image on the page has this function enabled, left and right arrows will display in the Slideshow for navigation, and a "Start / Stop Slideshow" button will display below the image.


  • Pop-Up Slideshow only works with images uploaded to the DAM. This should be the standard method for all image uploads.
  • Once you've enabled Pop-Up Slideshow, your crop function affects only the thumbnail; the full image uploaded to DAM will display when clicked.


The UC Image Rotator is a great tool for creating a photo slideshow on your page. It will allow your user to select through thumbnails, or simply let the slideshow play. See an example of an Image Rotator on the Undergraduate Admissions website.

Getting Started:

UC Image Rotator Flowchart 

UC Image Rotator Flowchart [+]


Creating an Image Rotator is a two-step process.

1.    First, an Image Rotator Contact Sheet must be created. It stores the images, links, titles and captions to be displayed on the "host" page.

2.    Second, the host page will have a Lens component, which will reference the Image Rotator Contact Sheet.

Important Note: If the contact sheet is not formatted properly, or if the contact sheet fails to exist, the host page will not display properly. Within AEM, an error message will be displayed (e.g., "Error during include of component '/apps/uc/components/lenses/bxSlider'"). Within the browser, the page may appear totally blank.

Contact Sheet: Image Rotator


Much like creating Announcements on a page, the UC Image Rotator requires a Contact Sheet to be created first; the component itself is simply a lens that references this. In the AEM GUI, create a page in your site with the "Contact Sheet: Image Rotator" template. Be sure to hide this page from navigation.

Getting Started:

When building a contact sheet for UC Image Rotator, there are several required fields. Click and drag the UC Image Rotator Item component from the sidekick, then click "Edit."

    ·       Image Alternate Text: Used for when an image fails to load and for accessibility.
    ·       Title: Displays at the top of the caption.
    ·       Caption: Photo description. Appears in a gray box that slides over the bottom portion of the photo.
    ·       Thumbnail Image Size: The thumbnails work best with a very small height. 25 pixels is used in this example.
    ·       Link: Each image needs to link to a page, either in AEM or external.

Once this page has been created, you'll need to go back into the site you'd like the rotator on and configure the Lens. Adding the UC Image Rotator Lens


Image Rotator Lens 2.0


With a Contact Sheet created for your rotator's images, the UC Image Rotator Lens will allow you to implement them into a slideshow that your user can navigate through. There are several controls within the lens that allow you to make it suitable for use on any page.

Getting Started:

Edit Dialog: Image Rotator Lens 

Edit Dialog: Lens [+]

Click and drag Image Rotator Lens 2.0 from the Lenses section of the sidekick, then click "Edit."

The most important field here is the "Contact Sheet Location," which is how you point the lens to the rotator items you created. The rest of the fields are explained in the edit dialog; this is open for experimentation, but for a quick reference on what will look nice, read this FAQ page.

Edit Dialog: Image Rotator Lens 

Edit Dialog: Default Image [+]

The second tab is the Default Image configuration, which will be seen if a user does not have a modern web browser or has JavaScript disabled.

Component Functions:

·      Transition Time
·      Contact Sheet Location
·      Image Background Color
·      Thumbnail Background Color
·      Thumbnail Border Color
·      Thumbnail Height
·      Default Image (No JS)
            o    Image Location
            o    Alt Text
            o    Description
            o    Link
            o    Title


Image Rotator Trouble Shooting

ERROR #1 – Rotator Contact Sheet Location Error

·     Symptom:  In Author mode, page displays: “Error during include of component '/apps/uc/components/lenses/bxSlider” followed by a string of text that spills off the page (see image below)

o    On live page, the Mick/Mack error message displays


·   Cause(s):
        o    Occurs when the Contact Sheet Location field in the General tab of the Image Rotator Dialogue box is not pointing to a contact sheet
o    Occurs when the Contact Sheet Location field in the General tab of the Image Rotator Dialogue box is pointing to an empty contact sheet or a non-existent contact sheet (bad URL)
o    Occurs when an image is uploaded directly from a desktop folder (rather than uploading the image to the DAM first

·     Solution:
        o    Check paths to Rotator contact sheet
o    Be sure a “Contact Sheet” template is being used on the page that is being referenced
o    Replace improperly-uploaded image with image from the DAM


ERROR #2 – Solid Color Image Rotator
·     Symptom:
       o    In Author mode, and on a live page, the image rotator displays a solid color (red, black, white, gray) with no images.















·     Cause:
           o   All items on the Image Rotator Contact Sheet have expired

·     Solution:
           o    Extend expiration date on existing items in the contact sheet and / or add new items


ERROR #3 – Rotator Image Sizing Issues

·     Symptom
             o        In Author mode, and on a live page, the images have varying heights in the rotator (see below)


·      Cause:
             o      Images contained within the Contact sheet are not all the same dimension. All images on the Image Rotator Contact Sheet need to be exactly the same size.
                     Any variations in size will result in abnormalities in the Rotator.

·       Solution:
              o     Ensure that all of your images have the correct dimensions (perhaps keep a template that size in a Photoshop document)
              o     Ensure that the slide height has been entered into the Image Rotator



·  Is Image Rotator configured to point to an active Contact Sheet?
·  Are all items on the Contact Sheet active?
·  Are all the items on Contact Sheet current (not expired)?
·  Are all the images in the Contact Sheet properly-sized?
·  Are all the images in the Contact Sheet correctly stored in the DAM?
       ·    To check for this:
                 o  Click “Edit” on a UC Image Rotator Item in the contact sheet
                 o  Select the “Image” tab in the dialogue box
                 o  Click the blue “i” icon – if you see “Image info” followed by “Referenced from: /content/dam/…), your image is OK. If you cannot click on it, it has been 
                    uploaded directly into the UC Image Rotator Item, and it must be replaced with a DAM image


With the MP3 Player component, authors can allow a user to play an audio file embedded on the page using a simple player with quick load times and styled to match UC websites.

Getting Started

First, you'll need to upload your MP3 file(s) to DAM. If you're not familiar with this process, visit the Uploading Assets page first. These files should ideally be placed in the 'media' folder underneath your site's DAM folder. Once you've done this, open up the page you'd like to add the MP3 to in Author Mode.

The MP3 Player component can be found in the Multimedia section of the sidekick. Click and drag it onto your page, and then refresh. At this point you should see the player on the page; either double-click or right-click to open up the Edit Dialog.

Edit Dialog

MP3 Player Edit Dialog 

MP3 Player Edit Dialog [+]

  • Autoplay: When this box is checked, the MP3 will begin to play as soon as the user hits this page.
  • MP3 File Location: Navigate to your DAM folder and choose the MP3 you'd like to use.
  • Title of the MP3: This will allow you to customize the Title that displays on the player.

After you've completed this, click 'OK' and refresh your page. You should now have a simple, easy-to-use MP3 Player embedded on your page that looks something like this:

MP3 Player 

Sample MP3 Players

CCM2 - Center for Computer Music, College-Conservatory of Music


UC Navigation List


The UC Navigation List component allows you to create a customized list of links in the style of the recursive navigation on the left. There are several ways to implement this component.

Getting Started:

Drag UC Navigation List from the sidekick to get started.

empty UC List component 

Click and drag UC Navigation list from the Other section of the sidekick onto your page. After inserting the component, double-click this icon to edit. From this screen, you'll be able to define what populates the list, how long it is, and how the links are displayed.

UC Navigation List Edit Dialog 

Edit Dialog: List [+]

  • Display as: Currently, links is the only configuration.
  • Limit: Enter an integer value for how many links you would like to display
  • Build list using one of three methods:
  • Child pages: Define a page in AEM and the list will be built using the pages underneath that node.
  • Search: Define a search term and  location, and the list is built using the search results.
  • Fixed List: Create your own custom static list.
  • Order by: Choose from Creation Date, Modification Date, Template type, or alphabetically by page title.


Selecting a Parent Page 

Edit Dialog: Child Pages [+]

When creating a list using Child Pages, you'll be asked to provide a Parent Page. Start by entering "/content/" and from there you'll see a dropdown menu. The menu only appears when the path you're entering ends in a "/" (backslash).

Sample UC Navigation List:

UC List from Admissions 

This is a list with the UC Admissions page as its parent. The benefit to using this component over creating fixed lists in UC Text is that these are dynamic. Once this list is given a parent page (or search term), it will always be up-to-date with changes or additions.

Pull Quote Screen Shot 

Enter text for Pull Quote [+]

Pull quotes allows authors to display stylized quotes on a page. To create a pull quote on your page, begin by dropping a Pull Quote component on to your page. Enter the quote in the text area of the Pull Quote tab, and select the desired alignment in the dropdown below.

Pull Quote Screen Shot 

Enter link and source [+]

By using the "Source" options, authors can choose to indicate where the quote came from, either linking to a webpage, or simply using the name of the source.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum congue tempus. ‒ Mark Twain


With the UC Recursive Navigation component, AEM Users need not concern themselves with having a consistent site navigation. While only site designers have access to the controls, it's important to understand its function.

The navigation that appears on the left of every AEM page gets updated with each new page and reflects only the site the user is currently in. This is accomplished by the UC Recursive Navigation component. The component takes the navigation you've set up in the AEM GUI for your site and formats it to be consistent with the rest of the University's AEM sites. And because of where the component is placed in design mode, it only needs to be added to the root node; all of the child pages inherit the navigation.

Disable Inheritance 

Disable Inheritance [+]

If you're authoring a complex site, the inheritance can be broken. In Author mode, above the UC Recursive Navigation a title reads "Inherited Paragraphs." Clicking "Edit" next to this will allow you to break the inheritance for that page and all of its child pages.


The Reference component is a simple tool, yet when used properly, can reduce your workflow dramatically. It allows you to bring content from another page in AEM dynamically, and without re-creating it.

Getting Started:

Click and drag the Reference component from the general section to get started.

Empty Reference component 

Click and drag the Reference component from the General section of the sidekick onto your page. Double-click this icon, and you'll see a dialogue box that says "Reference." Click the down arrow to select your reference.

Reference selector 

Select Reference [+]

On the left, navigate to the page you'd like to reference. The right portion of the window will display thumbnail previews of the components on that page. Choose one, and it will now display on your new page as well.

Referencing components helps save time by simply recycling components that you'd like to use on more than one page of your site. It can also help you create familiarity between the pages of your site, which benefits your user.


Social networking is an important part of creating a broad and accessible web presence. With the Social Media Bar, you can have quick and simple links to your networking pages from your AEM site.

Getting Started:

Click and drag the Social Media Bar component from the General section of the sidekick into the region of the page you'd like it placed, then click "Edit."

Social Media Bar 

Social Media Bar Set-up [+]

There are two tabs that allow you to control what links are available: Links and Visibility. In the Links tab, you'll define the location (or function) of each icon. There are a couple rules to follow when configuring this component:

  • Usernames should be entered in a case-sensitive manner.
  • Email addresses must be formatted properly before the component will save changes.
  • URLs must begin with "http://" before the component will save changes.

For each service, there is already an icon in the system to be displayed and appropriately linked.

By default, when a field is properly filled in the Links tab, it will display in the component. Fields without an entry will not be present on the page.

Social Media Visibility 

Social Media Visibility [+]

In order to manually control the icons that are seen, the Visibility tab has a dropdown menu for each service that will allow you to set a certain service's icon as "Hidden," even when its field is filled.

Sample Social Media Bar:

This Social Media Bar is referenced from the Admissions page; its configuration is shown in the above screen shots.


With the Announcement & Spotlight function of AEM, an Author can quickly and easily share new content on a landing page in their site.

Announcements and spotlights display as a summary and a thumbnail image, but will link to another page for the full story. They are the easiest way to supplement your site with dynamic content.

Tagging Lens - Contact Sheet

Contact Sheet


The first step in creating Spotlights is to create a Contact Sheet. This is where the information of each announcement will live.

Getting Started:

Choosing Contact Sheet: Spotlight Items 

Create a Contact Sheet [+]

In the websites pane of the AEM GUI, navigate to the site you're working on. Create a new page using the "Contact Sheet: Spotlight Items" template. This page will be a reference for your Tagging Lens.

The Contact Sheet will hold the information, while the Lens will present it on the page.

Once you're in the authoring environment for the Contact Sheet, you should see just one available component: UC Spotlight Item. Click and drag that in, and on the blue bar that appears, click edit.

This is where you'll define the information that appears on the Spotlight, and where it will link to.

Edit Dialog: Spotlight Item 

Edit Dialog: Spotlight Item [+]

·      Title: Appears in bold at the top of the Announcement
·      Caption: Smaller, descriptive text
·      Link: Specify a page where this Announcement will lead to.
·      Tags: Tags are used to describe the item.
·      On & Off Time: Set date and times for specific items to display on the tagging lens.
·      Image Alternate Text: Backup text should the image fail to load.
·      Image Size: Control the size of the image in the Announcement.

After you've configured the Contact Sheet, you'll need to navigate back to the page where the Announcements will display and configure the UC Tagging Lens.

Tagging Lens


Having created a Spotlight Contact Sheet, you can now place a Lens for your Spotlights to display on any of your pages.

Getting Started:

Click and drag the Tagging Lens from the Lenses section of your sidekick, then click "Edit."

Edit Dialog: Tagging Lens 

Edit Dialog: Tagging Lens [+]

    ·   Title: Title for the Lens. It appears above the lens on the page.
    ·   Number of Items: How many items will display.
    ·   Order By: Order by Modified Date or Random 
    ·   Image Alignment: Choose from Left, Top or Right
    ·   "View All" Page: Lets you choose a page for all items to appear.
    ·   Types of Items: Choose between Spotlights or announcements
    ·   Tag(s): Used to select groups of tagged items.
    ·   Tag Criteria: Helps join or filter tagged results.
    ·   Contact Sheet Location: Click the down arrow, and choose the Contact Sheet you created. Multiple sheets can be selected.
    ·   Ignore On/Off Times?
    ·   Custom ID: Used when more than one Tagging Lens is needed on a page.

After completing this final step, you should see the Announcements you created in the Contact Sheet displayed on your page. If you decide you'd like to change something about an Announcement Item, you can do it from within the Lens. Each item will have its own "Edit" button in Author mode.

Default Item

The Default Item is the item that will display in your tagging lens should the items from your Contact Sheet fail to load. This most commonly occurs when all the items on the Contact Sheet have expired.


With the UC Text component, you have many ways to edit and augment the copy of your site. Click and drag the UC Text component from the 'General' section of the Sidekick to get started.

Getting Started:

Empty UC Text 

Click and drag UC Text from the General section of the sidekick to your page. You'll see this small paragraph icon denoting an empty text field. Double-click this to open the text editor and insert your copy.

After you're inserted your copy, there are a number of functions available to you to make your content more dynamic.

UC Text Edit Dialog 

UC Text Edit Dialog [+]


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

With the UC Text component on your page, double-click to open the Edit Component window. Under the Text tab, you'll insert the copy for your page. You can do this either by writing within this window, or copying and pasting from an outside source.




HTML tables should only be used to display data in tabular form. There are not to be used for positioning of elements within the page's layout.

Getting Started:

Tables can be added to the page from within Text and Text & Image.

Table Button 

Button [+]


·          Drag and drop the Text component off the side-kick onto the page. Select the "Table Button"

Table Dialogs 

Dialog [+]

·       Complete the dialogs as needed.

Designing Tables for Data:

Tables which are populated with tabular data require table headers for accessibility purposes. Table headers define the contents of the column below.

Notes: table rows will alternate white/grey to improve readability in newer browsers.

Table Dialogs 

Header Dialog [+]

New Table

·       Select the appropriate option within the dialog labeled "Header".

Cell Properties 

Cell Properties [+]

Existing Table

·       Right-click within the cell and select "Cells > Cell Properties". (Note: this does not function properly in Chrome)


Header [+]

·       Change the Cell Type to "Header".  
·       For Apply To…, select "Entire Row".  
·       Hit "OK" and it will convert that row into a Header.




When creating a lengthy page, you have the ability to add Anchors to your text in order to create links that simply send the user's web browser to a specific point on the page.

Getting Started:

Add or Edit Anchor 

Add or Edit Anchor [+]

Open up the Edit dialog on any UC Text or UC Text & Image component, and go to the Text tab. Select the text that will be the target of the link, and click the small anchor icon in the editing toolbar.

Anchor Title  

A new window will open, and here you'll define the anchor title. Click OK, and in the Text edit dialog you should see a small anchor next to the text you had selected. If you ever forget the title you gave to an anchor, you can select this and click the anchor icon in the toolbar.

Link to anchor 

The last step is to create a hyperlink to the anchor location. To do this, select text and click the hyperlink button in the toolbar. Instead of entering a URL or page location, simply enter "#title"

For example, if the anchor's title is "samples," you'll enter "#samples" (without the quotation marks) in the "Link to:" field.

Check Spelling

Check Spelling 

Check Spelling [+]


The spelling checker will check all the text in the current component. Any incorrect spellings will be highlighted in yellow.

Right-click on misspelled items for suggestions to replace your misspelled word.


If the page you're building will alternate between text and image content, you can consolidate the number of components you use by utilizing the UC Text & Image Component. This is also the method for creating text that wraps around images.

Getting Started:

Empty UC Text & Image 

Click and drag this component from the 'General' Components in the Sidekick. You'll see these two gray icons, which denote an empty UC Text & Image Component. Double-click these to open the Edit Component window. The controls inside of here should be familiar if you've already worked with the UC Text and UC Image components.

UC Text & Image Edit Dialog: Advanced 

Edit Dialog: Advanced [+]

If the image is aligned to the Top, it will center in the component's space above the text. When aligned left or right, the text will wrap around the image in the remaining horizontal space.

This text and the image to the right were placed with the UC Text & Image component, with the image aligned Right and the Pop-up Slideshow Enabled.

view of text tab in UC Text & Image editor 

Edit Dialog: Text [+]

The Text tab of the Edit Dialog has every function available in UC Text. Be conscious of the relationship between the length of your copy and the size of your image.

view of image tab in UC Text & Image editor 

Edit Dialog: Image [+]

The Image tab of the Edit Dialog contains the same controls as UC Image. If you're cropping an image and you have Pop-Up Slideshow Enabled, note that you're only cropping the thumbnail that will show on the page; the full DAM image will be shown when clicked.


The UC Title Component is relatively simple, but still very useful. It displays the Title given to the page in a prominent style. You can see it in action at the top of each of these pages on the AEM Support site.

Getting Started:

Click and drag UC Title from the 'General' Components in the Sidekick. The Title you gave to the page when you created it should display immediately in large red text, like the 'UC Title' at the top of this page.

 Double-click the title to edit the style.

view of UC Title component editor 

Edit Dialog [+]

  • Style: By default, there will be four styles available to you (examples below).

Edit Page Title 

Edit Page Title [+]

  • To make a UC Title component read differently from the actual page title, go to Page Properties in the sidekick, and use the Page Title field.

(NOTE: To hide a title on a responsive page, check the Suppress h1? box in the Advanced tab of the Page Properties area.)


One of the simplest ways to share video content online is through a YouTube channel. With the UC YouTube Player component, you can quickly and easily embed a YouTube video onto your page, so that users do not need to navigate away from your page to view it.

Getting Started:

YouTube Default Video 

UC YouTube Player [+]

Open the Multimedia section of components in the sidekick, and click & drag the UC YouTube Player onto the page.

The component will load with a default video, but once you click the "Edit" button, you'll be required to enter the Video ID of your YouTube clip. This is also where you'll set the formatting parameters.

Edit Dialog:

Edit Dialog: UC YouTube Player 

Edit Dialog: Configuration [+]


Edit Dialog (Responsive): Configuration

  • Video ID: The ID YouTube uses to recognize a video. In the following URL, the Video ID is in bold: http://www.youtube.com/watch?v=Aisim-N68mA
  • Player Size: Resize the video player to fit the intended area on the page. Use this in the same manner as resizing an image.
  • Show Related Videos: Choose whether or not Related Videos appear when the video ends.

If you've entered everything correctly, you should be able to preview the video in Author or Preview mode.

Responsive web design (RWD) is an approach to developing a web site in a manner in which the site's content is optimized for viewing across a variety of platforms, including desktops, laptops, tablets and smart phones.

This is achieved by the rearranging and/or resizing of content (photos, icons, text, etc.) on a page based on the size of the screen.

Examples of Responsive UC Sites

UC Home Page



DAAP Home Page



Responsive Styles & Tools

Header Styles:


The Header 1 style is typically reserved for the page title. Other text may be styled by using the dropdown menu in the Format area of the UC Text component. PLEASE NOTE: Header formatting serves a very specific function from an accessibility standpoint and should only be used to format true section headers. DO NOT use header styles to format large blocks of text.

Available Text Styles

Text styles can be selected/adjusted in the Custom Class/ ID tab of the UC Text Component.


UC Accordion Component





UC Button Component


Responsive Demo

A helpful demo page is available at http://www.uc.edu/cms/author_resources/responsive/demo.html. This page has each content area labeled to illustrate to users which sections go where on mobile verses desktop iterations of each page.




 Digital Assets Manager


Digital Assets

Digital Assets Management (DAM) is a space to store and manage various types of media - images, documents, video, etc.

Before adding any media content to your pages, it must be stored and organized in your DAM folder. Upon initially entering DAM, you should see an identical folder structure to what you see in the Websites console; each site gets its own DAM repository.

Items stores in DAM are easily accessible from the Content Finder in Author mode, so that once you've added the file once you'll have quick access to it from any page you're editing.

Important Note: AEM Authors are only permitted to use items in their site's folder and in the "Common" folder. For more information, see the Photo Policies page.

Navigating through digital assets is very similar to navigating in the Websites console. If there's an asset you'd like to modify, double-click to bring up the Asset Dialog.

Here, you'll be able to change the asset's properties: define a Title, enter a Description, or define Tags for the asset. It's good practice to add a title and description, as certain components will allow you to display this information on your page.

The Uploading Assets page will guide you through adding new assets to DAM.

Uploading Assets

To add media content to your site, the file(s) must first be uploaded to the Digital Assets (DAM). Do not upload files directly to your AEM page.

In AEM, the DAM area can be accessed by clicking the camera icon found immediately after logging in, or along the top of any console view.

Upload Assets 

Upload Assets dialog [+]

1.  Navigate to your site's folder in DAM. 
          o   It will be located in the same place as your site's root node in the Websites pane. 
          o   Each repository will have three folders to begin: 
                  ·   images
                  ·   docs and 
                  ·   media. 

2.  Select the appropriate sub-folder folder in the upper-left-hand window. 

3.   Click "New..." in the toolbar along the top. (To add a folder, click the arrow beside the "New" option and choose "New Folder." Select the new folder and then click "New.") An "Upload Assets" window will open.

4.   Click "Browse..." in the Upload Assets window to choose the file(s) you want to upload. Multiple files can be selected, as seen in the image above.   
         o    Uploading large numbers of images at one time and/or high resolution images is not advised; be sure to read the Compressing Images page to ensure that your images are appropriate for the Web before you upload them to DAM.

5.    After you've uploaded your assets, double-click to open the Asset Dialog. Here, you'll be able to change the asset's properties: define a Title, enter a Description, or define Tags for the asset. It's good practice to add a title and description, as certain components will allow you to display this information on your page.

6.   Do not activate the image. Once you complete the page which uses the image, you'll activate the page, which will prompt activation of the image as well.
7.   Now, go to the page where the image will be placed. Within the component on your page, navigate through the DAM to your image location. 
8.   Drag the image onto the image icon within your component.


There are limitations on how photos are displayed on the web, and we can conserve storage space and improve AEM performance by making sure that we're not uploading unnecessarily large images. There are two main aspects of what makes up the file size of an image: Resolution and Dimensions.

  • Resolution: Most commonly measured in dots per inch (dpi). Every image on the web is displayed at the same resolution: 72 dpi
  • Dimensions: The width and height of an image. Computer monitors vary widely, but in the interest of accessibility we ask that your images are no larger than 1500 pixels wide or tall.

Authors should always compress their images to match these guidelines before uploading to DAM.

Note: With images to be used in the Image Rotator, they must match the intended dimensions of the component before being uploaded.

Compressing Images

If you're unsure of how to compress an image, here are a few options to explore.

Mac OS X

Preview in OS X makes compressing an image quick and easy.

Compressing with Preview 

Adjust Size dialog [+]

  • Open an image.
  • Under the "Tools" menu, choose "Adjust Size..."
  • Ensure "Scale proportionally" is checked and your unit is "pixels."
  • Adjust image based on the guidelines on this page.

Windows 7, Vista

Windows Live Photo Gallery is a quick and easy tool to use for resizing. This application is part of Microsoft's Windows Live Essentials (free download).

Windows XP

Microsoft offers downloads for XP called PowerToys (free download), which are add-ons to the operating system. One of these is called Image Resizer, which allows you to resize multiple images with a right-click.

How do I purchase photography?

All images taken by UC photographers are owned by the university and managed by the university’s Creative Services department. Units of the university purchase the right to use UC images three ways:

1.        Assignment Photography
Hiring a UC photographer to fulfill a specific request.

2.        UC Stock Photography
Purchasing the right to use an existing image.

3.        Free Photography
Downloading one or more of the stock images 
provided courtesy of Public Relations funding.

Why is there a charge for photography?

UC Creative Services was established to offer high-quality, professional services (photography, videography, graphic design and editorial services) to the UC community at below-market rates. UC Creative Services is a team of designers, photographers and editors and operates as a “cost-recovery” department. General university funds do not support the salaries and benefits of our designers and photographers. We recover those funds by charging fees.

Can't I just copy images I find online?

Do not copy and paste photos from UC websites or grab an image from the CMS “DAM:”

  • Images found online are not high enough quality for print production, nor are they sized correctly for your web needs. When you pay for an image or hire a UC photographer, you are assured of receiving both print- and web-quality versions appropriate for your specifications.
  • Images copied online cannot be managed. Paying for the right to use an image provides you with a reasonable expectation that the image will not appear in numerous locations and on multiple publications across the university. In most cases, we do not release images for stock purchase until 3-6 months after the original assignment. In some cases, we can offer an exclusive rights agreement. In all cases, we manage the usage of each image, preventing overuse.  

What should I do if someone copies one of my images?

Images stored in the CMS DAM can be tracked. Units should report abuse to Web Communications if they find that images they purchased are being copied.

Please contact 
Lisa Ventre for additional information.

Photo Policy FAQs

How do I purchase photography?

All images taken by UC photographers are owned by the university and managed by the university’s Creative Services department. Units of the university purchase the right to use UC images three ways:

1.        Assignment Photography
Hiring a UC photographer to fulfill a specific request.

2.        UC Stock Photography
Purchasing the right to use an existing image.

3.        Free Photography
Downloading one or more of the stock images 
provided courtesy of Public Relations funding.

Why is there a charge for photography?

UC Creative Services was established to offer high-quality, professional services (photography, videography, graphic design and editorial services) to the UC community at below-market rates. UC Creative Services is a team of designers, photographers and editors and operates as a “cost-recovery” department. General university funds do not support the salaries and benefits of our designers and photographers. We recover those funds by charging fees.

Can't I just copy images I find online?

Do not copy and paste photos from UC websites or grab an image from the CMS “DAM:”

  • Images found online are not high enough quality for print production, nor are they sized correctly for your web needs. When you pay for an image or hire a UC photographer, you are assured of receiving both print- and web-quality versions appropriate for your specifications.
  • Images copied online cannot be managed. Paying for the right to use an image provides you with a reasonable expectation that the image will not appear in numerous locations and on multiple publications across the university. In most cases, we do not release images for stock purchase until 3-6 months after the original assignment. In some cases, we can offer an exclusive rights agreement. In all cases, we manage the usage of each image, preventing overuse.  

What should I do if someone copies one of my images?

Images stored in the CMS DAM can be tracked. Units should report abuse to Web Communications if they find that images they purchased are being copied.
 Please contact 
Lisa Ventre for additional information.

   AEM WCM Advanced Authoring
Advanced Author Training for the AEM system is conducted by Web Communications/UCIT.
Covers advanced components (e.g., rotator lens, multimedia embedding, Web content strategies, contact sheets and tagging).

Offered as needed. Contact CQSupport@uc.edu for details.

   AEM WCM Basic Developing


Developer Training is conducted on demand and is only available for larger units, which have previous experience with Web technologies. Strong experience is required in HTML, CSS, JS and the ability to work within an IDE. Familiarity with JQuery, JSP/Java, XML, RSS is recommended.

Contact CQSupport@uc.edu for details.


 If you have any questions or require assistance, pleasr contact the IT@UC Service Desk at (513)556-4357 or via email at: HelpDesk@uc.edu.

Rate this article - 1 to 5 Stars
Note: you must be signed in to use this feature