Kaltura: Options for adding announcements to legacy MediaSpace sites (Admins only)

NOTE:This document is expressly intended for campus Kaltura Administrators. Please contact your campus designee, if you have questions.

There are several ways to add a customized message to a MediaSpace site. This document provides examples and instructions on how to do this.

The following thumbnail images depict several options for displaying a custom message to Kaltura MediaSpace users. One or several options can be implemented as desired. Selecting a thumbnail image will direct you to instructions.

Option 1
KMS Banner Example
Options 2 & 3
KMS Carousel Example
Option 4
KMS My Media Example

1. Display a banner on the MediaSpace site and user home pages (see example)

  1. Create custom CSS with desired message and styling.

    The following is example CSS code where the text in red font color should be changed. The other elements (e.g., background color, font size, etc.) can be changed, as desired. This option does not allow the use of HTML code (e.g., link to an external web page), however, you can use the string \A for line breaks.

    /* Display MediaSpace Maintenance Announcement on KMS Homepage */
    h1.page-header.home__playlist-name-heading:nth-child(1):before {
    content: 'ATTENTION - This MediaSpace site is scheduled for maintenance. \A This site will be offline from 6 - 10 pm on Monday, April 1, 2019.\A Select the Help option (see above) for more information.';
    display: block;
    white-space: pre-wrap;
    color: white;
    background-color: #d05700;
    font-weight: normal;
        font-size: .75em;
    line-height:1.3em;
    margin-bottom: 20px;
    text-align: center;
    width: 75%;
    text-transform:none;
    padding:20px;
    width:auto;
    }
    
  2. Select and enable the CSSupload module in the KMS Configuration Management interface.

    CSSUpload Module

  3. Navigate to the box labeled additional.

    CSSUpload Module Additional Section

  4. Select the Upload CSS file button and choose local CSS file. This will save the file on the Kaltura infrastructure and the URL will reflect that (e.g., https://cdnsecakmi.kaltura.com/p/partner ID/sp/Subpartner ID/raw/entry_id/entry ID/ where information in italics will be specific to the Kaltura instance).
  5. Select the Save button at the bottom of the page and confirm that the cache was cleared.
  6. Verify outcome and make adjustments, as needed.


  7. Pros
    • Element is available multiple pages
    • Provide relevant information and direction (e.g., refer user to a link in the header for more information, such as a KB doc)
    • Use existing functionality
    Cons
    • Cannot include HTML code or Javascript (to provide a pop-up window)
    • May be deemphasized if there is a lot of other content on the page
    • The element may go unnoticed if not bold enough
    • Users that bookmarked the My Media page will not see the notification

2. Display custom playlist with an image in the carousel (see example)

  1. Create an image with a text announcement (1280x720). It is best to position the text near the top of the image so that it won’t become obscured when using smaller displays. The manner in which the responsive design works may hide parts of the message. You can test it on your campus QA KMS before making the change to production, if desired.
  2. Upload the image (PNG or JPG) into Kaltura and use a descriptive title for the entry (e.g., ** IMPORTANT NOTICE **).
  3. Publish the image as Unlisted so that it will appear on the KMS home page and not require authentication. This will allow visitors and authenticated users to see the image. NOTE: An error message or missing image will result if not unlisted.
  4. Create a custom playlist via the KMC with only the image and copy the entry id of the playlist.
  5. Navigate to the carousel box on the Home module in the KMS Configuration Management interface.
    1. Select Custom Playlist from the pulldown menu for the type field
    2. Enter the playlist id in the playlistid field
    3. Change the carouselStyle setting to Single Cropped
    4. Note: the carouselBg field isn’t functional as the image will scale to the size of the user’s browser window
    5. Select Save at the bottom of the page and confirm that the cache was cleared
    6. Note: You may opt to remove any existing list (e.g., display the most recent/viewed/liked videos) to declutter the page and focus attention on the announcement
    7. Home Module Carousel Options

  6. Verify outcome and make adjustments, as needed. NOTE: You may need to create a new playlist with the revised image.
  7. Optional: Multiple images can be added to a playlist if motion will grab additional attention. Alternatively, one could create a video and add a hotspot that will direct the user to a web page with more information. It should be noted that the hotspot will not appear in the video thumbnail or preview and the user will need to play the video (which may be too many clicks to be useful).


  8. Pros
    • Element is available multiple pages
    • Provide relevant information and direction (e.g., refer user to a link in the header for more information, such as a KB doc)
    • Use existing functionality
    Cons
    • Cannot include HTML code or Javascript (to provide a pop-up window)
    • A user may get confused and click on the image thinking that it will reference other information
    • The element may go unnoticed if not bold enough
    • Carousel entries look odd with IE11
    • Users that bookmarked the My Media page will not see the notification

3. Modify banner image to display information (see example)

  1. Create a custom image and host it somewhere (e.g., web server, Box, etc.). An animated GIF may draw more attention and allow the use of the localized branding (e.g., campus name/crest/image).
  2. Navigate to the Header global module.

    Header Module

  3. Copy and paste the URL to the image in the logoImageUrl field.
  4. Select Save at the bottom of the page and confirm that the cache was cleared.
  5. Verify outcome and make adjustments, as needed.
  6. Note: This may be more challenging as it will change the look and feel of the site and may lead users to believe that it has been hijacked.


  7. Pros
    • Element is available multiple pages
    • Use existing functionality
    Cons
    • Limited space to provide instructions
    • A user may get confused and click on the image thinking that it will reference other information
    • The change of the KMS interface may cause users to believe that they are on the wrong site or it has been hijacked

4. KMS My Media page notifications using custom language pack

When accessing your KMS Configuration Management administrative interface, make sure you access the site with the custom .edu domain URL if you have such a domain set up. An issue was discovered and reported to Kaltura Support whereby the application of a custom language pack on the kaltura.com domain (e.g., 1234567.mediaspace.kaltura.com) did not properly reflect on the custom domain alias (e.g., mediaspace.mycampus.edu).

Note: It is advised that the change is tested on the campus QA KMS site prior to making changes to the production KMS site, due to the complexity and potential for inadvertent mistakes.

We cannot provide access to a site that exhibits this option as it would require authentication to access the My Media page.

  1. Log into the KMS Configuration Management administrative site and check that no previous language changes have been made. To verify the state of your language pack configuration, check Global>Application under languageConfiguration, which usually is a Single language configuration.

    Application Module Language Option

    Also, see under Global>Languages, if any custom languages have been added. The default configuration only offers an upload in that menu.

    Language Module

  2. Prepare your custom language file with the verbiage of choice which accepts HTML code.
    1. Start at Global>Languages and select the Download texts button (see previous screenshot). This will prompt you to save a .zip file containing all of the default languages
    2. Unzip the contents into a location of your choosing and locate the English folder. Save a copy of the .po file as a backup
    3. Open the .po file with a text editor or Poedit application. Navigate to the following text block:
      #: library/Kms/Resource/Nav.php:270
      #: modules/addcontent/controllers/IndexController.php:15
      #: modules/headermenu/models/Headermenu.php:117
      #: modules/kmsapi/models/Translations.php:296
      #: modules/sidemymedia/models/Sidemymedia.php:53
      #: application/views/scripts/user/my-media.phtml:15
      #: application/views/scripts/user/my-media.phtml:20
      #: modulesCustom/core/eloqua/views/scripts/index/configurationurl.phtml:6
      #: modulesCustom/core/kaf/browseandembed/views/scripts/index/index.phtml:9
      msgid "My Media"
      msgstr "My Media"
    4. Replace the line msgstr “My Media” with the language of your choosing. See the following example replacement text.

      Note that all quote marks other than first and last need to be escaped with a preceding backslash, as shown in the link text.

      #: library/Kms/Resource/Nav.php:270
      #: modules/addcontent/controllers/IndexController.php:15
      #: modules/headermenu/models/Headermenu.php:117
      #: modules/kmsapi/models/Translations.php:296
      #: modules/sidemymedia/models/Sidemymedia.php:53
      #: application/views/scripts/user/my-media.phtml:15
      #: application/views/scripts/user/my-media.phtml:20
      #: modulesCustom/core/eloqua/views/scripts/index/configurationurl.phtml:6
      #: modulesCustom/core/kaf/browseandembed/views/scripts/index/index.phtml:9
      msgid "My Media"
      msgstr "<div style=\"background-color:red; padding:30px; color:#FFF; font:18px/24px Arial, sans-serif\"> 
      Can We Have Your Attention Please<br />
      This site will go offline June 30, 2020.<br />
      Please check this <a href=\"https://kb.wisc.edu/luwmad/page.php?id=79296\">KB article</a> for more details.<br />
      </div>"
  3. Once your file is modified and saved, go to http://po2mo.net/ and convert the .po file to a .mo, which is the file type that can be uploaded to Kaltura. Download the .mo file after conversion (the site offers up both, .mo and .po formats after each conversion).
  4. Go to Global>Languages>UploadCustomLanguage menu and click +Add to create the custom language with your modifications. Fill in the first two fields - languageAdminName and languageClientName - to distinguish it from other language files (e.g., “English Custom”). The second field (languageClientName) will display to users from the drop down list of languages if more than one is available. The LanguageCode should be en_US, just to make sure all else matches the current settings.
  5. Select Upload Locale and browse to your custom .mo file (note that IE11 is incompatible with that upload dialog). Once the upload completes, upload the custom flag icon (see below). This icon will not display if only one language is available.

    US flag icon

    The languageId field will be automatically updated and cannot be edited.

  6. Click the Save button at the bottom of the page.
  7. After receiving notification that the cache has cleared, go to Global>Application>language where the pulldown menu should now list what you put in the languageAdminName field as a choice for the default language. Choose this custom entry to enable your edited version of the language pack and click Save at the page bottom.

    Language Module Custom Option

  8. Navigate to your campus Mediaspace My Media page to confirm that the customized message displays as expected. If not, you can revert to the default English -en language and then make desired corrections to the custom language and repeat from step #2.

    Pros
    • Element is available on the user’s My Media page, which most users will access (and may have bookmarked)
    • Provide relevant information and direction, including HTML code (e.g., link to another resource for more information, such as a KB doc)
    • Use existing functionality
    Cons
    • The process to update a language pack is complicated compared to the other options
    • The vendor may make changes that impact the availability and appearance of the notification element



Keywords:notifications, events, display, banner, mediaspace, homepage, website, custom, messages, playlist, animated, gif, text, instructions, languages, packs, pages, mymedia,   Doc ID:91203
Owner:Rhianna C.Group:Kaltura Media Management System
Created:2019-04-19 11:28 CSTUpdated:2019-05-17 13:50 CST
Sites:Kaltura Media Management System
Feedback:  0   0