Modern Campus Catalog Emblem Modern Campus CMS Emblem Modern Campus Curriculum Emblem Modern Campus Involve Emblem Modern Campus Lifelong Learning Extended Education Emblem Modern Campus Message Emblem Modern Campus Navigate Emblem Modern Campus Schedule Emblem Modern Campus Virtual Tours & Maps Emblem Modern Campus Lifelong Learning Workforce and Community Emblem Site Menu Open Site Menu Close
Skip to Content
Modern Campus Support
Site Search
Search

Developing News Pages

News sections and pages are often very similar to the standard design of your web pages. What makes them unique is how they integrate with RSS feeds to create RSS items from articles and to display those feeds on listing pages. While it is possible to use an external feed for your news section, you lose the benefit of having article pages managed within Modern Campus CMS.

If you are interested in using the OU Blogs module as your news solution, please talk to our team for more information.

Listing PagesLink to this section

The standard listing page displays the RSS feed of articles, with each item linking to an article page. It can display hundreds of items, has pagination, and usually has filtering options.

There are three methods of for displaying a feed on a page:

Use strictly XSL to parse the feed. While this has the benefit of managing all content and code in Modern Campus CMS, the downside is listing pages exist on the web as static content that must be republished every time the feed is updated. However, the manual republishing issue can be mitigated to an extent by setting the listing pages to be published frequently via scheduled publish.

Another advantage with this approach is that the preview output inside Modern Campus CMS exactly matches the published page. If you don't mind the possibility of the listing pages being up to an hour old (one hour being the most frequent you can set scheduled publishes), then this is a good approach.

Use server-side scripting to parse the feed. This solution updates automatically each time a visitor loads the web page, though it requires a little bit of effort to make the dynamic elements to preview inside Modern Campus CMS.

This solution is a combination of a little bit of XSL and mostly server-side code. The development workflow is:

  1. Write XSL that reads values from PCF fields and then writes server-side code that passes in the attained values into a server-side function. The server-side function reads the feed and generates the listing output based on the passed-in values.
  2. Write the server-side function called in Step 1 (these two steps can be interchanged). This is where the bulk of your code lives. You need to write a way to read and parse the RSS feed and generate a list of items. If your requirements for a listing page include pagination and filtering, you need to write server-side code for those as well.
  3. Once you've written server-side functionality for generating a listing output based on certain inputs, you can start thinking about generating the same preview list inside Modern Campus CMS. There are two ways to do this: generate the same output via XSL, or create a GET handler for your server-side script. The recommended method is the GET handler since it uses the same server-side script function for outputting to the actual page and the Modern Campus CMS preview.

Use front-end JavaScript to parse the feed. Like server-side scripting, this solution updates the new list automatically on page load. However, it can be slower (especially with larger feeds) because it runs in the browser as opposed to on the web server.

This solution is a combination of a little bit of XSL and mostly JavaScript. The development workflow is:

  1. Write XSL that reads values from PCF fields and then writes a <script> tag with JavaScript code that passes in the attained values into a JavaScript function. The JavaScript function reads the feed and generates the listing output based on the passed-in values.
  2. Write the JavaScript function called in Step 1 (these two steps can be interchanged). In JavaScript, you need to retrieve the RSS feed, parse the feed, and then output the feed all on page-load. Be prepared to run into complications. When developing complex front-end JavaScript, you need to take into acccount Cross-Origin Resource Sharing (for feeds from different domains), performance, and browser compatibility. If one of your requirements is Internet Explorer support, it may be beneficial to look into the server-side parsing method.
  3. Once you have the code for outputting a feed, you can work on getting the feed to preview in Modern Campus CMS. The trickiest element here is getting the feed. If you have worked out any CORS issue as noted above, getting an output is smooth sailing. If that isn't the case, then you may need to retrieve the feed via XSL, output the content of the feed into a JavaScript variable, and then go from there.

Filtering options on listing pages can be created by either server-side code or front-end JavaScript. As you build out your listing page in the option of your choice, have an idea of how you want to expand the features. RSS feeds created in Modern Campus CMS come with support for categories, so this is the data point you want to target.

A listing page can also be created so that the page loads with a filter preapplied, for example if you want a page that shows news only for athletics, or for performing arts. This is an application of the filtering functionality you can add as noted in the paragraph above. When you want to output a prefiltered list, pass in the filtering parameters into the function you have developed at publish. Instead of publishing code that generates a generic list, publish code that generates a specific list.

