Section Previews

Section previews are a key strategy to promote recirculation by presenting further content to be discovered. 

Publishers can define their own section previews or content groups to be displayed together by completing the following:

  1. Enter the following markup to wrap the content group or section preview:

    data-mrf-group
  2. The location where the markup is inserted in your HTML will determine where the content group is displayed in the section page. However to specify the location of the content group, the following markup can be inserted:

    data-mrf-order=""


    For example:

    <div data-mrf-group data-mrf-order="3" data-mrf-group-layout="SLIDER" class="chart-module">
  3. The title for the section preview or content group must also be defined using the following markup:

    data-mrf-group-title

    For example:

    <span data-mrf-group-title class="title-side">Sport Tops</span>
  4. The corresponding data-attribute that defines the style of the content group must also be included in the markup.

    data-mrf-group-layout=""

    Publishers can choose from any of the following styles: 

Pill

data-mrf-group-layout="pill"

Photo

data-mrf-group-layout="photo"

Thumb

data-mrf-group-layout="thumb"

Slider

data-mrf-group-layout="slider"

Cards

data-mrf-group-layout="cards"

Opinion

data-mrf-group-layout="opinion"

firstPhoto

data-mrf-group-layout="firstphoto"

mostRead

data-mrf-group-layout="mostRead"

Usage example

<div data-mrf-group data-mrf-order="3" data-mrf-group-layout="SLIDER" class="chart-module">
    <span data-mrf-group-title class="title-side">Sport Tops</span>
    <ul class="chart">
        <li data-mrf-article>
            <a href="http://www.quotidiano.net/sport/calcio/calciomercato-tutte-le-trattative-1.3216477" class="spf-link" rel="nofollow" title="Calciomercato, tutte le trattative. Inter a un passo da Borja Valero">
                <div class="chart-img-container">

                    <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">
                    <noscript>&lt;img 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&amp;#39;Inter " title="Borja Valero, obiettivo dell&amp;#39;Inter " class="" /&gt;</noscript>

                </div></a>
            <div class="chart-content">
                <span data-mrf-subtitle class="chart-category">Calcio</span>
                <a data-mrf-link href="http://www.quotidiano.net/sport/calcio/calciomercato-tutte-le-trattative-1.3216477" class="spf-link" rel="nofollow" title="Calciomercato, tutte le trattative. Inter a un passo da Borja Valero">
                    <h3 data-mrf-title>Calciomercato, tutte le trattative. Inter a un passo da Borja Valero</h3>
                </a>
            </div>
        </li>
        <li data-mrf-article>
            <a href="http://www.quotidiano.net/sport/calcio/europei-under-21-italia-1.3216310" class="spf-link" rel="nofollow" title="Italia Under 21, batosta contro la Repubblica Ceca">
                <div class="chart-img-container">

                    <img data-mrf-media src="http://immagini.quotidiano.net/?url=http://p1014p.quotidiano.net:80/polopoly_fs/1.3216342!/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.3216342!/httpImage/image.jpg_gen/derivatives/wide_680/image.jpg&amp;h=120&amp;pos=top&amp;w=300" alt="Petagna (LaPresse)" title="Petagna (LaPresse)" width="300" height="120">
                    <noscript>&lt;img src="http://immagini.quotidiano.net/?url=http://p1014p.quotidiano.net:80/polopoly_fs/1.3216342!/httpImage/image.jpg_gen/derivatives/wide_680/image.jpg&amp;h=120&amp;pos=top&amp;w=300" alt="Petagna (LaPresse)" title="Petagna (LaPresse)" class="" /&gt;</noscript>

                </div></a>
            <div class="chart-content">
                <span data-mrf-subtitle class="chart-category">Calcio</span>
                <a data-mrf-link href="http://www.quotidiano.net/sport/calcio/europei-under-21-italia-1.3216310" class="spf-link" rel="nofollow" title="Italia Under 21, batosta contro la Repubblica Ceca">
                    <h3 data-mrf-title>Italia Under 21, batosta contro la Repubblica Ceca</h3>
                </a>
            </div>
        </li>
    </ul>
</div>