article_preview.html

{% load wagtailcore_tags wagtailimages_tags %}

<article
  itemtype="http://schema.org/BlogPosting"
  class="card card--hoveractive article-card{% if article.is_black %} bg-black{% endif %}"
  itemscope=""
>

  <link itemprop="mainEntityOfPage" href="{{ article.url }}">

  <div class="article-card-cover">
    <a href="{{ article.url }}" itemprop="image" itemtype="http://schema.org/ImageObject" itemscope="">
      {% image article.image width-2000 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={{ article.url|urlencode }}"
            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|urlencode }}&url={{ article.url|urlencode }}"
            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>
          <a
            href="https://www.linkedin.com/sharing/share-offsite/?url={{ article.full_url|urlencode }}"
            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-linkedin text-white text-sm social-icon--4">
            <i class="ico--linkedin"></i>
          </a>
        </div>
      </div>

      <div class="article-card-meta"  class="c-metadata-block-section__item" >
        <span itemprop="description" class="article-card-meta__item">
          {{ article.date|date:"SHORT_DATE_FORMAT" }}
          <meta itemprop="datePublished" content="{{ article.last_published_at }}" />
        </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{% if article.is_black %} text-white{% endif %}">
    <a href="{{ article.url }}">
      <h1 class="card-headline mb-4">
        {{ article.title }}
      </h1>
    </a>
    <p class="card-body-text flex-grow{% if article.is_black %} bg-black{% endif %}">
      {{ article.perex }}
    </p>
    <div class="inline-block-nogap mt-4">
        {% for tag in article.tags.all %}
          <a
            href="{{ page.root_page.tags_page.url }}?tag={{ tag.slug }}"
            class="btn article-card__category-button btn--condensed text-sm font-light btn--grey-{% if article.is_black %}700{% else %}125{% endif %} btn--hoveractive"
          >
            <div class="btn__body">{{ tag }}</div>
          </a>
        {% endfor %}
    </div>
  </div>

  <div itemprop="publisher" itemtype="http://schema.org/Organization" class="hidden" itemscope="">
    <div itemprop="logo" itemtype="http://schema.org/ImageObject" itemscope="">
      <meta itemprop="url" content="/assets/img/brand/logo.svg">
    </div>
    <meta itemprop="name" content="Česká pirátská strana">
  </div>

</article>