Virginia Tech®home

VTMag2 Template Documentation

This document supports the VT-Mag2 magazine template in the AEM Ensemble CMS system. This document uses "sitename" in various descriptions and instructions as a placeholder for your CMS site name. Please be careful if you are copying and pasting from this guide that you will need to replace "sitename" with your site domain name or relative CMS name.

NOTE: This documentaiton assumes nothing, so all steps including logging into the CMS authoring environment are included in each task. If you are already logged in, you can skip ahead of that step and any other that would put you into the proper folder for each task. Users more familiar with the CMS may be able to just use the imagery to guide them through the tasks.

Site level needs

Before you apply the design to the /magazine page of your site you will need to do the following things:

site configuration tab with site home URL field highlighted
Example Site Consiguration properties with the Site Home URL field highlighted.

1. Log into https://author.ensemble.vt.edu

2. Click the checkbox next to the site name for the site you want to add a magazine to from the My Sites page

3. Click the "View Properties" button in the toolbar

4. Click in the "Site Home URL field" and type a forward slash, /

6. Click the "Done" button in the top-right of the window

7. Click "My Sites" link in the left-hand menu

8. Click the checkbox next to the site name for the site you just modified

9. Click the "Publish" button in the toolbar

 

 

tag creation dialog
Issue tag example with proper lowercase and dash separated Name field.
example issues tags
Example of tag structure highlighting the Issue tags.
example section tags
Example of tag structure highlighting the Section tags.

Create the magazine tags using the following structure; make sure the names (not titles) of the tags use dashes wherever there is a space in the title, and that the names are lowercase.

a. Magazine

i. Issues

1. Issue title, e.g., Winter 2017

2. Issue title

3. ...

ii. Sections

1. Section title, e.g., Impact

2. Section title

3. ...

1. Log into https://author.ensemble.vt.edu

2. Click "My Tags" in the left-hand menu

3. Click the site name for the site where you will be creating a magazine

4. Click the "Create Tag" button in the toolbar

5. Click in the "Title" field and type the mixed case, space separated tag title, e.g., Winter 2017
NOTE - the lowercase, dash separated name will be created automatically

6. Click the "Create" button at the bottom of the dialog

7. Repeat steps 3 - 6 for each tag needed and in the format described above

Publish tags from the lowest level up to the Magazine tag itself. Start with the Section tags, then the Section tag itself. Do the Issues tags and the Issue tag itself, then finish by publishing the Magazine tag.

Example page structure under the Magazine page at the site root level.
Example page structure under the /magazine page at the site root level.

You will need to create the exact page structure outlined below in order for the template to work properly. The Issues and Sections sub-pages will need to match the tag structure in order for those pages to act as landing pages for their tags when the tag is clicked on.

Page creation dialog selecting Redirect Page template.
Page creation dialog selecting Redirect Page template.
Magazine redirect page properties.
Magazine redirect page properties.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click the "Create" button in the toolbar

5. Click on the "Redirect Page" template

6. Click the "Next" button in the top-right of the window

7. Click in the "Name" field and type: magazine (all lowercase)

8. Click in the "Title" field and type: Magazine (captial "M"), this will be the title that appears in the site navigation as well

9. Click the "Create" button in the top-right of the window

10. Click the "Done" button in the Page Created dialog

Page creation dialog selecting Generic Home Page template.
Page creation dialog selecting Generic Home Page template.
Magazine home page properties.
Magazine home page properties.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the title for the "Magazine" page

5. Click the "Create" button in the toolbar

6. Click on the "Generic Home Page" template

7. Click the "Next" button in the top-right of the window

8. Click in the "Name" field and type: index (all lowercase)

9. Click in the "Title" field and type the magazine title, this is not displayed to the web user

10. Click in the "Tags" field and type the issue tag for this magazine, e.g., Winter 2017

11. Click on the matching tag in the list below the "Tags" field

12. Set the "Page Style" pulldown to: Without Right Column

13. Click the "Create" button in the top-right of the window

14. Click the "Done" button in the Page Created dialog

Page creation dialog selecting a General Page template.
Page creation dialog selecting a General Page template.
Stories page properties.
Stories page properties.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the title for the "Magazine" page

5. Click the "Create" button in the toolbar

6. Click on the "General Page" template

7. Click the "Next" button in the top-right of the window

8. Click in the "Name" field and type: stories (all lowercase)

9. Click in the "Title" field and type: Stories (capitalized first "S")

10. Set the "Page Style" pulldown to: Without Right Column

11. Click the "Create" button in the top-right of the window

12. Click the "Done" button in the Page Created dialog

Page creation dialog selecting a General Page template.
Page creation dialog selecting a General Page template.
Example of what a current issue's Stories folder page properties might be.
Example of what a current issue's Stories folder page properties might be.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the title for the "Magazine" page

5. Click on the title for the "Stories" page

6. Click the "Create" button in the toolbar

7. Click on the "General Page" template

8. Click the "Next" button in the top-right of the window

9. Click in the "Name" field and type the lowercase, dash seperated tag name for this issue, e.g., winter-2017

10. Click in the "Title" field and type the mixed case, space seperated name for this issue, e.g., Winter 2017

11. Set the "Page Style" pulldown to: Without Right Column

12. Click the "Create" button in the top-right of the window

13. Click the "Done" button in the Page Created dialog

Page creation dialog selecting a General Page template.
Page creation dialog selecting a General Page template.
Issues page properties.
Issues page properties.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the title for the "Magazine" page

5. Click the "Create" button in the toolbar

