MiVideo: Adding Static HTML Pages to Mediaspace

Overview

This guide explains how to create and publish static HTML web pages in Mediaspace (KMS).

Considerations with the staticPages Module

  • The staticPages module allows you to create web pages to convey additional information to your site visitors.
  • A static page can be configured as the home page of a Mediaspace site.
  • Static pages must be manually linked in the site’s navigation.
  • Each page can be secured by site user role as needed (see About site Roles, Page Security and Navigation at the end of this document for more information).
  • Static pages with the same slug as built-in pages override the built-in pages. For example, a static page with the slug “channels” will override the the built-in channels page display.

Limitations

  • Only code that can be placed between the <body></body> tags of an HTML page can be used. Including <head> and/or <footer> tags in a static page causes unpredictable results including breaking the module’s functionality in the admin.
  • Styling
    • Inline styling is the preferred method for styling your HTML code.
    • If you need to include style information, you can use an HTML loophole and place <style></style> tags at the beginning of the page content.
    • You can edit/upload custom CSS with the cssUpload module (for this option, please seek assistance from MiVideo support by submitting a request to the ITS Service Center).
  • Pasting content from MS Word is not recommended. MS Word deeply embeds page styling that may not display as expected.
  • Images in a static page must be hosted externally (e.g. Box acct or department website). If your site is set for SSL delivery your images must also be hosted on SSL to avoid security warnings/blocked display.

Before You Begin

Using the staticPages module assumes the following:

  • Basic HTML knowledge and/or an HTML editor to copy HTML code
  • A plan for integrating the page(s) into your Mediaspace site navigation
  • Awareness of built in site URLs to avoid unintentional overriding built-in features

    Top level built-in slugs:

    • /channel
    • /channels
    • /upload
    • /media
    • /my-media
    • /my-channels
    • /my-playlists
    • /liveentry
    • /youtube
    • /screencapture

     

Enabling the staticPages Module

  1. In the admin for your site, click the staticPages navigation link on the left.
  2. Set the “enabled” drop-down to “Yes” and click Save.

Tips:

  • You can leave the module enabled without page content.
  • You can create static pages even though the module is disabled, but you won’t be able to view them until the module is enabled.
  • You can disable the module without losing any pages you may have already created.

Creating a “Custom Page”

  1. In the site admin > staticPages module, click add “customPage”.
  2. Page title is optional and displays at the top of the page as <h1> styled text.
  3. Enter the page “slug” text (no preceding “/”) following standard URL naming practices (e.g. about-us) and avoiding the built-in slugs mentioned above.
  4. Set the page’s permissions. In most cases, you can leave this as anonymous (see About site Roles, Page Security and Navigation at the end of this document for more information).
  5. Type or copy/paste HTML code into content box.

    Tip: include only the content between the <body></body> tags, but not the tags themselves, or any other page content

  6. Click Save to save your changes and clear the cache.
  7. To test your page, go to your site URL/slugname (e.g. https://staging.mivdeo.it.umich.edu/about-us).

Repeat steps 1-7 to create and test additional pages.

Linking Static Pages in Site Navigation

Site visitors cannot find your static pages unless you communicate the URLs to them or link the pages in your site’s navigation. Here are some ways to link up your pages:

Linking Pages to the Main Navigation

The main navigation usually includes your site Gallery categories and may also include other links you’ve added. This is a good place to link up a staticPage that is configured for anonymous access (see About site Roles, Page Security, and Navigation at the end of this document for more information about linking up non-anonymous content).

Type:
Link
Name:
<clickable text in the navigation> (e.g About Us)
Value:
the staticPage slug, INCLUDING the preceding / (e.g. /about-us)
Same Window:
YES
  1. In site admin click the Navigation menu item.
  2. Click add Pre or add Post as desired.

    Note:

    • Pre items show up before any included gallery categories in your site navigation
    • Post items display after the gallery categories. See the special note below for creating a static HTML home page

     

  3. Save and test in the site.

Note:

  • If you want to use a static page as the home page for your site, it must be the FIRST “Pre” menu link in the Navigation module.
  • If you already have other “Pre” links configured they will have to be deleted and re-created after you add your custom page as the first “Pre” link. Be sure you make careful note of all settings before deleting other “Pre” links.

 

Linking Pages to the User Menu Navigation

A staticPage can be added to the user menu, which is the drop-down menu in the top right corner of the site header labeled as &lq;Guest&rq; or the logged in user’s name. Keep in mind that this positioning is less obvious to the average site visitor. This is a good place to link pages that are site role restricted (see About site Roles, Page Security, and Navigation at the end of this document).

Type:
URL
Label:
(e.g. About Us)
Link:
the staticPage slug, INCLUDING the preceding / (e.g. /about-us)
Same Window:
Yes
Link Location:
User Drop Down (or header menu if you’ve configured your site to use this navigation element).
  1. In the site admin, click the headerMenu module on the left. There are probably some items already in this list, such as My Media. You can leave these as they are.
  2. Click add Menu.
  3. Click Save and test.

Linking Static Pages to Each Other

You can build an internal navigation between your pages by adding in HTML <a href> navigation links as desired to each staticPage’s content.

About site Roles, Page Security, and Navigation

Earlier in this tutorial we set a staticPage to the anonymous role to ensure that anyone can view the page. If the entire site requires login before users can see anything, then the page is still secured even when it is set to anonymous.

If you want to limit staticPage access to logged-in users in Mediaspace who have a specific role, you should consider how this will appear to users who have a role lower than the one designated.

The site roles in order of least access to greatest access are:

  • anonymous
  • viewerOnly
  • privateOnlyRole
  • adminRole
  • unmoderatedAdminRole

 

Anonymous users who access a non-anonymous static page link are prompted to log in. If they don’t have a login, they are stuck.

Users with a role lower than the page requires receive a generic “access denied” message which may leave them frustrated and confused.

Tags: 
MiVideo
MiVideo Mediaspace
ITS.umich page: 
its.umich.edu/communication/television-video/mivideo/support