Tag: not in workbook

Link Within a Page

You can link to a specific place within your page using anchors. You can also link to individual sliders or FAQs. This is useful when you have a long page and want to provide shortcuts to certain sections or when you want to direct the user to a specific piece of information within a page.

Setting Up Anchors

The first step is to create the anchor on the page in the place where you want to link to. Sliders and FAQs already have this code, so you would not need to do this step.

  1. Put your cursor in the location where you want to link to.
  2. Click the anchor icon anchor icon in the toolbar.
  3. Enter a name for the anchor. This should be short, one to two words, using only use lower case letters, numbers, and hyphens. Each anchor you create on the page must be unique to the page.
  4. Click the blue OK button.

Finding the Slider or FAQ Anchor ID

Sliders and FAQs already have assigned IDs that you can link to. The page the slider or FAQ is on must already be live.

  1. Go to the live page.
  2. Right click on the slider or FAQ title that you want to link to.
  3. Select “Inspect”.
  4. Look at the highlighted code and go up two lines.
  5. You should see something like id=”slider-d11e2783″ for sliders or id=”question-d11e1234″ for FAQs. The text in quotation marks is the name you need to link to.

Please note, if the title in the slider or FAQ snippet changes the ID will also change and your link would need to be updated.

  1. Select the text you want to link from.
  2. Click the Insert/Edit Link icon insert/edit link icon in the toolbar.
  3. Enter the appropriate URL.
    1. If the anchor is on the same page as the link you are creating, in the URL field enter #name (hash followed by whatever you named the anchor or the slider/FAQ ID).
    2. If the anchor is on a different page than the link you are creating or you are creating the link in a navigation file, first enter the URL for the page that the anchor is on by using the file picker to select the page within your site or pasting the outside URL. Then add #name (hash followed by whatever you named the anchor or the slider/FAQ ID). For an internal page your URL may look like {{f:123456}}#name.
  4. Click the blue OK button.

Research Projects

Academic departments have the option to automatically pull in research project information to their CMS website. The information comes from a database of projects that are approved for public knowledge by the Research Office. The standard information that is pulled in is:

  • Principal Investigator
  • Co-PI
  • College/School
  • Department(s)
  • Sponsor
  • Center/Institute

The PI and Co-PI fields will automatically link names to their faculty page if one is set up in the CMS.

Example of research projects listed on a website.

Departments can be given the ability to override this information (as viewed on your departmental website only) or manually add projects that are not listed. If you have never used this function before, you must contact cmshelp@mtu.edu to get set up. Departments currently set up are Mechanical Engineering-Engineering Mechanics, Electrical and Computer Engineering, and Computer Science.

  1. From the Pages List View navigate to the research projects folder.
  2. From the dropdown next to the green +New button at the top of the screen select Research Project.
    Create Research Project screen
  3. Page Title: Enter the name of the research project.
  4. Filename: Enter the IR Number or a short project name in the filename using only lower case letters, numbers, and hyphens.
  5. Leave the Research Project Options as is.
  6. Click the blue Create button. The item will open you up to the Edit screen which is not used.
  7. From the Properties tab, go to MultiEdit Content.
    Research Project MultiEdit Content screen.
  8. Project Title: This field will already be populated based on what you entered when you created the Research Project item.
  9. Start Date: Select a start date for when you want the content to go live.
  10. End Date: Select an end date for when you want the content to no longer be live.
  11. IR Number: Enter the IR Number for the project. If this number matches an existing IR number that is displaying on your page, the information you enter in the fields will override the information that comes from the database.
  12. Award Amount: Enter the award amount for the project including the $.
  13. College/School: Enter the college or school name that the project is under.
  14. Department: Enter the department name for the project.
  15. Sponsor: Enter the name of the sponsor for the project.
  16. Center/Institute: Enter the name of associated centers or institutes for the project as needed.
  17. Principal Investigator Name: Enter the name of the principal investigator for the project.
  18. Principal Investigator Email: Enter the email address for the principal investigator for the project in order to link to an existing personnel item.
  19. Co-Investigator 1-4 Name: Enter the names of up to four co-investigators for the project.
  20. Co-Investigator 1-4 User IDEnter the corresponding user ID for the co-investigator(s) listed in order to link to existing personnel items.
  21. Body: Use the mini-editor to add additional information to the research project.
  22. Save the changes with the blue Save button at the bottom of the screen.
  23. Publish the item.

