Articles and Article Typology
For specific editorial purposes, publishers may not want to marfeelize certain articles from their desktop site. In these cases, Marfeel partners can define the articles to be extracted for their Marfeel Progressive WebApp (PWA) by inserting the following markup in each article to be marfeelized:
data-mrf-article
When implementing any one of Marfeel's markups, data-mrf-article is mandatory and must always be inserted.
Usage example
<div data-mrf-article>
</div>
Article typology
Marfeel partners can also define the following attributes to appear in the articles of their Marfeel PWA, which must be inserted in the HTML of the article itself:
Article title
Defines the article's title:
data-mrf-title
When implementing any one of Marfeel's markups, data-mrf-title is mandatory and must always be inserted to identify the article's title.
Usage example
<h1 data-mrf-title class="story-heading">
<a data-mrf-link href="https://www.nytimes.com/2017/06/22/magazine/the-ethereal-genius-of-craig-taborn.html">
The Ethereal Genius of Craig Taborn
</a>
</h1>
Article link
Defines the link to the article:
data-mrf-link
When implementing any one of Marfeel's markups, data-mrf-link is mandatory and must always be inserted to identify the article's URL.
Usage example
<a data-mrf-link href="https://www.nytimes.com/2017/06/22/magazine/the-ethereal-genius-of-craig-taborn.html">The Ethereal Genius of Craig Taborn</a></h1>
Subtitle
Defines the subtitle for a specific article:
data-mrf-subtitle
Usage example
<div class="hpHeader">
<h6><a data-mrf-subtitle href="https://www.nytimes.com/section/magazine">From the Magazine</a></h6>
</div>
Author
Identifies the author to be included in the partner's article:
data-mrf-author
Usage example
<p data-mrf-author class="byline">By ADAM SHATZ </p>
Date
Marks the date to be displayed in the article:
data-mrf-date
Usage example
<p data-mrf-date>Monday 20th</p>
Media
Defines any media, such as images, to be included in the partner's Marfeel PWA:
data-mrf-media
Usage example
<img data-mrf-media src="http://immagini.quotidiano.net/?url=http://p1014p.quotidiano.net:80/polopoly_fs/1.3216476!/httpImage/image.jpg_gen/derivatives/wide_680/image.jpg&h=120&pos=top&w=300" class="lazy " data-src="http://immagini.quotidiano.net/?url=http://p1014p.quotidiano.net:80/polopoly_fs/1.3216476!/httpImage/image.jpg_gen/derivatives/wide_680/image.jpg&h=120&pos=top&w=300" alt="Borja Valero, obiettivo dell'Inter " title="Borja Valero, obiettivo dell'Inter " width="300" height="120">
Tags
Indicates any added tags to be included in the article:
data-mrf-tags
Usage example
The following usage example contains different instances of the various article attributes that can be used:
<div data-mrf-article data-mrf-order="2" data-mrf-layout="PILL" class="collection">
<div class="hpHeader">
<h6><a data-mrf-subtitle href="https://www.nytimes.com/section/magazine">From the Magazine</a></h6>
</div>
<article class="story theme-feature" id="topnews-100000005169281" data-story-id="100000005169281" data-rank="1"
data-collection-renderstyle="LargeMediaHeadlineSumCentered">
<figure class="media photo">
<div class="image">
<a href="https://www.nytimes.com/2017/06/22/magazine/the-ethereal-genius-of-craig-taborn.html"><img data-mrf-media
src="https://static01.nyt.com/images/2017/06/25/magazine/25taborn3/25mag-25taborn-t_CA2-largeHorizontal375.jpg"
alt=""></a>
</div>
<figcaption class="caption" itemprop="description">
<span class="caption-text">Taborn at home in Brooklyn.</span>
<span class="credit" itemprop="copyrightHolder">
<span class="visually-hidden">Credit</span>
Ryan Pfluger for The New York Times </span>
</figcaption>
</figure>
<h1 data-mrf-title class="story-heading"><a data-mrf-link
href="https://www.nytimes.com/2017/06/22/magazine/the-ethereal-genius-of-craig-taborn.html">The Ethereal
Genius of Craig Taborn</a></h1>
<p data-mrf-excerpt class="summary">He has become one of the best jazz pianists alive — by disappearing almost completely into
his music.</p>
<p data-mrf-author class="byline">By ADAM SHATZ </p>
<p data-mrf-date>Monday 20th</p>
<p class="theme-comments">
<a href="https://www.nytimes.com/2017/06/22/magazine/the-ethereal-genius-of-craig-taborn.html?hp&target=comments#commentsContainer"
class="comments-link"><i class="icon sprite-icon comments-icon"></i><span class="comment-count">17 Comments</span></a>
</p>
</article>
</div>