6. Click on the "General Page" template

7. Click the "Next" button in the top-right of the window

8. Click in the "Name" field and type: issues (all lowercase)

9. Click in the "Title" field and type: Issues (capital "I")

10. Set the "Page Style" pulldown to: Without Right Column

11. Click the "Create" button in the top-right of the window

12. Click the "Done" button in the Page Created dialog

Page creation dialog selecting a General Page template.
Page creation dialog selecting a General Page template.
Sections page properties.
Sections page properties.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the title for the "Magazine" page

5. Click the "Create" button in the toolbar

6. Click on the "General Page" template

7. Click the "Next" button in the top-right of the window

8. Click in the "Name" field and type: sections (all lowercase)

9. Click in the "Title" field and type: Sections (captilized first "S")

10. Set the "Page Style" pulldown to: Without Right Column

11. Click the "Create" button in the top-right of the window

12. Click the "Done button" in the Page Created dialog

Page creation dialog selecting a General Page template.
Page creation dialog selecting a General Page template.
Example of what a Section title page properties might be.
Example of what a Section title page properties might be.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the title for the "Magazine" page

5. Click on the title for the "Sections" page

6. Click the "Create" button in the toolbar

7. Click on the "General Page" template

8. Click the "Next" button, top-right of window

9. Click In the "Name" field and type the lowercase, dash seperated tag name for the section, e.g., impact

10. Click in the "Title" field and type the mixed case, space seperated name for the section, e.g., Impact

11. Set the "Page Style" pulldown to: Without Right Column

12. Click the "Create" button in the top-right of the window

13. Click the "Done" button in the Page Created dialog

Page propertis for the Magazine page with the redirect field highlighted under the Redirect Info tab.
Page propertis for the /magazine page with the redirect field highlighted under the Redirect Info tab.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the checkbox for the "Magazine" page

5. Click on the "View Properties" button in the toolbar

6. Click the "Edit button", top-left portion of the window

7. Click on the "Redirect Info" tab

8. Click in the "Redirect" field and type the path to your magazine index page (/content/sitename_vt_edu/en/magazine/index.html),
OR click the folder icon to the right of the field to navigate to the index page for the magazine

9. Proceed to the "Apply the VT-Mag2 design template" task in this section

Page propertis for the Magazine page with the design field highlighted under the Redirect Info tab.
Page propertis for the /magazine page with the design field highlighted under the Redirect Info tab.

1. Click the browse icon to the right of the "Design" field

2. Click on the "VT-Mag2" design under the "vt-designs" column

3. Click the blue checkmark in the top-right of the browse dialog

4. Click the "Done" button in the top-right of the window

The structure needed for the template should now be complete. The next sections of the document will describe specific content and component needs and then the features and functions of the template along with how to implement them.

Content and component needs

There are specific content and component needs for this template to work properly.

Mag Title Header
Edit mode view of magazine redirect page with Text component in the Header Components section for magazine title.
Header Text component config dialog.
Header Text component config dialog.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the checkbox for the /magazine page

5. Click on the "Open" button in the toolbar

6. Drag and drop a "Text" component into the Header Components section of the page

7. Click on the Text component to display its toolbar

8. Click the wrench icon in the toolbar

9. Click in the "CSS Class" field and type: vt-mag-magTitle

10. Click the checkmark in the top-right of the dialog to accept the changes

11. Click on the Text component again to display its toolbar

12. Click the pencil icon in the toolbar to enter edit mode

13. Type the name of the magazine

14. Select the magazine name

15. Click the chain icon in the Text component toolbar

16. Type the full URL for the /magazine/index page into the link field, e.g., https://sitename.vt.edu/magazine/index.html

17. Click the blue checkmark in the link toolbar

18. Click the checkmark far right in the toolbar

Home Page Gallery

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the title for the "Magazine" page

5. Click the checkbox next to the "index" page

6. Click the "Open" button in the toolbar

7. Click on the Gallery component embedded in the page to display its toolbar

8. Click the wrench icon in the toolbar

9. Set the "Gallery Type" pulldown to: Carousel

10. Set the "Play Speed" to: 0

11. Set the "Control Style" to: Hidden

12. Click on the "Gallery Items" tab at the top of the dialog

13. Click the "Add field" button

14. Click on the "Assets" tab in the side panel

15. Drag and drop an image from the Assets panel into the "Image to display" area of the dialog

16. Click in the "Link / Reference" Field and type the path to your featured story page *, e.g., /content/sitename_vt_edu/en/magazine/stories/issue-folder/feature.html

17. Click in the "Heading" field and type the heading for the story

18. Click in the "Caption" field and type a caption for the story if there is one

19. Click the checkmark in the top-right of the dialog to accpet the changes

 

* You may not have created the story pages at this stage and will want to do that before linking the story.

Home Page Gallery Type
Home page gallery type configuration dialog
Home Page Gallery Items
Home page gallery items configuration dialog
Home Section Story List
Published version of a section story list on the magazine home page.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the title for the "Magazine" page

5. Click the checkbox next to the "index" page

6. Click the "Open" button in the toolbar

7. Drag and drop a "Container" component into the page body

8. Click on the container component to open its toolbar

9. Click the wrench icon in the toolbar

10. Click in the "CSS Class" field and then type: vt-mag-sections

11. Click the checkmark in the top-right of the dialog to accept the changes

12. Drag and drop another "Container" component inside the first container

13. Drag and drop a "Text" component into the inner container

14. Click on the Text component to open its toolbar

15. Click the wrench icon in the toolbar

