News feeds working example
Code for example above
Add the news JavaScript to the page:
{% block bottom_js %}{{ parent() }}
<script src="/assets/dist/js/news.min.js"></script>
{% endblock %}
In this case we're not using the loader macro. It's just HTML:
<div class="twothird feature">
<p><a href="#documentation">Skip to code sample</a>.</p>
<!-- div w/ data attributes -->
<div id="news-container" class="loader-container" aria-live="polite"
data-news-app {# this is how the JavaScript below knows we want to pull in a news feed #}
data-base-url="http://news.cehd.umn.edu/" {# The url of the website with an RSS feed #}
data-feed-path="category/departments/organizational-leadership-policy-and-development/feed" {# The path for the feed at the site above #}
data-target-element-selector="#news-container" {# The element selector for the feed html #}
data-template-path="/assets/dist/views/cehd/newsfeeds/" {# The path the the Nunjucks template #}
data-template-name="index.html" {# The name of the Nunjucks template #}
data-limit="3" {# How many stories to display #}
>
<div class="loader">
<div class="loader-figure "></div>
<p class="loader-label">Loading…</p>
</div>
</div>
</div>
The code explained
Including the JavaScript file in the example above enables us to include some parameters in HTML data attributes.
Providing the information in the format above is enough to pull in a category. The data-template-path and data-template-name attributes indicate where the Nunjucks template is. Templates have to be in the public directory so browsers can access them.
That's what will render the list of stories. Here's what that template looks like:
<ul class="no-bullet">
{% for news_item in data.news %}
{%- if news_item.link_override -%}
{%- set article_link = news_item.link_override -%}
{%- else -%}
{%- set article_link = news_item.link -%}
{%- endif -%}
{%- if news_item.title_override -%}
{%- set article_title = news_item.title_override -%}
{%- else -%}
{%- set article_title = news_item.title -%}
{%- endif -%}
{% if loop.index0 < data.limit %}
<li class="news-item">
<a data-ga-command="send" data-ga-hit-type="event" data-ga-category="news link" data-ga-action="click" data-ga-label="{{ article_title }}" href="{{ article_link|safe }}">{{ article_title|safe }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
<div class="news-more-news-link-container">
<p class="text-right"><small><a href="{{ data.more_news_link }}" class="news-more-news-link">{{ data.more_news_text }}</a></small></p>
</div>
News feed data points
The news feed gets translated from XML to JSON because JavaScript can work with JSON natively. The JSON is just a set of key/value pairs. E.g., news_item.title in the template above maps to title in the JSON below:
[
{
"encoded": "<p><a href=\"http://www.cehd.umn.edu/OLPD/people/faculty/Vavrus.asp\"></a><a href=\"http://news.cehd.umn.edu/wp-content/uploads/2014/10/VavrusF-Pref.jpg\"><img class=\"alignleft size-full wp-image-23665\" src=\"http://news.cehd.umn.edu/wp-content/uploads/2014/10/VavrusF-Pref.jpg\" alt=\"Dr. Frances Vavrus\" width=\"150\" height=\"225\" /></a><a href=\"http://www.cehd.umn.edu/OLPD/people/faculty/Vavrus.asp\"></a><a href=\"http://news.cehd.umn.edu/wp-content/uploads/2015/07/DemerathP-2007.jpg\"><img class=\"alignleft size-full wp-image-30557\" src=\"http://news.cehd.umn.edu/wp-content/uploads/2015/07/DemerathP-2007.jpg\" alt=\"\" width=\"150\" height=\"225\" /></a><a href=\"http://www.cehd.umn.edu/OLPD/people/faculty/Vavrus.asp\">Fran Vavrus</a>, professor, and <a href=\"http://www.cehd.umn.edu/olpd/people/faculty/Demerath.asp\">Peter Demerath</a>, associate professor, in the <a href=\"http://www.cehd.umn.edu/olpd/\">Department of Organizational Leadership, Policy, and Development (OLPD)</a>, were both plenary speakers at the <a href=\"http://www.cies.us/\">Comparative and International Education Fall Symposium</a> held on October 26-27 at George Mason University. Their panels addressed the theme of the symposium, <i>Interrogating and Innovating CIE Research</i>, by focusing on the legacies of colonialism in educational research and on methodologies that offer alternative approaches to knowledge production. OLPD alumna Laura Willemsen and Ph.D. student Richard Bamattre also presented a paper at the conference on their innovative approaches to teaching comparative education at UM.</p>",
"description": "Fran Vavrus, professor, and Peter Demerath, associate professor, in the Department of Organizational Leadership, Policy, and Development (OLPD), were both plenary speakers at the Comparative and International Education Fall Symposium held on October 26-27 at George Mason University. Their panels addressed the theme of the symposium, Interrogating and Innovating CIE Research, by focusing on the … <a href=\"http://news.cehd.umn.edu/vavrus-and-demerath-were-plenary-speakers-at-cies/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Vavrus and Demerath were plenary speakers at CIES</span> <span class=\"meta-nav\">→</span></a>",
"link": "http://news.cehd.umn.edu/vavrus-and-demerath-were-plenary-speakers-at-cies/",
"link_override": null,
"teaser": null,
"thumbnail": "",
"title": "Vavrus and Demerath were plenary speakers at CIES",
"title_override": null,
"categories": [
"Educational & Organizational Leadership",
"Faculty & Staff",
"Organizational Leadership, Policy, and Development",
"ZZ Special Use - News Homepage"
]
}
]