The filtering functionality can also be applied to creating a section for featured news. In addition to your regular list output function, create a featured news output function and then call the function via XSL in the appropriate location. Don't forget to tag your featured news with the appropriate featured tag.

ArticlesLink to this section

Each article is a standard interior content page with an attached RSS item. However, the TCF has additional options. The attributes rss-description, rss-feed, rss-title, rss-link, and rss-pubdate are required to create an article page with an RSS item. For a full list of available attributes for TCFs, see the TCF reference guide. Articles also commonly use MultiEdit for consistent fields such as author and publish date.

When a listing page displays an RSS feed, it uses the data from each RSS item, not the article, to populate the feed display. Each item only links back to the article. This is important for editors to remember as well, in case they want to change the information displayed on the listing page (such as a title or publish date for an item).

A flow chart that reads: "Inside folder with RSS feed assigned" > "Article created with attached RSS item" > "RSS items compiled into the feed" > "Listing page displays feed of items" > "Each display item links back to the appropriate article"

Use tags to assign articles categories so that they can be filtered on the listing page. Be sure to remember assign tags to the RSS items and not the PCF.

Creating a News SectionLink to this section

A news section is a section associated with an RSS feed. In order to create this association, you can manually do so by following the steps on the Setting Up RSS page. There is an option to have the RSS feed configured on section creation. You can do so via the rss-feed attribute in your new section tcf.

However, to set the rss-feed attribute on page creation, it must be hardcoded into the template, as it can't be passed as a variable and therefore can't be a page parameter or TCF field.

<tcf>
	<title>...</title>

	<variable-list>...</variable-list>
	<directory-list> 
		<parent name="current_folder" path="."> 
	<directory name="new-folder" rss-feed="/rss/default.xml" template-group="*inherit*">{dirname}</directory>
		</parent> 
	</directory-list>

	<template-list>
		<template 
			prompt-prefix="New Listing Page" 
			filename="index" 
			display-filename="no" 
			extension="pcf"
			display-group="no"
			destination="{new-folder}" 
			force-destination="yes" 
			preferred-redirect="yes"
			tags="{tags}"
			autonav="{autonavigation}">news-listing.tmpl</template>
	</template-list>

	<navigation-list>...</navigation-list>
</tcf>

Displaying Feed ContentLink to this section

The RSS news feed content can be displayed on other pages than the listing page as well, such as the home page or perhaps a department landing page. This is a variation of the same principle as a listing page; instead of filling the main content region, the feed only shows a few items in a div or filters into a small subset of the page. The most common way of handling this by utilizing reusable content to create a table transformation, asset, or component that can be dropped into a page and display the feed.

To make a news listing snippet:

  1. Follow the steps for creating a new snippet.
  2. When creating the snippet, provide users with the input fields (usually a table with each table cell acting as an input field) for an RSS feed, the number of items to show, and possibly filter keywords.
  3. In the XSL, transform the input into meaningful code. See example below.
<table class="news-listing-snippet">
	<thead>
		<tr>
			<th>RSS Feed</th>
			<th>Number of Items</th>
			<th>Filter Categories</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><a href="path-to-rss-feed">RSS Feed</a></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

To make a news listing asset:

  1. Follow the steps for creating a new source code asset.
  2. If you are creating an asset in conjunction with a snippet or a component, it is a good idea to mimic the source code of your asset to the source code of your snippet. Snippets are usually tables, so follow suit here.
  3. Additionally, hardcode the values you want (RSS feed, number of items, and filter keywords) into the asset. By making the code consistent with your snippets, you can have the same exact XSL transform it into the appropriate RSS list code.

To make a news listing component:

  1. Follow the steps for creating a new component.
  2. As noted in the asset and snippet instructions, you want to make your source code consistent across all three. If you are creating a table transformation snippet, your source code for an asset and component is dictated by the table transformation snippet. However, if you are not creating a snippet, you can create a markup that is more easily consumed by XSL. See example below.
<rss>
	<src></src>
	<num></num>
	<categories></categories>
</rss>

For both snippets and components, the user editing the page inputs the feed URL, the number of items to be displayed, and any other configuration options. XSL then takes the entered content and transforms it into the appropriate display.

Related Content
Related Content

By continuing to use this site, you agree to the storing of first- and third-party cookies on your device to enhance site navigation; analyze site, product, and service usage; and assist in our marketing and promotional efforts. Cookie Policy