16. Click in the "CSS Class" field and then type: vt-list-header vt-corner

17. Click the checkmark in the top-right of the dialog to accept the changes

18. Click on the Text component to open its toolbar

19. Click on the pencil icon in the toolbar to enter edit mode

20. Click the expand icon third from the right in the toolbar

21. Click the text element type button, second from right in the toolbar and select: Heading 2

22. Type the section title matching the tag created for it

23. Click the collapse icon, far right in the toolbar

24. Click the checkmark far right in the toolbar

26. Drag and drop a "List" component under the text component in the inner-most container

27. Click the list component to display its toolbar

28. Click the wrench icon in the toolbar

29. Click the "CSS Class" field and type: vt-mag-sectionStoryList

30. Set the "Build list using" pulldown to: Tags

31. Click in the "Parent page" field and type: /content/sitename_vt_edu/en/magazine/stories/[issue folder]

32. Click in the "Tags" field and enter the tag name for this section

33. Set the "Match" pulldown to: all tags

34. Set the "Order by" pulldown to: onTime

35. Click the "Include Hidden Pages" checkbox

36. Click on the "Display Options" tab at the top of the dialog box

37. Set the "DisplayType" pulldown to: Column(s)

38. Set the "Number of Columns" pulldown to: 3

39. Set the "Image Position" pulldown to: Top

40. Set the "Title" pulldown to: Show

41. Set the "Description" pulldown to: Show

42. Click the checkmark in the top-right of the dialog to accept the changes

Repeat steps 12 - 42 for each section in your magazine, or copy and paste the inner container element and update the header text and list parent page path.

Home Section Story List Edit Mode
Home page section story list in edit mode with highlighted components.
Home Page Section Container Config
Home page section story list container configuration dialog.

The inner container for each section list and list header does not require any additional configuration.

Home Page Section Story List Header Config
Home page section story list header text component configuration dialog.
Home Page Section Story List Configuration Properties
Home page section story list component List Properties configuration dialog.
Home Page Story Section List Component Display Options
Home page section story list component Display Options configuration dialog.
Footer Example On Prod

If you wish to have a custom footer for the magazine apart from your main site footer, you will need to follow the instructions below. The magazine footer should be minimal in content and be as close to the example as possible.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the checkmark next to the "Magazine" page title

5. Click the "Open" button in the toolbar

6. Click on the "Inherited Paragraph System" box in the Footer Components area to display its toolbar

7. Click the wrench icon in the toolbar

8. Click the checkbox for "Disable Inheritance"

9. Click the checkmark in the top-right of the dialog to accept the changes

You will need to add the Multi Columns component to the footer first. The subsections ( i - iv ) have the instructions for the content of each column.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the checkmark next to the "Magazine" page title

5. Click the "Open" button in the toolbar

6. Drag and drop a "Multi Columns" component into the Footer Components area

7. Click on the Multi Columns component to display its toolbar

8. Click the wrench icon in the toolbar

9. Click in the "CSS Class" field and type: vt-mag-footer

10. Set the "Number of Columns" pulldown to: 4

11. Click the checkmark in the top-right of the dialog to accept the changes

This column contains the logo lockup for your organization. You will need to use an all black version with a transparent background. The instructions contain how to upload the lockup and then insert it into the first column of the footer Multi Columns coomponent.

1. Log into https://author.ensemble.vt.edu

2. Click on the "My Assets" link in the left-hand menu.

3. Click on the title for the site where you are adding the magaine content

4. If you have already created a folder for magazine assets click the title of that folder, if not click the "Create Folder" button in the tool bar and make a folder for the assets and then click the title for that folder

5. Click the "Upload Assets" button in the toolbar

6. Navigate to where you saved the black logo lockup for your organization and then click on the asset in the file dialog

7. Click the "Open" button in the bottom-right corner of the fiel dialog

8. Click the "Upload" button

9. Click the checkbox next to the title for the uploaded logo lockup

10. Click the "View Properties" button in the toolbar

11. Click the "Edit" button in the toolbar

12. Click in the "Title" field and type a title for the asset, e.g., Black Logo Lockup

13. Click in the "Alternative Text" field and enter a description for the logo lockup, e.g., College of Engineering logo

14. Click the "Done" button in the upper-right corner of the window

15. Click the "My Sites" button in the left-hand menu

16. Click on the site name for the site you want to add a magazine to from the My Sites page

17. Click on the title for the "en" page to get to the parent page level of the site

18. Click on the checkmark next to the "Magazine" page title

19. Click the "Open" button in the toolbar

20. Drag and drop an "Image" component from the Components side panel into the first column of the footer area Multi Columns component

21. Click on the "Assets" tab in the side panel

22. Drag and drop the uploaded logo lockup into the Image component in the first column of the Multi Columns component

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the checkmark next to the "Magazine" page title

5. Click the "Open" button in the toolbar

6. Drag and drop a "Text" component into the second column of the Multi Columns component

7. Click on the Text component to display its toolbar

8. Click on the pencil icon in the component toolbar to enter edit mode

9. Click the expand icon third from the right in the toolbar

10. Click the bulleted list tool in the Text component toolbar, tenth from the left

11. Type the following items:

  • Current issue
  • Past issues
  • [Main site title], e.g., College of Engineering
  • Contact us

12. Select the "Current issue" text

13. Click the chain icon in the toolbar, fourth from the left

14. Type the link to the current issue: https://sitename.vt.edu/magazine

15. Select the "Past issues" text

16. Click the chain icon in the toolbar, fourth from the left

