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>

    {# TODO tags #}
    {% comment %}
    <div class="inline-block-nogap mt-4">
      <button class="btn article-card__category-button btn--grey-125 btn--condensed text-sm font-light">
        <div class="btn__body ">Kategorie 1</div>
      </button>
      <button class="btn article-card__category-button btn--grey-125 btn--condensed text-sm font-light">
        <div class="btn__body ">Kategorie 2</div>
      </button>
      <button class="btn article-card__category-button btn--grey-125 btn--condensed text-sm font-light">
        <div class="btn__body ">Dlouhá kategorie 3</div>
      </button>
    </div>
    {% endcomment %}

  </div>
</article>