Creating Headings

It is important to use properly structured HTML headings when organizing your web content. Think of webpage headings as a table of contents for a story.

Headings are not required on webpages. However, they help break up and organize lengthy informational webpages—improving readability. Proper heading use is not only important for accessibility, it also has search engine optimization benefits, which can help your webpages rank higher in Google’s search results.

Heading Order

A webpage should only have one heading level 1 <h1>. Your page’s title is automatically the <h1> of the webpage, so you do not need to apply that heading level yourself.

Any headings used in your body copy (after your page title) with then be an <h2> or lower. In total you can use headings 2-6. At Michigan Tech, we recommend sticking to headings 2-5 as an <h6> is not typically needed.

Nesting Headings

If you “nest” headings—in other words if you have a subheading of a heading—you should not skip heading levels. If you have an <h2> and you want to follow it with with a subheading, use an <h3>. If you follow that with a subheading of “equal weight”—use an <h3> again. A subhead of a subhead would be <h4>. Once you are done with subheadings, you can return to <h2>.

Please also keep in mind that sliders titles and sidebar titles are automatically <h2>s. If you choose to nest any headings inside a slider or sidebar, you should begin with the <h3> heading level.

Summary

Properly ordering your headings is important. You should not use headings to achieve visual-only results. For instance, if you have an announcement that you want to stand out, but which is not a heading for the content afterward—you should not use a heading. You can instead use bold, italics, or the options in the Styles dropdown like Large, Larger, Largest, Small, or Smaller to style paragraph text to look unique and stand out.

Creating Headings

To apply a heading style to a line of text, put your cursor inside of the line of text that you want to turn into a heading and then select a heading level from the left-most dropdown menu in the editor bar.

The heading menu dropdown within the OU Campus Editor toolbar.

To learn more about creating special heading styles:


Alumni Profiles

The Alumni Profile item is used to create individual people that can appear on the Alumni Profiles page or in department Academies.

Alumni profiles listing page.
Example of the Alumni Profiles page.
Screen shot of a department academy page.
Example of a department academy page.
Individual alumni profile page.
Example of an alumni profile page for a person.

Create New Alumni Profile Item

  1. From the Pages List View navigate to the folder where the profiles are saved.
  2. Click on the green +New button at the top of the page.
  3. Select Alumni Profile.
    Setup window for an Alumni Profile.
  4. Page Title: Enter the person’s name.
  5. Description: This is the meta description for the page. Enter a description that at least includes the person’s name.
  6. Keywords: This is the meta keywords for the page. It is comma separated words or phrases that can have limited SEO benefits. At least enter the person’s name.
  7. Add Navigation Item: Leave this option set to No.
  8. Filename: Follow the naming convention for your site. You can only use lower case letters, numbers, and hyphens. Generally this is last name hyphen first name.
  9. Leave Alumni Profile Page Options as is.
  10. Click the Create button to create the page.

Editable Regions

Edit screen showing the green button for the editable region.

The only editable region available for Alumni Profiles is Biography. Click the green Biography button to open the editor and enter the Biography content. This content is displayed on the person’s full page to the right of the photo and a truncated version will be displayed on the listing or academy page with a read more link to the full page (unless the Callout field is filled out on the MultiEdit Content scree). If you are pulling information from an existing profile, you will not put any content in this region.


Page Properties

The Properties button in the Page Actions Toolbar near the top of the page contains information about the page. You must have the page checked out to you to see all the options.

Parameters

Page parameters window.