17. Type the link to the Past Issues page: https://sitename.vt.edu/magazine/issues.html

18. Select the text you entered for your main site title

19. Click the chain icon in the toolbar, fourth from the left

20. Type the link to the main site page: https://sitename.vt.edu

21. Select the "Contact us" text

22. Click the chain icon in the toolbar, fourth from the left

23. Type the link to either a page of contacts or an email address, e.g., mailto:sitename_contact@vt.edu

24. Click the collapse icon, far right in the toolbar

25. Click the checkmark far right in the toolbar

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the checkmark next to the "Magazine" page title

5. Click the "Open" button in the toolbar

6. Drag and drop a "Text" component into the third column of the Multi Columns component

7. Click on the Text component to display its toolbar

8. Click on the pencil icon in the toolbar to enter edit mode

9. Click the expand icon third from the right in the toolbar

10. Click the bulleted list tool in the Text component toolbar, tenth from the left

11. Type the following items:

  • Give
  • Apply
  • Visit

12. Select the "Give" text

13. Click the chain icon in the toolbar, fourth from the left

14. Type the link to the main giving page form: https://webapps.es.vt.edu/givingto/gift

15. Select the "Apply" text

16. Click the chain icon in the toolbar, fourth from the left

17. Type the link to the main application page: https://vt.edu/apply

18. Select the "Visit" text

19. Click the chain icon in the toolbar, fourth from the left

20. Type the link to the main visit page: https://vt.edu/visit

21. Click the collapse icon, far right in the toolbar

22. Click the checkmark far right in the toolbar

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the checkmark next to the "Magazine" page title

5. Click the "Open" button in the toolbar

6. Drag and drop an "HTML" component into the right-most column in the Multi Columns component

7. Click on the HTML component to display its toolbar

8. Click the wrench icon in the toolbar

9. Click in the "HTML" text area field and paste social media code from this page [link needed]

10. Edit the links in the social media code to correspond with your social media site links

11. Click the checkmark in the top-right corner of the dialog to accept the changes

When the main site inheritance is disabled for the footer, your analytics get disabled as well. You will need to add a duplicate analytics component into the footer. This does not cause problems with Google Analytics, it just adds the magazine pages back to the data being sent to your account.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the checkmark next to the "Magazine" page title

5. Click the "Open" button in the toolbar

6. Drag and drop an "Analytics component" from the "Components" side panel into the "Footer Components" area of the page

7. Click on the analytics component to open its toolbar

8. Click the wrench icon in the toolbar

9. Set the "Type" pulldown to: Universal Analytics

10. Click in the "Analytics ID" field

11. Copy and paste your Google Analytics ID, e.g., UA-12345678-1

12. Click the checkmark in the top-right of the dialog to accept the changes

Footer Example Edit Mode
Footer Inheritance Configuration
Footer inherited paragraph system configuration dialog.
Footer Multicolumn Config
Footer multicolumn component configuration dialog.
Footer Analytics Config
Footer analytics component configuration dialog.
Example Article Page Story
Example Article Page story.

When creating the Article Page template files for your stories you will want to set the "On time" for each story so they sort properly in the home page lists. Typically, this is done by setting the on time for items you want to appear first in the lists to dates closer to today, or the expected publish date. For instance, if today is January 25, 2018, you would set the first article to appear January 25, 2018, 12:00 am and then subsequent articles would be set at ten minute intervals backwards in time, e.g., January 24, 2018 11:50 pm, January 24, 2018 11:40 pm, January 24, 2018 11:30 pm, and so on. This allows you to sort the stories by "onTime" in the List Properties for the home page section story lists, and gives you some flexibility for shuffling the order without having to change too many on times for existing story pages.

The following instructions will walk you through creating the articles for an issue:

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the title for the "Magazine" page

5. Click on the title for the "Stories" page

6. Click on the title for the issue page/folder that you wish to add stories

7. Click the "Create" button in the toolbar

8. Click on the "Article Page" template

9. Click the "Next" button in the top-right of the window

10. Click in the "Name" field and type the lowercase, dash seperated name for the story, e.g., my-story-name

11. Click in the "Title" field and type the mixed case, space seperated name for the story, e.g., My Story Name

12. Click in the "Tags" field and type the tag title for the issue this story belongs to

13. Click on the matching tag in the list below the "Tags" field

14. Click in the "Tags" field and type the tag title for the section the story belongs to

15. Click on the matching tag in the list below the "Tags" field

16. Set the "Page Style" pulldown to: Without Right Column

17. Scroll the window so you can see the "On / Off Time" section of the page

18. Click on the calendar icon to the right of the "On Time" field to set the article on time using the methodology explained above

19. Click the "Article Info" tab

20. Click in the "Bios" field and start typing the author's name OR click the "Bios" pulldown button to list all authors with biography pages on this site

21. Click on the author's name that appears under the "Bios" field

22. Click the "Create" button in the top-right of the window

23. Click the "Done" button in the Page Created dialog

Repeat steps 7 - 23 for each story in your magazine issue. When you have created all the pages, proceed to open each and create content for them using the features described in the "Article page features" section of this document.

 

Article Page Creation Select Template
Page creation dialog selecting an Article Page template.
Article Page Creation Basic Page Properties
Example of what an article page Basic properties might be.
Article Page Creation Article Info Properties
Example of what an article page Article Info properties might be.

Publishing the magazine

Once all the required pages and content are created, you will need to publish everything. It is recommended that you start by publishing the stories for the given issue and then work your way up the structure publishing the site level parent pages (index, issues, sections, etc.) before publishing the /magazine page last.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the title for the "Magazine" page

