Join our HiFi mailing list to receive the latest news & updates

Recent News

Overview:

This snippet will insert a list of recent Posts from a given Feed on your HiFi website; this may be a Feed or recent news, upcoming events, or blog posts. Posts are listed in reverse chronological order and are constructed with semantic HTML5 markup.

Requirements:

  • Create a Feed content item in your HiFi website and populate it with Posts

Components:

Template:

{% set feedUrl as '/news' %}
<section id="latest-news">
    <h2>Latest News</h2>
    {% for article in hifi.get({ type: 'post', parent: { type: 'feed', url: feedUrl }, orderBy: '-publishedAt', count: 5 }) %}
    <article>
        <h2><a href="{{ article.url }}">{{ article.title|e }}</a></h2>
        <time datetime="{{ article.publishedAt|date('c') }}" pubdate>{{ article.publishedAt|date('F d, Y') }}</time>
    </article>
    {% else %}
    <p>No recent news articles were found.</p>
    {% endfor %}
    <ul id="latest-news-options">
        <li class="first"><a href="{{ feedUrl }}">Read more</a></li>
        <li class="last"><a href="{{ feedUrl }}.rss">Subscribe with RSS</a></li>
    </ul>
</section>

CSS:

#latest-news{
    color: #555;
    font: 12px/20px Arial, Verdana, sans-serif;
}
#latest-news h2{
    margin: 0 0 20px 0;
    color: #333;
    font-size: 18px;
}
#latest-news article{ margin: 0 0 20px 0; }
#latest-news article h3{
    margin: 0;
    font-size: 14px;
}
#latest-news article h3 a{ color: #2F72C5; }
#latest-news article time{
    color: #999;
    font-size: 11px;
    font-style: italic;
}
#latest-news-options{
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 12px;
}
#latest-news-options li{
    border-right: 1px dotted #CCC;
    float: left;
    padding: 0 6px;
}
#latest-news-options li.first{ padding-left: 0; }
#latest-news-options li.last{
    border: none;
    padding-right: 0;
}

Installation:

To install this snippet, insert the template markup above into your site templates where you would like to display the list of recent articles. Next, ensure the `feedUrl` variable at the top of the template markup snippet is set to the appropriate Feed URL; the example above assumes your Feed URL is "/news".

Comments

  1. There are no comments yet.