NYU A&S AEM Implementation. Exercise Sheets

Size: px

Start display at page:

Download "NYU A&S AEM Implementation. Exercise Sheets"

Thomasina Stafford
5 years ago
Views:

1 NYU A&S AEM Implementation Exercise Sheets

2 Table of Contents Table of Contents... 2 Exercise 1: Blank Page with Title... 1 A. Create page using template Blank Page with Title... 1 B. Author component Generic Content... 1 C. Author component Basic Image... 4 Exercise 2: Assets... 7 A. Download files image and PDF... 7 B. Upload files image and PDF... 7 C. Link assets... 8 Exercise 3: Article Page A. Create page using template Article Page B. Author component Hero C. Author component Column Control D. Author component - Image E. Author component Social Media Share F. Author component Useful Links... 14

3 Exercise 1: Blank Page with Title A. Create page using template Blank Page with Title 1. Open Sites console. Go to 2. Login using your netid credentials 3. Navigate to [today s date] AEM Training page. a. Click on NYU Arts & Science page from content area b. Click on AEM Training page from content area. c. Click on [today s date] AEM Training page from content area. 4. Create page. a. Click on Create option from Action bar b. Click Create Page option c. Select Blank Page with Title template d. Click Next button e. In Title field, enter Training: [Specify your name] f. Click Create button g. Click Done B. Author component Generic Content 1

Click on the left built-in Generic Content component to display the Edit bar b. Click on Edit icon (pencil). This will display rich text editor (RTE). c. Click Maximize icon (3 rd from the right) d.

4 1. Open the created page with name Training: [Name] a. Click on Select option from Action Bar b. Select the page created with name Training: [Name] c. Click on Open option from Action Bar d. Switch to Edit mode if on Preview mode. i. Click Edit link on the top right corner of the page. 2. Edit component a. Click on the left built-in Generic Content component to display the Edit bar b. Click on Edit icon (pencil). This will display rich text editor (RTE). c. Click Maximize icon (3 rd from the right) d. Enter the following: Header 1 Header 2 This is a long paragraph Another paragraph Header 2 This is a long paragraph Another paragraph This is an internal link 2

This is an external link e. Highlight Header 1 text f. Click Paragraph icon (2 nd from the last option) g. Select Heading 1 option h. Highlight Header 2 text i.

5 This is an external link e. Highlight Header 1 text f. Click Paragraph icon (2 nd from the last option) g. Select Heading 1 option h. Highlight Header 2 text i. Click Paragraph icon (2 nd from the last option) j. Select Heading 2 option. Repeat step for the second Header 2 text. k. Highlight internal link text l. Click on Hyperlink icon (chain) m. In Path field, enter /content/nyu-as/as n. Click Submit icon (checkmark) o. Highlight external link text p. Click on Hyperlink icon (chain) q. In Path field, enter r. Click Submit icon (checkmark) s. Click Minimize icon (last icon) t. Click Submit icon (checkmark) 3. Configure component a. Click on the configured Generic Content to display the Edit bar b. Click on Configure icon (wrench) c. Fill in the following fields: 3

a. Open Side Panel if closed Click Toggle Side Panel icon b. Click on Components tab c.

6 Text Title: This is the Text Title Widget Header: This is the Widget Header Disable Show More Button: On d. Click Submit icon (checkmark) C. Author component Basic Image 1. Load component. a. Open Side Panel if closed Click Toggle Side Panel icon b. Click on Components tab c. Click and hold on Basic Image component d. Drag and drop to the box below the Generic Content component 4

4. Configure component. a. Click on the loaded Basic Image to display the Edit bar b. Click on Configure icon (wrench) c. Drag and drop image. i. Open Side Panel if closed 1.

Navigate to NYU Arts & Science > AEM Training folder v. Click Submit icon (checkmark). Wait until search results display. vi. Click and hold on any image vii.

7 4. Configure component. a. Click on the loaded Basic Image to display the Edit bar b. Click on Configure icon (wrench) c. Drag and drop image. i. Open Side Panel if closed 1. Click Toggle Side Panel icon 2. On open of the Side Panel, ii. Click Assets tab iii. Click on the Path Picker icon (folder besides the Path field) iv. Navigate to NYU Arts & Science > AEM Training folder v. Click Submit icon (checkmark). Wait until search results display. vi. Click and hold on any image vii. Drag and drop the image to the Drag & Drop Image field d. Fill in the following fields: Title: This is the Title Sub Title: This is the Sub title Caption: This is the Caption Image Alignment: Image on Top Link URL for the Title: /content/nyu-as/as e. Click Submit icon (checkmark) 5

8 6

Exercise 2: Assets A. Download files image and PDF 1. Open https://ursa.qa.auth.cms.nyu.edu/assets.html/content/dam/nyu-as/aem-training 2. Click on Select option from Action bar 3.

9 Exercise 2: Assets A. Download files image and PDF 1. Open 2. Click on Select option from Action bar 3. Click on the following: Image: apter.jpeg PDF: After_the_English_Major.pdf 4. Click on Download option from Action bar 5. Click on Download button 6. Unzip the download. It should have 1 folder with 2 files. B. Upload files image and PDF 1. Open Assets console. Go to 2. If Deselect option is on Action bar, click on Deselect option. 3. Navigate to training directory. a. Click on NYU Arts & Science folder from content area b. Click on AEM Training folder from content area. 4. Create folder. a. Click on Create Folder option from Action bar b. In Title field, enter Training [Specify your name] c. Click Create button 7

