article-card.liquid

{% comment %}
    Renders an article card for a given blog with settings to either show the image or not.

    Accepts:
    - blog: {Object} Blog object
    - article: {Object} Article object
    - show_image: {String} The setting either show the article image or not. If it's not included it will show the image by default
    - show_date: {String} The setting either show the article date or not. If it's not included it will not show the image by default
    - show_author: {String} The setting either show the article author or not. If it's not included it will not show the author by default

    Usage:
    {% render 'article-card' blog: blog, article: article, show_image: section.settings.show_image %}
{% endcomment %}

<article class="article-card{% if article.image == blank or show_image == false %} article-card--no-image{% endif %}" aria-labelledby="Article-{{ article.id }}">
  <a href="{{ article.url }}" class="article-content motion-reduce">
    {%- if show_image == true and article.image -%}
      <div class="article-card__image-wrapper">
        <div class="article-card__image media media--landscape">
          <img srcset="
            {%- if article.image.src.width >= 165 -%}{{ article.image.src | img_url: '165x' }} 165w,{%- endif -%}
            {%- if article.image.src.width >= 360 -%}{{ article.image.src | img_url: '360x' }} 360w,{%- endif -%}
            {%- if article.image.src.width >= 533 -%}{{ article.image.src | img_url: '533x' }} 533w,{%- endif -%}
            {%- if article.image.src.width >= 720 -%}{{ article.image.src | img_url: '720x' }} 720w,{%- endif -%}
            {%- if article.image.src.width >= 940 -%}{{ article.image.src | img_url: '940x' }} 940w,{%- endif -%}
            {%- if article.image.src.width >= 1066 -%}{{ article.image.src | img_url: '1066x' }} 1066w{%- endif -%}"
            src="{{ article.image.src | img_url: '533x' }}"
            sizes="(min-width: 1100px) 535px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
            alt="{{ article.image.src.alt | escape }}"
            width="{{ article.image.width }}"
            height="{{ article.image.height }}"
            loading="lazy"
            class="motion-reduce"
          >
        </div>
      </div>
    {%- endif -%}

    <div class="article-card__info">
      <header class="article-card__header">
        <h2 class="article-card__title" id="Article-{{ article.id }}">
          {{ article.title | escape }}
        </h2>
        {%- if show_date -%}
          <span class="circle-divider caption-with-letter-spacing">
            {{- article.published_at | time_tag: format: 'month_year' -}}
          </span>
        {%- endif -%}
        {%- if show_author -%}
          <span class="caption-with-letter-spacing">{{ article.author -}}</span>
        {%- endif -%}
      </header>
      {%- if article.excerpt.size > 0 or article.content.size > 0 -%}
        <p class="article-card__excerpt rte-width">
          {%- if article.excerpt.size > 0 -%}
            {{ article.excerpt | strip_html | truncatewords: 30 }}
          {%- else -%}
            {{ article.content | strip_html | truncatewords: 30 }}
          {%- endif -%}
        </p>
      {%- endif -%}
      <div class="article-card__footer">
        {%- if article.comments_count > 0 and blog.comments_enabled? -%}
          <span>{{ 'blogs.article.comments' | t: count: article.comments_count }}</span>
        {%- endif -%}
      </div>
    </div>
  </a>
</article>