Feed
Usage
The Feed Object can take any feed and display is as a widget anywhere on a page. Currently, it's configured to work with Medium feeds and will display 10 posts at a time (Medium feeds won't display more than 10 posts).
To use the feed, include the following script in your page:
<script type="text/javascript" src="dist/scripts/modules/Feed.js">
Optionally, but recommended, include the base styling for the feed:
<link rel="stylesheet" src="dist/styles/feed.css">
The location of the script and stylesheet depends where they are placed in your directory structure. Then, add the container, configuration, and initialization script on the page:
<div id="feed" style="color: lightsteelblue"></div><!-- The "color: lightsteelblue"" sets the border-color property for individual posts. You could also try setting "font-size: 85%" if you would like a widget for a smaller side column --><script type="text/javascript">new Feed({selector: "#feed", // required, the container for the feedfeed: "https://medium.com/feed/@nycopportunity/", // requiredpostCtaText: "Read the full article on Medium",log: true}).init();</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. .init(); is a function that executes initialization of the feed and displays it. 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.
avatarImageRatio: ["50", "50"], // Image source attribute width and height for the account avatarpostImageRatio: ["auto", "200px"], // CSS width and max-height properties for the post imagepostExcerptLength: 120, // This is the length of the excerptpostExcerptTrail: "…", // This is the trailing ellipsis for excerptspostCtaText: "Click here to read the full article", // This is the text for each post call to action// @url https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateStringpostDateLocal: "en-US", // This is a parameter used by Date.toLocaleDateString(), see the link above for configuration detailspostDateFormat: { // This is a parameter used by Date.toLocaleDateString(), see the link above for configuration detailsyear: "numeric",month: "long",day: "numeric"},postDateTitle: "Published Date", // This is the title set to the published date element to provide context on mouseoverclasses: { // These are CSS classes that can be added to each elementwrapper: "", // The wrapper for the whole widgetheader: "", // The widget headerurl: "", // The widget urlcard: "", // The repeating class for the widget"s cardstitle: "", // The title of each cardlink: "", // The link of each cardthumbnail: "", // The thumbnail image of each cardexcerpt: "", // The excerpt of each cardcardFooter: "", // The footer of each card with the cta and datecta: "", // The final call to action of each carddate: "" // The publication date of each card},template: Feed.templates.medium, // The template of the feed, the script comes with a template for Medium feeds onlylog: false // Logs data to the console. You will want this turned off in most cases but it allows you to see what data is being passed to the template
Templates
The feed comes shipped with a ready-to-use LoDash template for Medium feeds.
<section class="o-feed <%- config.classes.wrapper %>"><header class="o-feed__header <%- config.classes.header %>"><div class="o-feed__avatar <%- config.classes.avatar %>"><img src="<%- feed.image %>"width="<%- config.avatarImageRatio[0] %>"height="<%- config.avatarImageRatio[1] %>"></div><a class="o-feed__url <%- config.classes.avatar %>"href="<%- feed.url %>" target="_blank" rel="noopener nofollow"><%- feed.title %></a></header><% _each(items, function(post) { %><div class="c-feed-item <%- config.classes.card %>"><h4 class="c-feed-item__title <%- config.classes.title %>"><a class="c-feed-item__link <%- config.classes.link %>"href="<%- post.guid %>"target="_blank"rel="noopener nofollow"><%- post.title %></a></h4><div class="c-feed-item__thumbnail <%- config.classes.thumbnail %>"><img style="width: <%- config.postImageRatio[0] %>;max-height: <%- config.postImageRatio[1] %>;"src="<%- post.thumbnail %>"></div><p class="c-feed-item__excerpt <%- config.classes.excerpt %>"><%- post.excerpt %><%- config.postExcerptTrail %></p><div class="c-feed-item__footer <%- config.classes.cardFooter %>"><a class="c-feed-item__cta <%- config.classes.cta %>"href="<%- post.guid %>"target="_blank"rel="noopener nofollow"><%- config.postCtaText %></a><span class="c-feed-item__date <%- config.classes.date %>"title="<%- config.postDateTitle %>"><%- post.date %></span></div></div><% }); %></section>
This template can be overwritten with the template configuration parameter. You can copy the template above to get started creating your own template and see the LoDash documentation for templates. Here's an example of passing your own template to the configuration:
var MyTemplate = "<div>...template content...</div>"new Feed({selector: "#feed", // requiredfeed: "https://medium.com/feed/@nycopportunity/", // requiredtemplate: MyTemplate}).init();
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.