5. Click on the title for the "Stories" page

6. Click on the title for the issue page, e.g., Winter 2017

7. Click on the view toggle button until you are in List view

8. Click on the checkbox in the list header row, just below the "Create" button in the toolbar to select all the pages

9. Click the "Publish" button in the toolbar

10. Click the "Publish" option in the menu

11. Click the back arrow in the black bar above the toolbar to step back through the page structure

12. Click the checkbox next to the issue title

13. Click the "Publish" button in the toolbar

14. Click the "Publish" option in the menu

15. Click the back arrow in the black bar above the toolbar to step back through the page structure

16. Click on the title for the "Sections" page

17. Click on the checkbox in the list header row, just below the Create button in the toolbar to select all the pages

18. Click the "Publish" button in the toolbar

19. Click the "Publish" option in the menu

20. Click the back arrow in the black bar above the toolbar to step back through the page structure

21. Click on the checkbox in the list header row, just below the Create button in the toolbar to select all the pages

22. Click the "Publish" button in the toolbar

23. Click the "Publish" option in the menu

24. Click the back arrow in the black bar above the toolbar to step back through the page structure

25. Click on the checkbox next to the title for the "Magazine" page

26. Click the "Publish" button in the toolbar

27. Click the "Publish" option in the menu

List View
List view of magazine pages with the back button in the black bar and the select all checkbox highlighted.

Archiving past issues

This is very important to know how to do correctly and is why this process appears before any other implementation options or features. Not doing this properly will cause major problems with this magazine template's functionality that will require one of the University Relations front-end developers to assist in fixing. There is a reminder below, but do not "MOVE" the /magazine/index page. You will be making a copy of it and then renaming the copy with the "MOVE" function with the instructions below. This will prevent anything bad from happening when archiving old issues.

Once you are ready to create a new issue:

Column View
My Sites in Column View with view change button highlighted.
Copy Index
My Sites in Column View with magazine index selected and copy page button highlighted.
Paste Index
My Sites in Column View with magazine issues page selected and paste page button highlighted.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the title for the "Magazine" page

5. Click on the "List View" button in the top-right portion of the window to change to Column View

6. Click on the home page for the magazine

7. Click the "Copy" button in the toolbar

8. Click on the "Past Issues" page

9. Click the "Paste" button in the toolbar

10. Click on the "Column View" button to return to List View

Rename Fields
Move title and file name renaming dialog with fields highlighted.
Rename Destination
Move destination selection with Past Issues highlighted.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the title for the "Magazine" page

5. Click on the title for the "Past Issues" page

6. Click the checkbox next to the issue you want to rename

7. Click the "Move" button in the toolbar

8. In the "Title" field type the mixed case, space separated title for the magazine issue, e.g., Winter 2017

9. In the "Name" field type the lowercase, dash seperated name that corresponds to the tag name for the issue, e.g., winter-2017

10. Click "Next" in the top-right of the window

11. Click on "Past Issues" in the breadcrumb list above the page display window
NOTE: The destination for renaming will always be one level back from what is displayed by default

12. Click "Next" in the top-right of the window

13. Click "Next" or "Move" in the top-right of the window

Mag2 Cover Example
Sample issue page image.

Because the main issue page uses the Home Page template you will need to create a cover image and add it to the Page Properties for the page under the Page Image tab. Create the image with an 8.5 x 11 width to height ratio in Photoshop or the image editing application of your choice and save it so it's no taller than 2000 pixels when exported to JPG format, then follow the next instructions.

Cover Image Properties
Cover image properties dialog with title and alternative text field highlighted.

1. Log into https://author.ensemble.vt.edu

2. Click on the "My Assets" link in the left-hand menu

3. Click on the site name for the site you want to add the cover image asset

4. Navigate to where you want to store this image or use the "Create Folder" button in the toolbar

5. Click the "Upload Asset(s)" button in the toolbar

6. Select the cover image from the open dialog

7. Click the "Open" button in the dialog after selecting the cover image JPG file

8. Once uploaded, click the checkbox next to the cover image title

9. Click the "View Properties" button in the toolbar

10. Click the "Edit" button in the top-left of the window

11. Click in the "Title" field and add a title for the cover image, e.g., Winter 2017

12. Click in the "Alternative Text" field and add a text description for the cover image, e.g., Winter 2017 cover image of Julia Ross, dean of the College of Engineering

13. Click the "Done" button in the top-right of the window

Page Image
Open issue page with Page Properties open to Page Image tab, and with Page Information button highlighted.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the title for the "Magazine" page

5. Click on the title for the "Past Issues" page

6. Click the checkbox next to the issue you want to add the Page Image to

7. Click the "Open" button in the toolbar

8. Make sure the side panel is open and the Assets are visible

9. Click on the "Page Information" button in the top-left corner of the window

10. Click on "Open Properties" from the Page Information menu

11. Click on the "Page Image" tab

12. Drag and drop the cover image from Assets to the open Page Image tab

13. Click the check mark in the top-right of the dialog to accept the changes

Outer container configuration for Past Issues page
Outer Past Issues Container component configuration dialog.
Past Issues Text Config
Past Issues Text component configuration.
Issue List Properties
Past Issues List component properties.
Issue List Display Options
Past Issues List component display options.

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the title for the "Magazine" page

5. Click on the checkbox next to the title for the "Past Issues" page

6. Click on the "Open" button in the toolbar

7. Drag and drop a "Container" component into the body from the Components side panel

