Blogs: Add author and date to grid view

If you're using the clean grid view to list your blog posts and would like to incorporate the author and publish date, you can use this customization.




Step 1

Open your code editor. In the Snippets folder, open to edit: article-grid-item.liquid

Or if you have Pipeline as your published theme, use this link instead:

Step 2

Replace all the code with this code:

<div class="grid__item {{ blog_grid }}">
  <a class="blog__link" href="{{ article.url }}">
    <div class="blog__article blog__article--card{% if article.image %} blog__article--image{% endif %}">
      {% if article.image %}<div class="blog__article__overlay" style="background-image: url('{{ article.image | img_url: 'x630' }}')"></div>{% endif %}
      <div class="blog__article__content equalHeightColumn">
        <h3 class="h3 blog__article__title">{{ article.title }}</h3>
        <div class="rte blog__article__text">
          {% unless article.image %}
            {% if article.excerpt == blank %}
              {{ article.content | strip_html | truncate: 200 }}
            {% else %}
              {{ article.excerpt | strip_html | truncate: 200 }}
            {% endif %}
          {% endunless %}
    {% capture author %}<span itemprop="author" itemscope itemtype=""><span class="strong" itemprop="name">{{ }}</span></span>
    {% endcapture %}
    {% capture date %}<time itemprop="datePublished" datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>{% endcapture %}
    <p class="accent">{{ 'blogs.article.author_on_date_html' | t: author: author, date: date }}</p>

Save the file. That's it! 

Undo or remove changes

Use the Older versions link to rollback to the original version to undo this customization. 

Still need help? Contact Us Contact Us