{% load wagtailcore_tags wagtailimages_tags wagtailroutablepage_tags %} {% routablepageurl page.root_page.articles_page "tags" as articles_tag_page_url %} <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.get_url }}"> <div class="article-card-cover"> <a href="{{ article.get_url }}" {{ article.get_rel }} itemprop="image" itemtype="http://schema.org/ImageObject" itemscope=""> {% if article.thumb_image %} {% image article.thumb_image fill-356x192 as img %} {% image article.thumb_image fill-714x384 as img_2x %} {% else %} {% image article.image fill-356x192 as img %} {% image article.image fill-714x384 as img_2x %} {% endif %} <img src="{{ img.url }}" srcset="{{ img.url }}, {{ img_2x.url }} 2x" 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.get_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.get_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.get_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 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.get_url }}" {{ article.get_rel }}> <h1 class="card-headline mb-4"> {{ article.title }} </h1> </a> <p class="card-body-text text-ellipsis overflow-hidden {% firstof perex_size 'h-64' %} flex-grow{% if article.is_black %} bg-black{% endif %}"> {{ article.perex }} </p> <div class="inline-block-nogap mt-4"> {% for tag in article.get_tags %} <a href="{{ articles_tag_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>