8. Click the container component to open its toolbar

9. Click the wrench icon in the toolbar

10. Click in the "CSS Class" field and type: vt-mag-sections

11. Click the checkmark in the top-right of the dialog to accept the change

12. Drag and drop another "Container" component inside the first one

13. Drag and drop a "Text" component into the inner-most container

14. Click the text component to open its toolbar

15. Click the wrench icon in the toolbar

16. Click in the "CSS Class" field and type: vt-list-header vt-corner

17. Click the checkmark in the top-right of the dialog to accept the change

18. Click the text component again to open its toolbar

19. Click the pencil icon in the toolbar to enter edit mode

20. Click the expand icon third from the right in the toolbar

21. Click the text element type button, second from right in the toolbar and select: Heading 2

22. Type: Past Issues

23. Click the collapse icon, far right in the toolbar

24. Click the checkmark far right in the toolbar

26. Drag and drop a "List" component under the text component in the inner-most container

27. Click the list component to open its toolbar

28. Click the wrench icon in the toolbar

29. Click the "CSS Class" field and type: vt-mag-sectionStoryList

30. Set the "Build list using" pulldown to: Child pages

31. Click in the "Children of" field and type: /content/sitename_vt_edu/en/magazine/issues

32. Set the "Order by" pulldown to: Created Date

33. Click the "Include Hidden Pages" checkbox

34. Click on the "Display Options" tab at the top of the dialog box

35. Set the "DisplayType" pulldown to: Column(s)

36. Set the "Number of Columns" pulldown to: 3

37. Set the "Image Position" pulldown to: Top

38. Set the "Title" pulldown to: Show

39. Click the checkmark in the top-right of the dialog to accept the changes

Follow the instrucitons in the "Site Level Needs section", Create the magazine tags to create a new tag under "Issues".

1. Log into https://author.ensemble.vt.edu

2. Click on the site name for the site you want to add a magazine to from the My Sites page

3. Click on the title for the "en" page to get to the parent page level of the site

4. Click on the title for the "Magazine" page

5. Click the checkbox next to the "index" page title

6. Click the "View Properties" button in the toolbar at the top of the window

7. Click the "X" next to the tag name below the "Tags" field for the previous issue title to remove the tag

8. Click in the "Tags" field and type the issue tag title for the new magazine, e.g., Spring 2018

9. Click on the matching tag in the list below the "Tags" field

10. Click the "Done" button in the top-right of the window

Follow the instructions in the "Site level needs" section 4.d, Create the /magazine/stories/[current issue] page to create the new article folder.

You will need to update the List components on the /magazine/index page so that their "Parent page" path points at the new issue article folder. You can edit the path by clicking in the field and then using the arrow keys on the keyboard to scroll to the portion of the path that needs to be updated, e.g.,

FROM:

/content/sitename_vt_edu/en/magazine/stories/winter-2017

TO:

/content/sitename_vt_edu/en/magazine/stories/spring-2018

You can now create new Article Page template pages under the /magazine/stories/[current issue] page for the new issue.

Article page features

Article pages within this magazine template have many features that are comprised of components and CSS classes that are added to them. The following section of the document outlines what these features are and how to implement them within your article pages.

Article image hero/Parallax hero

article image demonstration

This is the image that resides at the top of the article, and is pulled from to populate the list on the home page.

  1. Click on the image component at the top of the page to open its toolbar
  2. Click the wrench icon in the toolbar
  3. Click on the "Assets" tab in the side panel
  4. Drag and drop an image into the open image component dialog
  5. If parallax feature is desired, click in the "CSS Field" and type: vt-mag-parallaxHeader
  6. Click the checkmark in the top-right of the dialog to accept the changes
  7. Give the image alternative text in the "Accessibility" tab if prompted and repeat step 6
article image edit view with numbered markers for each component

Video hero

video hero demonstration

If wish to use a video hero in place of the embedded image component on an story page:

  1. Drag and drop a "HTML" component below the empty embedded image component
  2. Click on the html component to open its toolbar
  3. Click the wrench icon in the toolbar
  4. Click in the “CSS Class” field and type: vt-mag-vidHeader
  5. Click In the “HTML” field and paste the code snippet below
  6. Select the "videoSource" link text between the quotes and replace with the path to your video in the site's assets folder, e.g., /content/dam/sitename_vt_edu/video.mp4
  7. Select the "videoHeader" text between the quotes and replace with your text header
    NOTE - If this option is skipped the video will appear without a heading overlay
  8. Select the "videoCaption" text between the quotes and replace with your text caption
    NOTE - If this option is skipped the video will appear without a caption below the heading overlay
  9. Check to make sure the items above are contained in quotes ("") and add if necessary
  10. If parallax feature is desired, click in the "CSS Field" and type: vt-mag-parallaxHeader
  11. Click the checkmark in the top-right of the dialog to accept the changes

Video hero code

<!-- copy everything below -->

<script>

var videoSource = "/content/dam/path/to/your/video.mp4",

   videoPoster = "/content/dam/alumni_vt_edu/video/helmet-research-poster.jpg",

   videoHeader = "",

   videoCaption = "";

</script>

 

<video playsinline="" autoplay="" loop="" id="vt_bgVid" muted="">

</video>

 

<div class="vt-vidPlayPause" onclick="javascript:playPause();"></div>

 

<div class="vt-vid-overlay-column">

 <div class="vt-vid-overlay-row">

   <div class="vt-vid-overlay">

       <span class="vt-vid-header"></span>

       <p class="vt-vid-subhead"></p>

   </div>

 </div>

