after.liquid

<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 {% if image_height %}article-card__image--{{ image_height }}{% else %} media--landscape{% endif %}" {% if section.settings.image_height == 'adapt' %} style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"{% endif %}> <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 >= 1000 -%}{{ article.image.src | img_url: '1000x' }} 1000w,{% endif %}{% if article.image.src.width >= 1500 -%}{{ article.image.src | img_url: '1500x' }} 1500w,{% endif -%}{{ article.image.src | img_url: 'master' }}{{ article.image.src.width }}w" src="{{ article.image.src | img_url: '533x' }}" sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (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>{% 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: 'date' }}</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>

before.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
    - image_height: {String} The setting changes the height of the article image, if shown
    - 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 {% if image_height %}article-card__image--{{ image_height }}{% else %} media--landscape{% endif %}" {% if section.settings.image_height == 'adapt' %} style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"{% endif %}>
          <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 >= 1000 -%}{{ article.image.src | img_url: '1000x' }} 1000w,{%- endif -%}
              {%- if article.image.src.width >= 1500 -%}{{ article.image.src | img_url: '1500x' }} 1500w,{%- endif -%}
              {{ article.image.src | img_url: 'master' }} {{ article.image.src.width }}w"
            src="{{ article.image.src | img_url: '533x' }}"
            sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (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: 'date' -}}
          </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>