Logging in and Navigating the User Interface
- Open the Author URL in Chrome (author.tnc.org)
- Enter your username and password (your TNC/Active Directory account).
User Interface - Consoles
After logging in, you will arrive at the Navigation panel. For most users, you will be primarily using the Assets console and the Sites console.
- Sites: the console from which you will build, edit, manage and organize pages.
- Assets: the console from which you will upload and manage photos, documents and other assets in the Digital Asset Manager.
User Interface – Navigation Panel Features
When you navigate into another console, you can toggle back to the opening navigation panel by using the top global navigation bar. Toggle between the consoles by clicking the Adobe Experience Manager icon within the global navigation bar at the top-left. This triggers a full-screen drop down display of your nagivation menu.
You can close the global navigation panel by clicking Close, or clicking the icon again to return to your previous site display.
Search for assets or pages using the magnifying glass icon . By default, the search will filter for results based on the console you are searching from (i.e., from the pages console, the search will pull up pages), but you can remove the filter in order to search for all pages and assets from any console.
Access AEM documentation and help topics by clicking on the question mark icon.
Adding Assets to the Digital Asset Manager (DAM)
Add Assets to DAM & Navigate the Assets Console
2. Click on Assets > Files > tnc > nature > en >
3. Select the correct folder from the existing folders (i.e., Photos, Documents, Graphics, Video)
4. Click CREATE and select FILES from the drop-down menu. This will open a file browser for your local machine. (You can also drag and drop a file into this browser window!) *NOTE Files must be 5GB or smaller in size.
5. Select the file to upload and click Open.
6. If necessary, update the filename to remove spaces and special characters, then click UPLOAD.
7. Select the asset to activate the actions toolbar at the top of your screen, then click properties.
8. Enter the page properties and tags for the asset. Use tags that accurately represent the asset and will help locate the asset from the search bar on the navigation panel.Do not skip this step! If you do not edit the asset properties, your image or document will display with incorrect credits, captions, and alt text.
9. Publish the asset. You will not be able to add the asset to a page in AEM without first publishing.
10. Save and Close the asset.
11. You can change the View of the Assets Console by clicking on the view manager in the top right corner of your screen. Select the view manager and select card view, column view or list view. In column view, you can see the file structure, in card view you will see larger thumbnails of your asset, and in list view you can see additional information about assets in the same location all at once.
Publish an Asset
- In Card View: hover over the image, click on the check mark and then click Publish from the tool bar. You can select multiple images and publish at once.
- From List view or Column view, you would select the item by hovering over the icon on the left side of the file, and clicking on the check box. Then Click publish in the tool bar.
- From the page properties, click Publish* in the actions toolbar.
*Note: Publishing an asset does not require publisher approval. To publish a page, all assets on that page must also be published.
Building a New Page, Changing the Console View & Editing a Page
Building a New Page NOTE: North America authors will need to submit content briefs and get approval for new pages BEFORE creating a new page. Read the N.A. AEM publishers guidelines.
1. From the navigation panel, click on the Sites icon to open the Sites console.
2. Navigate to the location where you want to create the new page.
3. Highlight the parent page, the new page (the child page) will go underneath. To highlight the parent page (in column view) click on the page name, but do not click the icon to select the page.
4. Open the drop-down selector by clicking on Create in the toolbar, then select Page from the list. This will open the page wizard.
5. From the first stage of the wizard, select the template you want to use to create the new page, then click Next to proceed.
6. From the next and final stage of the wizard, enter the basic page properties you want assigned to the new page. Mandatory fields will be indicated with an asterisk next to the field name. Notice if there are multiple tabs to complete in the page creation step.
a. For all pages, you will need to fill out the:
i. URL: Required. Will generate the end section of the page URL
ii. Page Title: Required. Will be used in browser tab and search results.
iii. Page Description: Required. Used on the page card (example of article card below) and in search results.
7. Click Create to complete the process and create your new page. The confirmation dialog will ask whether you want to Open the page immediately or return to the console (Done):
Note: If you create a page using a name that already exists at that location, the system will automatically generate a variation of the name by appending a number. For example, if “winter” already exists a new page will become “winter0.”
8. Click Done to return to the console to view your new page.
Caution: Once a page has been created its template cannot be changed.
Changing the Sites Console View:
From the sites console, you can change your view by click on the view selector in the top right corner of the console.
In Column View, you can visually navigate the content tree through a series of cascading columns. This view allows you to visualize and traverse the tree structure of the website.
In this training and documentation, we will primarily operate in Column View.
In the Card View, you can see all the pages in the same level as the current page you are working on. For example, if you have a story on a state chapter landing page, the story would be an L5. If you were working on an L5 story and returned to the console in Card View you would only see other L5 stories in the same section of the site tree. In Card View, you can navigate down by clicking on a page or navigate up by clicking on the breadcrumbs at the top of the console.
In List View, you will see a list of all the pages at the same level in a certain site section. If you want to navigate down, open one of the pages, if you want to navigate up, use the breadcrumbs.
Opening a Page
For many actions, such as editing, you need to open a page.
- In the Sites console in Column View, click and navigate to the page location.
- Click on the icon on the left side of the page tile to enable the page actions toolbar.
- To deselect a page, click on the checkmark on the left side of the page tile or click the x next to “1 selected” in the toolbar.
- Click Edit in the toolbar to open the page in edit mode.
Editing a Page
- Select the page you want to edit and open in edit mode.
- From edit mode you can
- Insert and edit components
- Edit content
Enter Page Metadata
You can edit page properties (metadata) from the sites console or from a page in edit mode.
1. Open Page Properties from Sites Console.
2. In column view, navigate to the page you want to edit.
3. Select the page and click Properties in the actions toolbar. This will open the page properties.
4. Click through the tabs and enter the relevant properties. For all templates, you will want to enter information in the Basic, Image, OG Tags (Social Share), SEO, and template specific tabs (the last tab is specific to the template you are working in).
Open Page Properties from Edit Mode
1. Open the page in Edit Mode
2. Click on the Page Options icon in the top left of the screen
3. Select Open Properties
Example from Training:
Important Properties to add to a page in the Event Details Template under each tab in the page properties:
- Page Title – Page Title should be written for external audiences and displays on page cards, internal search results, breadcrumbs (if applicable) and in components when the title is not authored directly. 150-character limit.
- Page Description –Required. This should be an enticing sentence or two about what readers will find on this page. It will be used on page cards (related events cards) and in internal search results.
- Note: DO NOT enter Tags/Keywords here. This field is not used and these will need to be added in a different tab.
- Image – select or enter the relative URL (starting with /content/) for the image in the DAM to display on page cards and other components.
- Image Alt Text - Describe the contents of image for people who are using a screen reader or have images turned off. Note: if the image is purely decorative, and provides no information beyond aesthetics to users who can view it, leave blank.
- Desktop Image Align To: Select the section of the photo to maintain when the photo is cropped for different desktop screen sizes
- Mobile Image Align To: Select the section of the photo to maintain when the photo is cropped for different desktop screen sizes
- OG Title – will display on social share card.
- OG Description – will display on social share card
- OG Image – will display on social share card
- OG URL – target link for social share (either leave blank or enter the relative URL for the page, starting with /content)
- OG Site Name - should auto-populate with the name of the site you are building within (such as The Nature Conservancy for pages on the global English site)
- External Search Result Title: This is what is seen in the browser tab and Google search results. Should be a shorter version of the page title and include high value words. If you have enough room, include branding at the end of the title: | The Nature Conservancy OR | TNC (though don't sacrifice important words to fit the branding in). 65 character limit.
- External Search Results Description – This description is visible in Google and other external search engine results. It should primarily entice people to click on the page: what is the page about, why should people want to read it. 170-character limit.
- Alternate Language Versions – If this page is translated into another language, select each alternate version here. Be sure to include this same page as well as any other languages (for example, if this is an English page that is translated in Spanish, select both the English and Spanish versions). This includes if a page exists on a different country site in the same language (such as US English, Canadian English and Australian English). If this page is not translated into a different language, leave blank.
EVENT DETAIL TAB (TEMPLATE SPECIFIC)
- Content Type: should always be Event for event pages
- Business Group: Required. Select BU or department. This will allow you to easily locate all of your pages for internal review or audit.
- Secondary Business Group: If applicable, select secondary business groups to be used for sorting and filtering.
- Audience Tag: Required. Select the tag that best describes the target audience of your content.
- Event Title: Enter title of your event for aggregation components.
- Event Site: List the general location of the event. Recommended formatting: [Location Name], [City], [State]; or [City], [State]. Example: Fraser Preserve, Fairfax County, VA. It will be used on event cards. 35 character limit.
- Event Status: Select “public” if you want event to be visible and aggregate with other events. If you select “private” your event will not come up in search and you will have to link to it directly
- Enter the Start Date and End Date and Times for event (uses 24-hr clock)
- Timezone is a display field - does not alter time shown to visitors
- Enter Recurring Event Information if applicable.
- Topic Tag – Suggested. Use activities Tags. These will be used to filter by activity. Example Tag: for a boat tour event, tag the event – TNC: activities/outdoor activities/boating. Use no more than 5-6 tags representing the event topic and activities.
- Geographic Location Tag – required. Regional location that is the focus of content. For global or virtual events, use “Global.”
- Places We Protect Tag – if event occurs on preserve(s) select the relevant places
- Business Group Leads – Enter the name of a person (with AEM access) who is responsible for the page and and changes that may need to be made.
Adding Components to a Page
Add a Component to a Page
*Note: the components that are allowed in a given page section is determined by the template and the page region. Not all components are allowed in each page region. If you are not able to drag and drop a component, it is most likely because that component is not allowed in that region. Refer to the Template Guide for more detail on the allowed components OR follow the next set of instructions instead of using the drag and drop feature.
You can also add a new component by using the Drag components here box of the paragraph system:
- Make sure that your page is in Edit mode.
- Select the Insert Component option (plus sign +) from the Drag components here box.
The Insert New Component dialog will open to allow you to select from the possible components allowed in that region of the page:
4. Edit the component by clicking on the component block and clicking on the wrench icon to bring up the component dialog.
Editing and Rearranging Components
Edit the content of an existing component on the page:
1. Click on the desired component to open the component toolbar.
2. Click the Edit (pencil) icon to open the component dialog.
3. To expand the component dialog and see all available fields, enter full-screen mode using the full-screen icon:
To move a component either:
1. Drag the required component to its new location.
2. Click on a component to open the component toolbar. Use the Cut, Copy and Paste icons where required.
You can Paste components to either the same page, or a different page. If pasting to a different page that was already open before the cut/copy operation, then that page will need a page refresh.
Note: Components can only be pasted into sections where they are permitted according to the region definitions of the page template (e.g. You cannot move a media gallery component above a header).
Adding Assets to a Component
Add DAM Image to a Component – Dynamic Media
When you are adding an image to a component, you will select the image from the DAM using the path picker, drag and drop from the siderail, or enter the DAM file path in the component dialog field.
Images in AEM are cropped dynamically to fit the aspect ratio needed for different components or screen sizes.
When you add an image to a component, you will be given options for how to crop the photo for mobile and desktop views (See above – Desktop Image Align To and Mobile Image Align To).
When you select an alignment from the single-select dropdown in the component dialog, you are essentially telling the system how to crop the photo by specifying where to start cropping from.
For example, if you were using this photo:
And you selected to align the desktop image to the Middle/Left and the system had to fit the photo to a more square layout, it might crop the photo like this:
The photo above was cropped, removing a section of the right side of the photo (see how it cropped into the pink coral head?), cropping from the right side with the intention of leaving the middle-left as in-tact as possible.
Reference for the different alignment choices:
Adding an Asset to a Component using the Asset Selector
Drag and Drop an image to Add from Asset Selector
1. Open the Asset Selector from the side rail.
2. Select the asset type (Image) from the dropdown.
3. Search for the image in the DAM by
a. Using the title and description of DAM assets
b. Using tags
4. With the side rail expanded, open the component dialog to edit a component
5. Drag the selected image from the asset selector into the image URL field
NOTE: This process is the same for adding Documents in the DAM to components.
Previewing a Page
When editing content you can preview the page using the preview mode. To activate preview mode, after opening a page in edit mode, click Preview in the top right corner of the sites console. Click Edit in the top right corner of the console to switch back into edit mode.
- Hides various edit mechanisms to give you a quick view of how the page will appear on publish.
- Allows you to use links to navigate.
- Does not refresh the page content.
View as Published
The View as Published option is available from the Page Information menu. This opens the page in a new tab, refreshes the content and shows the page exactly as it will appear in the publish environment.
Publishing a Page
Once you have finished editing your page you will want to publish (or activate) your page so that it is available to visitors to your website. If you are a publisher (an Approver or Admin), you can publish a page immediately without review. If you are an Author, you will request publication by starting workflow, which will notify your publisher to review a page.
When you want to remove a page from the publish environment, this is referred to as unpublishing. When publishing and unpublishing the page remains available on the author environment for further changes until you delete it.
You can also publish/unpublish a page immediately or at a predefined date/time in the future.
Depending on your location, you can publish from the page editor or from the sites console.
Publishing from Workflow – Author Process
Open the page in Edit mode.
1. Select the Page Information icon to open the menu and then click the Start Workflow option.
2. In the pop-up window, select “TNC Basic Publishing Workflow”
3. In the second field, enter a title for the workflow that specifically describes what the publisher should review (for a new page indicate that it is a new page!)
3. Click Start Workflow.
Publisher will be emailed a link to review your page.
Publishing from the Editor – PUBLISHER PROCESS ONLY
If you are editing a page, you can publish directly from the editor.
1. Select the Page Information icon to open the menu and then click the Publish Page option.
7. Depending on whether the page has references that need publishing:
- The page will be sent into the publishing workflow directly if there are no references (i.e., other pages or assets) that need to be published. Reminder: assets cannot be used on a page until they are published from the Assets console. Unpublished assets will not show up on a published page.
- If the page has references that need publishing, these will be listed in the Publish wizard, where you can either:
- Specify which of the assets/pages/etc. you want to publish together with the page, then use Publish to complete the process.
- Cancel the action.
8. Selecting Publish will replicate the page to the publish environment. In the page editor, an information banner will be shown confirming the publish action.
Publishing from the Console - Quick Publish – PUBLISHERS ONLY
Quick Publish is for simple cases and adds the pages to the publishing workflow without any further interaction. Because of this, any non-published references will also be published (or added to workflow) automatically.
To publish a page with Quick Publish:
- Select the page or pages in the sites console and click on the Quick Publish button.
- In the Quick Publish dialogue, confirm the publication by clicking on Publish or cancel by clicking on Cancel. Remember that any unpublished references will automatically be published as well.
- When the page is published an alert is shown confirming the publication.
Note: Quick Publish is a shallow publish, i.e., only the selected page/pages is/are published, and any child pages are not.