</div>

<!-- copy everything above -->

html component edit view with label

Article image overlay

title overlay and color demonstration

This is the page title, which is pulled from the page properties. Its positioning and color are controlled by a CSS class on the article image.

  1. Click on the embedded image component at the top of the article page to open its toolbar
  2. Click the wrench icon in the toolbar
  3. Click in the “CSS Class” field and type: vt-overlay-[title position] vt-overlay-[shade]
    • Note - These classes are variable, and are used to control the display of the title over the image
    • Title position options:
      • vt-overlay-topLeft
      • vt-overlay-topRight
      • vt-overlay-bottomLeft
      • vt-overlay-bottomRight
      • vt-overlay-middleLeft
      • vt-overlay-middleRight
    • Shade options:
      • vt-overlay-light
      • vt-overlay-dark
  4. Click the checkmark in the top-right of the dialog to accept the changes
article image edit view with numbered markers for each component
subtitle demonstration

The subtitle is populated from the page properties. To enter a subtitle on an open page:

  1. Click on the "Page Information" button
  2. Click on "Open Properties" from the Page Information menu
  3. Click in the “Subtitle” field and type or paste your subtitle
  4. Click the checkmark in the top-right of the dialog to accept the changes
page settings drop list with numbered markers for each component
Styled byline demo

The byline is populated by the Ensemble Biography pages and page properties.

To establish the byline of an article page that is open:

  1. Click on the "Page Information" button in the top-left corner of the window</li>
  2. Click on "Open Properties" from the Page Information menu
  3. Click the “Article Info” tab
  4. Click in the "Bios" field and start typing the author's name OR click the "Bios" pulldown button to list all authors with biography pages on this site
  5. Click on the author's name that appears under the "Bios" field
  6. Click the checkmark in the top-right corner of the dialog to accept the changes
open page properties drop list
a full-width element located between two text components

These are images that break up the text and span the full-width of the page.

  1. Scroll the page to a break between two components
  2. Drag and drop a "Container" component between the two components.
  3. Click the container component to display its toolbar
  4. Click the wrench icon in the toolbar
  5. Click the “Full Browser Width” checkbox
  6. Click the checkmark in the top right of the dialog to accept the changes
  7. Drag and drop an "Image" component into the container
  8. Click the container component to display its toolbar
  9. Click the wrench icon in the toolbar
  10. Click on the "Assets" tab in the side panel
  11. Drag and drop an image into the open image component dialog
  12. Click the checkmark in the top-right corner of the dialog to accept the changes
  13. Give the image alternative text in the "Accessibility" tab if prompted
container edit view with numbered markers for each component
outdented element that breaks out of the width of the body text

These are elements that break outside of the width of the body text. This is done to add interest to the layout when needed.

  1. Scroll the page to a break between two components
  2. Drag and drop a "Container" component between the two components.
  3. Click the container component to display its toolbar
  4. Click the wrench icon in the toolbar
  5. Click in the “CSS Class” field and type: vt-mag-outdent
  6. Click the checkmark in the top-right of the dialog to accept the changes
  7. Drag and drop desired component(s) into the container and configure as needed
container edit view with numbered markers for each component
User view of pulled items

Pulled items have two different style types. There’s the vt-mag-pullQuote class that will add the corner decorations to the container and a vt-mag-pullOutdent class that does not have decorations. In order to style the quote or general text in the pulled item, that component will need two classes, quote-item quote-text, if it is a quote with attribution a second text component with the classes quote-item attribution assigned to it is needed. If creating a side bar using the vt-mag-pullOutdent class on the container you can place any other components into the container to be pulled left or right. To use the same text treatment, simply add the quote-item quote-text classes to the text component you want styled similarly.

The position and size of the pulled item is determined by Bootstrap classes:

  • pull-right OR pull-left  -- position of pulled item
  • col-xs-12 col-md-9 -- width of pulled item at mobile and desktop sizes, respectively

To start a pulled item:

  1. Drag and drop a "Container" component on the page where desired
  2. Click on the container component to open its toolbar
  3. Click the wrench icon in the toolbar
  4. Click in the "CSS Class" field and type: vt-mag-pullQuote OR vt-mag-pullOutdent
  5. Type the position and size classes into the Container CSS Class field, e.g., pull-right col-xs-12 col-md-9
  6. Click the checkmark in the top-right of the dialog to accept the changes

If creating a decorated pull quote:

  1. Drag and drop two "Text" components into the Container component
  2. Click on the first text component to open its toolbar
  3. Click the wrench icon in the toolbar
  4. Click in the "CSS Class" field and type: quote-item quote-text
  5. Click the checkmark in the top-right of the dialog to accept the changes
  6. Click on the first text component to open its toolbar
  7. Click on the pencil icon in the component toolbar to enter edit mode
  8. Type the quote text
  9. Click the checkmark far right in the toolbar
  10. Click on the second text component to open its toolbar
  11. Click the wrench icon in the toolbar
  12. Click in the "CSS Class" field and type: quote-item attribution
  13. Click the checkmark in the top-right of the dialog to accept the changes
  14. Click on the first text component to open its toolbar
  15. Click on the pencil icon in the component toolbar to enter edit mode
  16. Type the attribution text
  17. Click the checkmark far right in the toolbar

Pull Quote Config Dialogs

Pull Outdent (side bar) Config Dialogs

The image component does not need an additional class.

body text closing symbol demonstration

