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>

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&amp;h=120&amp;pos=top&amp;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&amp;h=120&amp;pos=top&amp;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&amp;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>