article_card.html

{% load wagtailcore_tags wagtailimages_tags %}

<article class="card card--hoveractive article-card " itemtype="http://schema.org/BlogPosting" itemscope="">
  <link itemprop="mainEntityOfPage" href="{% pageurl article %}">

  <div class="article-card-cover">
    <a href="{% pageurl article %}" itemprop="image" itemtype="http://schema.org/ImageObject" itemscope="">
      {% image article.image width-800 as img %}
      <img src="{{ img.url }}" alt="{{ article.title }}">
      <meta itemprop="url" content="{{ img.url }}">
    </a>
    <div class="article-card-cover__details">
      <div class="article-card-sharing">
        <div class="social-icon-group ">
          <a
            href="https://www.facebook.com/sharer/sharer.php?u={% pageurl article %}"
            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
            class="social-icon social-icon--fill bg-brands-facebook text-white text-sm social-icon--4"
          ><i class="ico--facebook"></i></a>
          <a
            href="https://twitter.com/intent/tweet?text={{ article.title }}&url={% pageurl article %}"
            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
            class="social-icon social-icon--fill bg-brands-twitter text-white text-sm social-icon--4"
          ><i class="ico--twitter"></i></a>
        </div>
      </div>
      <div class="article-card-meta">
        <span class="article-card-meta__item" itemprop="description">{{ article.date|date:"SHORT_DATE_FORMAT" }}</span>
        {% if article.author %}
          <span class="article-card-meta__item" itemprop="author" itemtype="http://schema.org/Person" itemscope="">
            <span itemprop="name">{{ article.author }}</span>
          </span>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="card__body article-card__body">
    <a href="{% pageurl article %}">
      <h1 class="card-headline mb-4">{{ article.title }}</h1>
    </a>
    <p class="card-body-text flex-grow">{{ article.perex }}</p>

    {% if article.has_tags %}
      <div class="inline-block-nogap mt-4">
        {% for tag in article.tags.all %}
          <a href="{% pageurl article.tag_filter_page %}?tag={{ tag }}" class="btn article-card__category-button btn--grey-125 btn--condensed text-sm font-light">
            <div class="btn__body ">{{ tag }}</div>
          </a>
        {% endfor %}
      </div>
    {% endif %}

  </div>
</article>