About

The Feed Object can take any feed and display is as a widget anywhere on a page ( see the demonstration). Currently, it's configured to work with Medium feeds. You can add combine multiple feed urls to display as many posts from different user profiles, publications, or tagged pages in publications. Refer to the Medium RSS Feed Documentation on available feeds.

Customize your feed

You can use this form to customize your own feed or you can follow the steps below to embed it manually.

Usage

To use the feed, include the following scripts in your page:

<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Promise&gated=gated" type="text/javascript"> <!-- The feed component uses Promises so this polyfill is needed for IE support -->
<script src="https://cdn.jsdelivr.net/gh/CityOfNewYork/nyco-patterns@v1.7.0/dist/objects/feed/Feed.js" type="text/javascript">

Optionally, but recommended, include the base styling for the feed:

<link src="https://cdn.jsdelivr.net/gh/CityOfNewYork/nyco-patterns@v1.7.0/dist/objects/feed/feed.css" rel="stylesheet" type="text/css" media="screen">

Then, add a container with the feed's id and the execution script with configuration parameters.

<div id="js-feed"></div>
<script type="text/javascript">
  new Feed({
    selector: "#js-feed", // The DOM element selctor for the feed. Defaults to #js-feed
    feed: "https://medium.com/feed/@nycopportunity/", // Required. The feed you want to display. May be an array of multiple feeds
  });
</script>

new Feed({}); creates a feed, accepting a configuration object as a parameter. The object should contain the configuration you would like for the feed. Note: the selector and feed parameters are required to display a feed. Below is a list of the rest of the default configuration options. See the Medium RSS Feed Documentation for more details on their feeds.

Configuration

To change an option, add the desired variable to the configuration object above. Keep in mind they should be the same type (string or number) as they are listed below.

{{ name }}
type: {{ typeof item }}
default: {{ item }}

Layouts

In the bundled styles for this component there are three layouts for the Feed items: 1 column (default), 2 column, and 3 column. In order to utilize the 2 or 3 column layouts, configure the classes.wrapper parameter to o-feed--3-column for 3 columns and o-feed--2-column for 2 columns.

Templates

The feed comes shipped with ready-to-use LoDash template components for Medium feeds. Each component can be overwritten with the template.component configuration parameter. You can copy the templates below to get started creating your own template and refer to the LoDash documentation for templates.

// The opening template tag or wrapper of the entire feed.
{{ template }}

// The header template that sits at the top of the posts.
{{ template }}

// The posts loop including the posts template.
{{ template }}

// The closing template tag or wrapper of the entire feed.
{{ template }}

Here's an example of passing your own template to the configuration:

var MyTemplate = {
  opener: "<div>...template content...</div>"
  header: "<div>...template content...</div>"
  posts: "<div>...template content...</div>"
  closer: "<div>...template content...</div>"
};
new Feed({
  selector: "#feed", // required
  feed: "https://medium.com/feed/@nycopportunity/", // required
  template: MyTemplate
});

Templates are passed the config object and whatever the response of the feed is. In Medium's case, they pass the feed parameter and posts within the items parameter in the response from their RSS feed. To see the data that gets passed to the template to use in your template, set the log configuration parameter to true. Open up the console to see the data for this particular feed demonstration.

RSS to JSON

The Feed Object uses an API from https://rss2json.com to convert desired RSS feed into a consumable JSON object. See the RSS 2 JSON Online Converter documentation for details.