Articles

Articles loop

Articles are loaded via the agency admin link: /configure/website/content/articles. They can then be queried anywhere on a theme using the agency articles loop. Here’s an example construct:

{% for article in agency.articles limit: 3 %}
 <div class="list-news">
  {% if article.promo_image %}
   <a href="/articles/{{ article.slug }}" title="{{article.title}}">
    <img src="{{ article.promo_image | url_for_agency_logo : "60x60" }}" />
   </a>
  {% endif %}
  <h5>
   <a href="/articles/{{ article.slug }}">
    {{article.title}}
   </a>
  </h5>
  <p>{{article.promo}}</p>
 </div>
{% endfor %}

Articles index

The articles index is a static file that needs to reside in an articles folder in your theme. This index can be accessed using the URL /articles:

<h2>Articles{% if topic %} in {{topic | capitalize}}{% endif %}</h2>

{% for article in articles %}
  <a href="/articles/{{ article.slug }}">
    <div class="article">
      <h3 class="article-header">
        <span class="article-title">{{ article.title }}</span>
      </h3>
      {% if article.promo_image %}
        <img src="{{ article.promo_image | url_for_generic_image : "270x187" }}">
      {% else %}
        <img src="{{ 'article-placeholder.png' | theme_image_url }}">
      {% endif %}
      <div class="article-details">
        <span class="article-date">{{ article.date }}</span>
        {{ article.promo }}... 
        <span class="article-more-link" href="/articles/{{ article.slug }}">more</span>
      </div>
    </div>
  </a>
{% endfor %}

Articles show

The article show page is simply a show.liquid file in your articles directory that has access to the article object:

<div class="article-show">
 <h2 >{{ article.title }}</h2>
 {% if article.image %}
  <img src="{{ article.image | url_for_generic_image: "270x187" }}">
 {% endif %}
 <div class="article-content">
  {{ article.content }}
 </div>
</div>

Articles topics and functions

Topics are a useful way of grouping articles. You can loop through and query articles and topics in the same way we’ve seen in the other articles write-ups:

{% for article in agency.articles limit: 3 %}
 {% if article.topic == "news" %}
  <div class="promo-panel">
   <p>
    <a href="/articles/topic-{{topic}}">See all our {{topic}} posts</a>
   </p>
  </div>
 {% endif %}
{% endfor %}

This next assign statement gets all articles of a certain topic, or in the example shown it actually returns articles for either ‘Press Release’ or ‘News’ topics using comma separated values.

Note: These are case sensitive and also require no spaces between the words.

  {% assign other_articles = 'Press Release,News' | articles_by_topic %}

You can then loop through the array as you would normally do. Each result is an article object with all its attrbutes:

{% for article in other_articles limit: 5 %}
 <div class="promo-panel grey similar-article">
   <a href="/articles/{{ article.slug }}"><h3>{{ article.title }}</h3></a>
 </div>
{% endfor %}

Infinite scroll

In order to enable infinite scroll for articles you need to specify the initial containing element that is to be appended with the infinite scroll template.

  <div id="infinite_pages">
    {% for article in agency.articles %}
      {% include 'articles/article_partial' %}
    {% endfor %}
  </div>

Below is an example of defining the infinite scroll template which is used to render the subsequent blocks of article results at the end of the infinite_pages element.

 <script id="infinite_scroll_articles_template" type="text/liquid">
    {% for item in articles %}
        <div class="masonry-item">
          <h3><a href="/articles/{{item.slug}}">{{item.title}}</a></h3>
          {% if item.promo_image %}
            <div class="promo-image-wrapper">
              <a href="/articles/{{item.slug}}" class="promo_image">
                <img src="{{item.promo_image | url_for_generic_image : "378x_" }}"/>
              </a>
            </div>
          {% endif %}
          <span class="promo">{{ item.promo | truncatewords: 65 }} <a href="/articles/{{item.slug}}">Continue Reading</a></span>
        </div>
    {% endfor %}
</script>

You also need to enable infinite scroll like so:

  Ctesius.addConfig('enable_article_infinite_scroll', true);

Auto scrolling can be turned on or off with the following:

  Ctesius.addConfig('autoscroll_infinite_scroll', false);

The Ctesius event 'article_infinite_scroll_performed' is triggered when the page has been successfully loaded.

If you are planning on using infinite scroll on pages where you have articles for a specific topic you will need to call the following variation on button click to pass in the selected topic:

  Ctesius.Models.ArticleInfiniteScroll.loadNextByTopic('{{articles.first.topic}}')

Article JSON

The articles infinite scroll uses a liquid JSON (LJSON) partial named _articles_list.ljson an example of this file can be found in the stabilisers theme here.