The Alumni Profile item has the following parameters.

  • Title: This is used as the page title for the full page. Usually the person’s name.
  • Description: This is the meta description for the page. You should include the person’s name at a minimum.
  • Keywords: Comma separated, user-defined keywords that are used in searches to help find content and for limited SEO purposes. You should include the person’s name at a minimum.
  • Tags: Used within OU Campus to categorize pages and files so that it is easier to search for and filter them.
  • Page Heading: Usually the person’s name.
  • Breadcrumb: This field will set the page breadcrumb (in the light grey space at the top of the page below the site title). Usually the person’s name.
  • Existing Profile: If you are including an alumnus who is already created in another site, you can select that profile page using the icon next to this  field in order to pull the content from that profile. Be sure to select the .html file. All updates made to that original profile will automatically be made to this profile also. No other information should be entered in the region or MultiEdit Content screen.
  • Left Sidebar Section Options: Uncheck this box if you need to turn off the left sidebar on the full-page listing.
  • Save your changes.

MultiEdit Content

If you are pulling information from an existing profile, you will not need to edit any of these fields. You will use the Existing Profile field in Parameters instead.

First section of the alumni profile multiedit content screen.

  • Image: After creating a Personnel image type using the Image Editor, select the image using the icon next to the Image field and insert the personnel170 image.
  • Image Description: Put the person’s name in this field.
  • Prefix: Person’s prefix, if applicable.
  • First Name: Person’s first name.
  • Middle Name: Person’s middle name, if applicable.
  • Last Name: Person’s last name.
  • Suffix: Person’s suffix, if applicable.
  • Maiden Name: Person’s maiden name, if applicable.
  • Deceased: Check the box if the person is deceased.
  • Gender: Select the person’s gender, if applicable. Selecting Female is important for Presidential Council of Alumnae listings.

Degrees and awards sections of the alumni profile multiedit content screen.

  • Degrees: For up to three degrees that the person received from Michigan Tech, select the Major, enter the four-digit Class Year, and select the Degree.
  • Awards: For up to two awards that the person received from Michigan Tech, select the Award and enter the four-digit Year Awarded.

Extras section of the alumni profile multiedit content screen.

  • Induction Year: Enter the four-digit year the person was inducted into the academy.
  • Callout: Enter content to be used on the listing page. If this is left blank, a truncated version of the Biography region will be used.

Save your changes and Publish. The person’s information will automatically be added to the alumni profile or academy listing page on your site.


Buttons

There are three button colors that can be used in the CMS. They can easily be created when you set up your link or you can use the List Spread Buttons snippet to created multiple buttons in a row.

Yellow

Black

Blank

Primary Button

Good for calls-to-action, think of it as a main purpose for a user on a page. You can find examples on our Apply Now page and in the sidebar of our magazine which prompts the user to download the magazine.

Primary Button

Secondary Button

This button compliments a primary button in some format. Generally, you only use this button if you already have a primary button somewhere on your page.

Secondary Button

Styled Button

If you’re looking to have a link that is a bit more stylized but not necessarily a call to action, this is a good option. These links can be seen on our homepage as the link to more news and on profiles with CV’s. This is the default button style in the List Spread Buttons snippet, the RSS Feed Combined snippet, and the Top Title w/More Links snippet.

Styled Button

Creating a Single Button in the CMS

JustEdit Editor in an Editable Region

  1. Type the text you want to be in the button.
  2. Select the text and choose the Insert/edit Link icon from the toolbar. Insert/edit link icon.
  3. Enter the URL for the button to link to or select the appropriate CMS link using the file picker.
    insert-link
  4. From the Class dropdown at the bottom of the window choose “Link Button Yellow,” “Link Button Gray,” or “Link Button Blank.”
  5. Click the blue OK button.

“Mini Editor” in an Asset

  1. Type the text you want to be in the button.
  2. Select the text and choose the Insert/Edit Link icon from the toolbar. Insert/edit link icon.
  3. Link the text using the Link URL field.
    Insert/Edit Link window
  4. Go to the Advanced tab.
  5. Enter the appropriate button code in the Classes field (without quotation marks).
    1. “button” for a yellow button
    2. “button-black” for a black button
    3. “button-blank” for a blank button
      Advanced tab of the insert/edit link window
  6. Insert.

Creating Multiple Buttons in a Row in the CMS

Use the List Spread Buttons Snippet to create multiple buttons in a row.