This is the decoration on the last paragraph of the article, signifying the end of the piece.

  1. Scroll to the last text component on the page
  2. Click the last text component to open its toolbar
  3. Click the wrench icon in the toolbar
  4. Click in the “CSS Class” field and type: vt-mag-articleClose
  5. Click the checkmark in the top-right of the dialog to accept the changes
pull quote edit view with numbered markers for each component
call to action demonstration

At the end of your piece, you may want to have a section that tells the reader to do something. This is the call-to-action text.

  1. Scroll the page to the last component
  2. Drag and drop a "Text" component below the last component on the page
  3. Click the text component to display its toolbar
  4. Click on the wrench icon in the toolbar
  5. Click in the “CSS Class” field and type: vt-mag-callToAction
  6. Click the checkmark in the top right of the dialog to accept the changes
  7. Click the text component to display its toolbar
  8. Click on the pencil icon in the toolbar
  9. Type the call to action text
  10. Click the checkmark in the text component toolbar to accept the changes
call to action edit view with labels
related articles demonstration

The last content in an article is a list of related articles. This helps the user to continue exploring the magazine without returning to the home page to select a new story.

  1. Scroll the page to the last component at the bottom of the page.
  2. Drag and drop a "Container" component underneath the last text component.
  3. Click on the container component to open its toolbar
  4. Click the wrench icon in the toolbar
  5. Click in the “CSS Class” field and type: vt-mag-articleEnd
  6. Click the "Full Browser Width" checkbox
  7. Click the checkmark in the top-right of the dialog to accept the changes
  8. Drag and drop another "Container" component inside the first container.
  9. Click on the container component to open its toolbar
  10. Click the wrench icon in the toolbar
  11. Click in the “CSS Class” field and type vt-mag-horizontalRule
  12. Click the checkmark in the top-right of the dialog to accept the changes
  13. Drag and drop a "List" component inside the inner container
  14. Click the wrench icon to open the list component’s edit properties window
  15. Click in the “CSS Field” and type: vt-mag-sectionStoryList
  16. Set the “Build list using” pulldown to: Tags
  17. Click the “Parent Page” file browser button, and select the parent page to use.
  18. Click in the "Limit" field and type: 3
  19. Click the checkmark in the top-right of the dialog to accept the changes
related article edit window with labels
parallax demonstration

Image and gallery components can have a parallax effect, whereby the image moves at a different speed than the scrolling of the page.

Gallery parallax

  1. Drag and drop a "Gallery" component into the body
  2. Click the gallery component to open its toolbar
  3. Click on the wrench icon in the toolbar
  4. Click in the “CSS Class” field and type: vt-parallax
  5. Set the “Gallery Type” pulldown to: Carousel
  6. Set “Play Speed” to: 0
  7. Set the “Controls Type” pulldown to: Hidden
  8. Click the checkmark in the top-right of the dialog to accept the changes
parallax gallery component edit view with labels

Image parallax

  1. Drag and drop an "Image" component into the body
  2. Click on the image component to open its toolbar
  3. Click on the wrench icon in the toolbar
  4. Click the "Assets" tab in the side panel
  5. Drag and drop an image into the open image component dialog
  6. Click in the “CSS Class” field and type: vt-parallax
  7. Click the checkmark in the top-right corner of the dialog to accept the changes
  8. Give the image alternative text in the "Accessibility" tab if prompted and repeat step 7
image component edit view with labels
multicolumn offset demonstration

Multicolumn components are normally evenly spaced. If you need different sized columns in your layout, you have more options. These are applied using CSS classes on the multicolumn component.

  1. Drag and drop a "Multi Columns" component into the body
  2. Click the multi columns component to open its toolbar
  3. Click on the wrench icon in the toolbar
  4. Click in the “CSS Class” field and type: vt-mag-[custom column name]
    • Custom column names vary. Here are all the options:
      • vt-mag-2col-md-6-only

      • vt-mag-2col-7-4-offset-1

      • vt-mag-2col-4-7-offset-1

      • vt-mag-2col-7-5

      • vt-mag-2col-5-7

      • vt-mag-2col-8-4

      • vt-mag-2col-4-8

      • vt-mag-2col-9-3

      • vt-mag-2col-3-9

  5. Click the checkmark in the top-right of the dialog to accept the changes

 

multicolumn edit view with labels
Full width video demonstration

You can insert a video that autoplays and is full-width.

  1. Scroll the page to a break between two components
  2. Drag and drop a "Container" component in-between the two text components in the body
  3. Click the container component to open its toolbar
  4. Click on the wrench icon in the toolbar
  5. Click the "Full Browser Width" checkbox
  6. Click the checkmark in the top-right of the dialog to accept the changes

If using a looped local video uploaded to assets:

  1. Drag and drop a "HTML" component inside the container
  2. Click the container component to open its toolbar
  3. Click on the wrench icon in the toolbar
  4. In the “HTML” field, enter the HTML source code (listed below). Note - replace the path to the video file with the path to your video.
  5. Click the checkmark in the top-right of the dialog to accept the changes

If using YouTube or other externally hosted video:

  1. Drag and drop a "Media - External" component into the full width container
  2. Click on the media external component to open its toolbar
  3. Click on the wrench icon in the toolbar
  4. [Need more screenshots and steps for this component]

Full width looped video code

<!-- copy everything below -->

<video src="/content/dam/sitename_vt_edu/video.mp4" playsinline="" autoplay="" loop="" class="vt-bgVid" id="vid01" muted=""></video>

<div class="vt-vidPlayPause" onclick="javascript:playPause('vid01');"></div>

<!-- copy everything above -->

 

 

full width video edit view with labels