The process of adding a news feed to a page within your website is made simple with the use of the "Source" editor's "System Tags" menu.
Step 1:
In order to create a news feed, simply select the page on which you would like it to appear within the CMS administration and access the page's "Content" tab, where you can begin editing by clicking on the "Edit" icon.
Step 2:
Once in the editing window, click on the "Source" editor tab in the upper left-hand corner and, within the "Source" editor screen, position your cursor in the location on the page where you would like the news feed to appear (generally somewhere between the <body> and </body> tags).
Step 3:
Should you wish to have a year, month, and/or section selector that allows users to filter the list of news items by release date or individual sections, these tags must be entered first, before the actual news feed or list, which by default will display only the latest news items.
In order to do so, click on the "System" drop-down menu located in the toolbar at the top of the window and scroll down until you reach the "News" section.
From here, you should first click on "news-year-selector," which will cause the following tag to be inserted at the location in which your cursor is located:
<sys:news-year-selector section="Section ID ..." news-type="SYS1..SYS5" path="/path-to-news" />
The attributes included within the tag should be completed as follows:
-
section:
This attribute limits the news items that will be included within the selector's results to a particular sub-category of some news type (news, webinars, events, etc.) and should be completed with that section's Section ID
-
news-type:
This attribute limits the news items included within the selector's results to a particular object type (news, webinars, events, etc.) and should be completed with that object type's System ID
-
path:
This attribute should be completed with the filepath of the
page that will be used to display news items' full content when they are selected from the list of results
Step 4:
On the next line within the "Source" editor, you can select the "news-month-selector" option from the "System" drop-down menu, which will insert the following tag:
<sys:news-month-selector section="Section ID ..." news-type="SYS1..SYS5" path="/path-to-news" />
The attributes within this tag should be completed in the same manner as just described for the sys:news-year-selector tag.
Step 5:
After this, should you wish to include a section selector as well, you can place your cursor on the next line of the "Source" editor window and select "news-section-selector" from the "System" drop-down menu in order to create the following tag:
<sys:news-section-selector />
This tag can simply be left as it is.
Step 6:
In order to create the actual news feed that will display a list of the most recent news items, place your cursor in the location on the page where you would like it to appear, making sure that this falls after the location in which the last selector tag has been entered.
From the "System" drop-down menu, select "news-list" and the following tag will appear:
<sys:news-list news-type="SYS1..SYS5" section="Section ID ..." design="News type design ..." display-content="yes" content-design="Content design ID ..." path="/path-to-news" limit="number of articles to show" order-by="release_date" order-dir="asc|desc" />
The attributes included within the tag should be completed as follows:
-
news-type:
This attribute limits the news items included within the feed to a particular object type (news, webinars, events, etc.) and should be completed with that object type's System ID
-
section:
This attribute limits the news items that will be included within the feed to a particular sub-category of some news type (news, webinars, events, etc.), and should be completed with that section's Section ID
-
design:
This attribute should be completed with the ID of the design that you would like to be used in the presentation of the news feed
-
display-content:
This attribute allows you to make it so that when users click on a news item within the feed, they will be redirected to a page with the news item's full content
-
content-design:
This attribute should be completed with the ID of the design that you would like to be used in the presentation of news items' full content
-
path:
This attribute should be completed with the filepath of the
page that will be used to display news items' full content when they are selected from the feed
-
limit:
This attribute should be completed with the maximum number of news items that you would like to be displayed in the feed at once
-
order-by:
This attribute allows you to control the basis on which the display order of individual news items within the feed is determined
-
order-dir:
This attribute allows you to control the direction (ascending or descending) in which individual news items will be sorted using the criteria specified by the order-by attribute
Step 7:
Once all of the desired tags have been entered into the page's "Source" editor window, it should look something like this:
<sys:news-year-selector section="123" news-type="SYS1" path="/examples/news-path" />
<sys:news-month-selector section="123" news-type="SYS1" path="/examples/news-path" />
<sys:news-section-selector />
<sys:news-list news-type="SYS1" section="123" design="list" display-content="yes" content-design="content" path="/examples/news-path" limit="3" order-by="release_date" order-dir="desc" />
Simply click "Publish," and the page will be updated so that users will be able to view your customized news feed.
Note:
The following instructions are meant only for those familiar with xslt.
Should you wish to make any changes to the way in which the news feed is styled (background color, rounded corners, etc.), you should access the "News" module administration.
From here, click on the "Setup" section at the top of the screen, and then select "Object Types" from the menu on the left-hand side of the window.
In the "Available Collections" table that appears, click on the news object type that will be displayed in your news feed.
Once clicked, you will see a table labeled "Designs," where you can select the design that you have specified with the
design attribute in the sys:news-list tag.
In the design's xslt document that appears, you can make the desired CSS style changes by modifying the classes and <div> tags as you wish, making sure to click "Save" at the bottom of the screen when you are done.
For detailed information on how to create the page used to display news items' full content and modify its style, please click
here.