Creating and Styling Tables

Data tables present tabular information in a grid. They are made up of columns and rows that communicate the meaning of the information. There are several options for styling your data in tables to allow for a clean, visually appealing look.

The use of HTML tables is reserved for displaying data in an organized manner. It is not proper to use table code to control webpage layout or design. To display content on your webpage in multiple columns, please refer to the Boxed Sections Snippets or the List Spread Buttons Snippet

Items marked with * are required for accessibility.

Insert Table

From the table icon table icon in the editor go to Insert Table and select the number of rows and columns for the table. Insert the data into the appropriate fields.

General Table Properties

Using the table icon or right clicking on the table, go to Table Properties.

screen shot of the general tab of table properties

Field Purpose
Width Used to scale the width of the table, defined in percentage (e.g. use 50% to reduce the width of the table by half). This would evenly size all columns. A better option is to use min-width in the Style field of the Advanced Table Properties (see below) so that your tables look good both a desktop and mobile devices.
Height Used to scale the height of the table, defined in percentage (e.g. use 50% to reduce the height of the table by half). We do not recommend using this property.
Cell Spacing Defines spacing between cells. Typically the default is sufficient.
Cell Padding Defines padding within the cell between the border and the text. Typically the default is sufficient.
Border Defines the thickness of cell border. This property is not required when using the “auto striped” CSS class. Using this field creates an inaccessible table. Instead apply class of “lines” (see below).
Caption* Adds a caption field above the table. This field is used for a table heading. All tables are required to have a heading using either this caption or a regular heading immediately before the table.
Alignment Aligns the page on the table; options are Left, Center, and Right
Class Applies CSS from the Styles drop-down to the table. In order to create a striped table you can select “(custom)” then type “auto striped” or “striped” (without quotation marks) in the blank field below it. Auto striped will automatically alternate stripes on the rows in the table and is recommended. If you use striped you must designate the alternate rows in the code view by adding class=”alt” to the <tr>.

You can also begin creating a sortable table by typing “striped table-sortable data” (without quotation marks) in the custom class field. More instructions for completing this type of table setup is at the end of this post.

One other class you can use is “lines” (without quotation marks) to show the cell borders as an alternative to the Border field.

 Advanced Table Properties

In the Table Properties window, select the Advanced tab.

Screen shot of the advanced tab of table properties