5. Open created folder. 6. Upload asset. a. Click on Upload Assets from Action bar b. Select the files from local directory: i. Image: apter.jpeg ii. PDF: After_the_English_Major.

10 5. Open created folder. 6. Upload asset. a. Click on Upload Assets from Action bar b. Select the files from local directory: i. Image: apter.jpeg ii. PDF: After_the_English_Major.pdf c. Click Open button d. Click Upload button C. Link assets 1. Navigate to [today s date] AEM Training page. a. Go to Sites console. ( 8

11 b. Click on NYU Arts & Science page from content area c. Click on AEM Training page from content area. d. Click on [today s date] AEM Training page from content area. e. If Deselect option is on Action bar, click on Deselect option. 2. Open the page with name Training: [Name] a. Hover on page b. Click Open icon (pencil) c. Switch to Edit mode if on Preview mode. i. Click Edit link on the top right corner of the page. 3. Edit component the already authored Generic Content component a. Click on the loaded Generic Content to display the Edit bar b. Click on Edit icon (pencil). 4. Click Maximize icon (3 rd from the last) 5. At the bottom of the content, enter This is a PDF link 6. Highlight PDF link 7. Click on Hyperlink icon (chain) 8. Click on the Path Picker icon (folder besides the Path field) 9. Navigate to the pdf file. c. Click Assets tab 9

12 d. Navigate to NYU Arts & Science > AEM Training folder > Training [Name] e. Click After_the_English_Major.pdf 10. Click Submit icon (checkmark) 11. In Target dropdown field, select New Tab option. 12. Click Submit icon (checkmark) 13. Click Minimize icon 14. Click Submit icon (checkmark) 15. Click Preview icon 16. Click on PDF link link 10

13 Exercise 3: Article Page A. Create page using template Article Page 1. Navigate to [today s date] AEM Training page. a. Go to Sites console. ( b. Click on NYU Arts & Science page from content area c. Click on AEM Training page from content area. d. Click on [today s date] AEM Training page from content area. 2. Click on page with name Training: [Name] 3. Create child page. a. Click on Create option from Action bar b. Click Create Page option c. Select Article Page template d. Click Next button e. In Title field, enter Article: [Name] f. Click Create button g. Click Open page h. Switch to Edit mode if on Preview mode. i. Click Edit link on the top right corner of the page. B. Author component Hero 1. Configure component. a. Click on the built-in Hero component to display the Edit bar b. Click on Configure icon (wrench) c. Fill in the following fields: Title: This is the Title Text: This is the Text Button Text: This is a Button Button Link: d. Drag and drop image to Image field i. From Side Panel, click Assets ii. Click on the Path Picker icon (folder besides the Path field) 11

Load new component. a. Open Side Panel if closed i. Click Toggle Side Panel icon b. Click on Components c. Click and hold on Column Control component d.

14 iii. Navigate to NYU Arts & Science > AEM Training folder iv. Click Submit icon (checkmark). Wait until search results display. v. Click and hold on any landscape oriented image vi. Drop to the Drag & Drop Hero Image container e. Click Submit icon (checkmark) C. Author component Column Control 1. Load new component. a. Open Side Panel if closed i. Click Toggle Side Panel icon b. Click on Components c. Click and hold on Column Control component d. Drag and drop to the box on the left Drag components here container. 2. Configure component. a. Click on the space between columns of the loaded Column Control component to display the Edit bar b. Click on Configure icon (wrench) 12

15 c. Change layout to 25/75 d. Click Submit icon (checkmark) D. Author component - Image 1. Load new component. a. From Side Panel, click on Components tab b. Drag and drop Image component in the 25% column 2. Configure component. a. Click on the loaded Image component to display the Edit bar b. Click on Configure icon (wrench) c. Drag and drop any image from side panel to the Upload Image Asset field d. Update width to 150. e. Click Submit icon (checkmark) E. Author component Social Media Share 1. Configure component. a. Click on the built-in Social Media Share component to display the Edit bar b. Click on Configure icon (wrench) c. Click Add field of Social Media Share Items field d. Select option e. Click Add field of Social Media Share Items field f. Select Facebook option g. Click Add field of Social Media Share Items field 13

16 h. Select LinkedIn option i. Click Add field of Social Media Share Items field j. Select Twitter option k. Click Submit icon (checkmark) F. Author component Useful Links 1. Load new component. a. From Side Panel, click on Components tab b. Drag and drop Useful Links component in Drag components here container below Faculty Bio component 2. Configure component. a. Click on the loaded Useful Links component to display the Edit bar b. Click on Configure icon (wrench) c. Click Link Items tab d. Click on the Add Item icon (plus sign) e. Fill in the following fields: Link Text: This is the first link Link URL: Link Description: This is the first description f. Click on the Add Item icon (plus sign) g. Fill in the following fields: Link Text: This is the second link Link URL: /content/nyu-as/for-training Link Description: (empty) h. Click Submit icon (checkmark) 14

Access your page by hovering over your campus and then choosing Staff Directory. Click on your name to enter your page.

Access your page by hovering over your campus and then choosing Staff Directory. Click on your name to enter your page. LOGIN TO THE WEBSITE Go to www.earlyisd.net and find the Login icon near the top of the page. NOTE: You can find the Login icon on any page of the EISD website. Enter your username (school email address)