News Filter Container component

access your news through via a filterable Archive or Timeline Teasers

  • filterable News Archive set-up
  • Timeline Teasers for placing on prominent pages
  • automatic Atom Feed generation

The News Filter Container component is used to display the News Archive, a collection of press releases created with the News Content Pages. It offers 2 kind of displays: News Archive, to create the Archive itself, and News Timeline to offer an overview of the latest news.

on this page:
Box Type: News Archive , Öffnet in neuem Fenster Box Type: News Timeline , Öffnet in neuem Fenster
Component settings , Öffnet in neuem Fenster Atom Feed , Öffnet in neuem Fenster
Step by step , Öffnet in neuem Fenster

Introduction

The News Filter Container component is used to actually access the News Archive on a page. It is available in the Standard Content Template and provides two different Types: News Archive and News Timeline. With the News Archive, the acutal front-end search of the Archive is created, where a portal visitor can access all News Entries and filter the displayed Teaser boxes with a set of provided Filters. A click on a Teaser links to the respective News Content Page.

With the News Timeline, a kind of a box container is created that displays the latest news (most recently created) of a defined Category. It can be embedded to overview pages. Additionally, an Atom Feed is automatically generated on all pages that contain the component.

In order to use the component, the entire News Archive needs to be set up beforehand. Please see the News Feature help pages for more information.

Box Type: News Archive

With the Box Type = News Archive, the Archive's front-end search is set-up. It displays all the Archive Teasers from the provided source. Above the teasers, a set of Filters can be set in order to search through the Archive.

On first load, only a defined amount of teasers is loaded. A click on load more loads additional one. In the Archive Teasers, the language of the Teaser can be changed by clicking on the Language Links. This also changes the link target, of course. A click on the Teaser leads to the desired News Content Page.

Please check out the behaviour in the example below.

Live example News Archive:

Box Type: News Timeline

With the Box Type = News Timeline, a box component is created that promotes the News Archive and provides an overview of the latest news added (of a defined category). It is usually used on overview or entry pages of a website. It always loads all available Timeline Teasers in a Scrolling Type = Overflow.

Please check out the behaviour in the example below.

Live example News Timeline:

Component settings

The News Filter Container component is used to set up both, the News Archive and the News Timeline display, although the 2 displays do not have much in common. For the Box Type News Archive, many settings are needed, reflected in 4 tabs in the edit window dialogue.

For the set-up of a News Timeline, only the tab General, where the source is added, needs to be configured. Simply set the Box Type to News Timeline and all unnecessary tabs are not configurable anymore.

 

For the set-up of a News Archive, please follow the below instructions:

tab: General

In the tab General, the Box Type, meaning which display the Box Filter Container shall have and the source of the News Archive is defined. It is possible to add multiple source paths and to filter the available News Content Pages from the chosen path by adding Source Filter tags (only load pages with a certain tag).

tab: Front End Filter

In the Front End Filter tab, it is defined which filtering options, displayed as buttons and/or dropdowns the News Archive shall provide. The visitor can thereby search the News Archive by e.g. date or category.

The tab is only configurable with the Box Type = News Archive.

tab: Labels

In the tab Labels, some mandatory labels for the search/ filtering functionality are defined.

The tab is only configurable with the Box Type = News Archive.

tab: Links

In the Links tab, a link or any other text can be defined. It is then displayed below the Filter options.

The tab is only configurable with the Box Type = News Archive.

tab: Atom Feed

In this tab, meta data and the amount or News Entries listed for the Atom Feed are defined. The Atom feed can be called up from any page that contains a News Filter Container by adding /atom to the URL.

Please see the Atom Feed section for more information.

Atom Feed

Every page that contains a News Filter Container automatically generates an Atom Feed. This feed can be subscribed to or re-used in other applications. It can be accessed by adding /atom to the page, e.g. https://help.gem.erstegroupit.com/en/components/news-filter-container/atom.

In the Box Filter Container component, tab Atom Feed, some meta data like the <title> tag can be defined. The generated feed .xml is structured as follows:

 
<feed xmlns="http://www.w3.org/2005/Atom">
  <title type="html">
   <![CDATA[ GEM online help news ]]>
  </title>
  <subtitle type="html">
   <![CDATA[ greetings from EMIL ]]>
  </subtitle>
  <link rel="alternate" href="/content/sites/vendor/egit-int/help_gem_erstegroupit_com/de/settings/news"/>
  <link rel="self" href="/en/settings/news.atom.xml"/>
  <id>
    /content/sites/vendor/egit-int/help_gem_erstegroupit_com/en/settings/news
  </id>
  <updated>2017-02-13T23:17:13.920+0100</updated>
  <author>
    <name>Fabian Knobel</name>
    <email>fabian.knobel@erstegroup.com</email>
  </author>
  <entry>
    <title type="html">
        <![CDATA[ Erste Bank Savings and credit forecast 2017 ]]>
    </title>
    <link rel="alternate" href="/en/news/2017/02/10/savings-credit-forecast-Q4"/>
    <published>2017-02-10T00:00:00.000+0100</published>
    <id>/en/news/2017/02/10/savings-credit-forecast-Q4</id>
    <updated>2017-02-10T00:00:00.000+0100</updated>
  </entry>
  <entry>
    <title type="html">
        <![CDATA[
Erste Bank Introduces Video-Based Identification of New Customers
]]>
    </title>
    <link rel="alternate" href="/en/news/2017/01/23/erste-bank-introduces-video-based-identification-of-new-customers"/>
    <published>2017-01-23T00:00:00.000+0100</published>
    <id>
/en/news/2017/01/23/erste-bank-introduces-video-based-identification-of-new-customers
    </id>
    <updated>2017-01-23T00:00:00.000+0100</updated>
  </entry>
</feed>

If the feed is called up in a browser that can either read it or has a feed reader add-on / extension installed, the News Entries could be displayed as follows. A click on a listed link leads to the respective News Content Page.

Step by step

1

2

3

4

Related topics

Used recurring elements