Field Purpose
Style Can be used to set a minimum width for the table. This option would allow the individual columns to adjust their width to fit the content. To use this option type “min-width: x%” (without quotation marks) in the field where x is the table width.
Border Color Enter a hex code (e.g. #000EEE) to color the borders of your table. This property is typically not needed.
Background Color Enter a hex code (e.g. #000EEE) to color the background of your table. This property is typically not needed.

Cell Properties

When you have one or more cells selected, right click or go to the table icon, go to Cell and choose Cell Properties.
Screen shot of the general tab of cell properties.

Field Purpose
Width Used to set the width of the cell, defined in percentage (e.g. use 50% to have this cell be half of the table width). The sum of the widths of each cell within a row must equal 100%.
Height Used to scale the height of the cell, defined in percentage (e.g. use 50% to reduce the height of the cell by half). This property is typically not needed.
Cell Type If the content in the cell is a heading, select Heading from this dropdown. You must then select the scope.
Scope* When a cell is a heading, you must define whether it is a heading for the row or the column. Select the appropriate choice from the dropdown.
H Align Sets the horizontal alignment of the content in the cell. This property is typically not needed.
V Align Sets the vertical alignment of the content in the cell. This property is typically not needed.
Class Applies CSS from the Styles drop-down to the cell. If you want to create a white row in an auto striped table you can merge the cells in the row, then select (custom) here and type “spacer” (without quotation marks) in the blank field beneath it. This field could still have content in it.

General Row Properties

With your cursor in a cell in the row or the entire row selected, right click or go to the table icon, go to Row and choose Row Properties.

Screen shot of the general tab of row properties

Field Purpose
Row Type If you are including a row at the bottom of your table for notes or references, select Footer from this dropdown. This will automatically style the content as notes. Do not use the Header option. Instead, select the appropriate Cell Properties for headers as described previously.
Alignment Choose the alignment of the content in the row.
Height Used to scale the height of the row, defined in percentage (e.g. use 50% to reduce the height of the row by half). This property is typically not needed.

Advanced Row Properties

In the Table Properties window, select the Advanced tab.

screen shot of the advanced tab of row properties

Field Purpose
Style Can be used to bold the entire row of content by entering “font-weight: bold” (without quotation marks) in the field.
Border Color Enter a hex code (e.g. #000EEE) to color the borders of your row. This property is typically not needed.
Background Color Enter a hex code (e.g. #000EEE) to color the background of your row. This property is typically not needed.

Table With Lines

To make a table with the borders turned on, such as:

Column 1 Column 2 Column 3
First Cell Second Cell Third Cell
Fourth Cell Fifth Cell Sixth Cell
  1. In the General Table Properties select “(custom)” from the Class dropdown.
  2. In the blank field that appears, enter “lines” (without quotation marks) and click OK.

Basic Sortable Table

A sortable table allows the user to sort the table by any of the columns. Creating this type of table does require a small amount of code editing. You can also add caption or footer content to these tables, but not spacer rows.

  1. In the General Table Properties select “(custom)” from the Class dropdown.
  2. In the blank field that appears, enter “striped table-sortable” (without quotation marks) and click OK.
  3. Enter your content in the fields as needed.
  4. Change to the code view. source code icon
  5. Find the table code. It should begin with <table class=”striped table-sortable data” . . .
  6. The first row of the table must be designated as a header row. If it is not already, change the code to make the header row (<thead> and </thead> around the cells). After the <table> tag it should look like:
    <thead>
    <tr>
    <th scope="column">First Column Header</th>
    <th scope="column">Second Column Header</th>
    <th scope="column">Third Column Header</th>
    . . .
    </tr>
    </thead>
    <tbody>
    (the rest of your table content)
  7. Add the class attributes to the header cells. The column you want the information to be sorted by default should get a class of “table-th-sort header”, the rest should get a class of “header”. The beginning of your table code should now look something like:
    <table class="striped table-sortable data">
    <thead>
    <tr>
    <th scope="column" class="table-th-sort header">First Column Header</th>
    <th scope="column" class="header">Second Column Header</th>
    <th scope="column" class="header">Third Column Header</th>
    . . .
    </tr>
    </thead>
    <tbody>
    . . .
  8. Click the OK button to save the code changes. Your table should now have arrows next to each column heading and when you save the content in the editor, you should be able to interact with the table in the Preview screen.

Sortable Tables with Custom Sort Titles for Cells

This advanced use of sortable tables would allow you to define the text used to sort for each cell. For example, if your cell includes a person’s name with the first name followed by the last name, but you want the sort to go by last name, you can set that with this table. Creating this type of table does require quite a bit of code editing.You can also add caption or footer content to these tables, but not spacer rows.

  1. In the General Table Properties select “(custom)” from the Class dropdown.
  2. In the blank field that appears, enter “striped table-sortable data” (without quotation marks) and click OK.
  3. Enter your content in the fields as needed.
  4. Change to the code view. Code view icon in the toolbar.
  5. Find the table code. It should begin with <table class=”striped table-sortable data” . . .
  6. The first row of the table must be designated as a header row. If it is not already, change the code to make the header row (<thead> and </thead> around the cells). After the <table> tag it should look like:
    <thead>
    <tr>
    <th scope="column">First Column Header</th>
    <th scope="column">Second Column Header</th>
    <th scope="column">Third Column Header</th>
    . . .
    </tr>
    </thead>
    <tbody>
    (the rest of your table content)
  7. Add the class and data-parser attributes to the header cells. The column you want the information to be sorted by default should get a class of “table-th-sort header”, the rest should get a class of “header”, and they all need data-parser=”title”. The beginning of your table code should now look something like:
    <table class="striped table-sortable data">
    <thead>
    <tr>
    <th scope="column" class="table-th-sort header" data-parser="title">First Column Header</th>
    <th scope="column" class="header" data-parser="title">Second Column Header</th>
    <th scope="column" class="header" data-parser="title">Third Column Header</th>
    . . .
    </tr>
    </thead>
    <tbody>
    . . .
  8. Each cell in the rest of your table (look for <td> then needs a title attribute that lists the content that will be used for alphabetizing. For example, if you have a field that is their name (first, last) and you want the table to sort by their last name you could designate the content with the last name first in this attribute. You must include some value in the quotation marks for title=”” or the column will not sort properly. Here is an example of what the <tbody> section of your table could look like:
    <tbody>
    <tr>
    <td title="Rockwell, John J.">John J. Rockwell</td>
    <td title="1979, Rockwell">1979</td>
    <td title="Business Administration, Rockwell">Business Administration</td>
    </tr>
    <tr>
    <td title="Bernard, William J."><a href="{{f:18483798}}">William J. Bernard, Jr.</a></td>
    <td title="1969, Bernard">1969</td>
    <td title="Metallurgical and Materials Engineering, Bernard">Metallurgical and Materials Engineering</td>
    </tr>
    <tr>
    <td title="Nowosad, Joseph"><a href="{{f:18484643}}">Joseph M. Nowosad</a></td>
    <td title="1987, Nowosad">1987</td>
    <td title="Metallurgical and Materials Engineering, Nowosad">Metallurgical and Materials Engineering</td>
    </tr>
    </tbody>
  9. Your full table code could look like:
    <table class="striped table-sortable data">
    <thead>
    <tr>
    <th scope="column" class="table-th-sort header" data-parser="title">Name</th>
    <th scope="column" class="header" data-parser="title">Class Year</th>
    <th scope="column" class="header" data-parser="title">Major</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td title="Rockwell, John J.">John J. Rockwell</td>
    <td title="1979, Rockwell">1979</td>
    <td title="Business Administration, Rockwell">Business Administration</td>
    </tr>
    <tr>
    <td title="Bernard, William J."><a href="{{f:18483798}}">William J. Bernard, Jr.</a></td>
    <td title="1969, Bernard">1969</td>
    <td title="Metallurgical and Materials Engineering, Bernard">Metallurgical and Materials Engineering</td>
    </tr>
    <tr>
    <td title="Nowosad, Joseph"><a href="{{f:18484643}}">Joseph M. Nowosad</a></td>
    <td title="1987, Nowosad">1987</td>
    <td title="Metallurgical and Materials Engineering, Nowosad">Metallurgical and Materials Engineering</td>
    </tr>
    </tbody>
    </table>
  10. Click the OK button to save the code changes. Your table should now have arrows next to each column heading and when you save the content in the editor, you should be able to interact with the table in the Preview screen.

Approval Workflow

The Approval Workflow in OU Campus is an optional function that a department can use when creating or editing content that needs approval from someone else before being published. This process allows the item to remain checked out to a user throughout the process until it has been completed—either published or reverted back to the previous version. Keeping content checked out is important so that the item is not published unintentionally before it should be.

  • The item goes from being checked out to the editor to being checked out by the approver and possibly back to the editor depending on what the approver selects.
  • The approver can deny the changes or publish/approve them.
    • The approver must have CMS access, but could have view-only access or edit access. An approver with edit access could publish the changes if approved, with view-only access the approver can only approve the content and return the item to the first person for publishing if approved.
  • OU Campus will send an email notification to the approver letting them know you have sent them something. This email can include a custom message from you.

Submitting for Approval

  1. With the item checked out to you, click the arrow next to Publish in the green button at the top of the page and select Submit for Approval.
    Dropdown menu of the publish button.
  2. Fill out needed information in the Submit for Approval window.
    Submit for approval window.
    1. Select the correct person from the To dropdown. You can type the person’s name to filter the list.
    2. Enter a subject in the Subject field.
    3. Enter a message to the person in the Message field.
    4. Keep “Send Copy to Email” checked.
    5. Click the blue Submit button.

Approver Process – Edit Access

  1. The person who was selected in the To field of the Submit for Approval window will receive an email with multiple links.
  2. Select the first link to go to the item in OU Campus.
  3. Review the content. Make changes as needed.
  4. Publish, Reassign, or Decline the item.
    Publish menu and decline button for an approver with edit access.
    1. If the changes are approved and ready to go live you can Publish the item as normal.
    2. If you need to send an email to the person who sent the item to you for approval instead of publishing or declining, use the dropdown arrow next to publish and choose Reassign. Complete the To, Subject, and Message fields before sending.
      Reassign Approval window.
    3. Clicking the orange Decline button will allow you to choose to revert to the previous version (delete all changes) and include a message to the person stating why you declined the changes.
      decline

Approver Process – View-only Access

  1. The person who was selected in the To field of the Submit for Approval window will receive an email with multiple links.
  2. Select the first link to go to the item in OU Campus.
  3. Review the content.
  4. Submit or Decline the item.
    Submit and Decline buttons.
    1. If the changes are good, click the green Submit button. From the Reassign Approval window, select a To person with edit access who can publish the page, enter a subject and a message, and click Send.
      Reassign Approval window.
    2. Clicking the orange Decline button will allow you to choose to revert to the previous version (delete all changes) and include a message to the person stating why you declined the changes.
      decline

Department Publications

Departments who produce regular newsletters or magazines are able to use the Michigan Tech Magazine template to digitally display their publications on their departmental website. You can refer to the Biological Sciences Newsletters as an example. Interested departments should contact cmshelp@mtu.edu to get setup. Once your site has been set up and your CMS users given access, you can follow these instructions to add future publications.

Setting up the Issue

  1. Within the publication folder on your site, copy the /issue-template folder.
  2. Rename this copied folder for the issue you are creating. You can include issue-template at the beginning of the name, for example issue-template-2018, to prevent the content from accidentally publishing to the live homepage.
  3. Upload the pdf of the publication, if there is one, into the pdfs folder in your publication folder and publish it.
  4. In the /stories folder, update the folder names for the stories in your issue.
  5. Delete extra story folders that are not needed.
  6. If more story folders are needed, use New > Folder.
  7. Create a New > Publication Story in each of the story folders.
    1. Enter the story Title only.
    2. Once created, return to the Pages List View.
  8. Edit the _nav.shtml file in the /stories folder.
    1. Create a bulleted list, listing each story title in the order they appear in the publication, starting with the cover story.
    2. Link each story to its corresponding index file in the story folders.
  9. Edit the _nav.shtml file in the issue folder.
    1. Change the Current Stories link to go to the _nav.shtml file in the issue’s /stories folder instead of the one in the template’s folder.
  10. Edit the _props.pcf file in the issue folder. Check it out, go to Properties > Parameters.
    1. Update the Section Title.
    2. Update the Section Breadcrumb.
  11. Edit the index.pcf file in the issue folder.
    1. In Properties > Parameters (file must be checked out to you), update the following fields:
      1. Title
      2. Desription
      3. Keywords
      4. Breadcrumb
    2. In the Main Content region, update the path within each URL to be this issue folder.
    3. Create a Vertical image of the cover of the publication that will be used in the publication information section and in the archives listing.
  12. Edit the _props-mag.pcf file in the issue folder. Check it out, go to Properties > MultiEdit Content.
    1.  Publication Issue Title
    2. Publication Issue Date (used to order the issues on the publications homepage)
    3. Publication Issue Image and Description (the vertical400 image created previously)
    4. Issue Information Text that will appear next to the image and PDF button at the bottom of the issue.
    5. Issue PDF select the PDF file that you uploaded for this issue.
  13. Add content for each story.

Adding Story Content

The story content is added to the index.pcf file that was created in each story folder. If you copy and paste content, be sure to turn on the Paste as Text option in the toolbar. paste as text icon

  1. Edit the Parameters (check out the file, Properties > Parameters).
    1. Set the Published Date to a date around the publish date of the publication (use the same date for all stories in an issue) and set the times of each story in order so that the earliest time is the last story in the publication and the latest time is the cover story. You could use one hour increments.
    2. Save.
  2. Edit the MultiEdit Content.
    1. Select an Author from the dropdown list. If the author is not in UMC, choose None and enter the author information in Guest Author. You can also choose to list no author.
    2. Enter Keywords for your story.
    3. Skip Categories and Academics, DOI, and DOI URL.
    4. If desired, enter up to two URLs to Michigan Tech News, Unscripted, Magazine, or your publication stories to appear as related stories at the bottom. There will always be four related stories and the system will generate the remaining stories.
    5. If you want a video in the banner at the top of the page, enter the video URL in the Banner Video URL field. If you use a video here, you must still insert an image in Banner Image 1 to be used on the issue homepage.
    6. Create up to four Banner images and select the banner1200 or banner1600 images to appear in the banner at the top of the story in the Banner Image 1, Banner Image 2, Banner Image 3, and Banner Image 4 spaces. Be sure to include an Image Description and Caption for each image. The description is the alt text and the caption will appear when the user clicks the i icon that will be above the image.
    7. In the Extras you can do several things.
      1. Enter reasearcher user IDs in Associated Researcher Username. This may be used in the future to add story links to faculty personnel information.
      2. Enter a Superior Ideas project URL in the final field to display information about the project at the end of the story.
      3. Skip the Social Media Image field and Image Description.
    8. Save.
  3. Enter the introductory sentence or two in the Intro Content region.
  4. Enter the story content in the Main Content region. This can include links, images, and snippets as on a regular web page. There are additional snippets that can also be used only in publications. For more information about the common snippets used in publications, please see the News/Unscripted documentation Snippet section.
  5. Once you have entered all of the content for your story, be sure to preview it.
  6. Publish the story.

Completing the Publication

  1. Publish the _nav.shtml file in the /stories folder.
  2. Publish the _nav.shtml, _props.pcf, and _props-mag.pcf files in the issue folder. If you did not include issue-template in the folder name DO NOT publish the _props-mag.pcf file. This will make the issue populate on the homepage.
  3. Preview the index.pcf file in the issue folder to make sure the story images and text look correct. This can only be seen once the stories have been published. If you did not include issue-template in the folder name you will not see the information text after the stories.
  4. From the Edit tab on the index.pcf file in the issue folder, in the Main Content region, update the path within each URL to remove issue-template, if needed.
  5. Publish the index.pcf file in the issue folder. Note, if you had to change the paths in the previous step there will be no content on the page!
  6. Rename the issue folder to remove issue-template if needed. The name should now be reflective of the issue and should match the three URL paths you just set on the index.pcf file in the issue folder.
  7. If you had to rename the folder, wait for all content to publish. Otherwise publish the _props-mag.pcf file.
  8. Review the publications homepage to make sure the new issue appears correctly.

360 Images

Interactive images, where the user can move around in the image to view the scene from every angle. 360 photos are becoming more widespread and easier to create. Now you can embed them on your OU Campus CMS website in the upper page image or within the body content.You 360 image must first be set up in Flickr. Check out some of the 360 images we have done.

As the Page Image

  1. Select the page image location option in the Page Parameters. You can choose Feature, Banner, or Sub-Banner.
  2. In MultiEdit Content select the Video option from the Banner Type dropdown.
  3. Paste the .jpg URL from Flickr in the Banner Video ID field.
    1. To get the URL, go to the Flickr page for the 360, click the Download icon, right click the Large option and choose Copy Link Location.
  4. Save your changes.

Within the Body Content

  1. Insert the Video snippet in location where you want the 360 to appear.
  2. Paste the .jpg URL from Flickr in the URL field.
    1. To get the URL, go to the Flickr page for the 360, click the Download icon, right click the Large option and choose Copy Link Location.
  3. If desired, enter a value in the height field.
  4. If the default preview location of the image is not where you want it, you can change it.
    1. With your cursor in the field to the right of width, press tab to add a new row.
    2. In the left column of the new row type “default_yaw” (without quotation marks).
    3. In the right column enter the numerical angle in degrees that the view should be adjusted by. The degrees move the image counter-clockwise (as if you were dragging from left to right). During the initial loading of a page the automatic pan spans approximately 40 degrees.
  5. Save your changes.