liebling/partials/loop.hbs
2020-07-07 17:13:29 +02:00

61 lines
2.5 KiB
Handlebars

{{!-- The template below includes the markup for each post --}}
{{#foreach posts}}
{{#is "post"}}
<div class="m-recommended-slider__item glide__slide">
{{/is}}
{{#if feature_image}}
<article class="m-article-card {{post_class}}">
{{else}}
<article class="m-article-card no-picture {{post_class}}">
{{/if}}
<div class="m-article-card__picture">
<a href="{{url}}" class="m-article-card__picture-link" aria-hidden="true" tabindex="-1"></a>
{{#if feature_image}}
<img clasS="m-article-card__picture-background" src="{{img_url feature_image size="m"}}" loading="lazy" alt="">
{{/if}}
<a href="{{primary_author.url}}" class="m-article-card__author js-tooltip" aria-label="{{primary_author.name}}" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
{{#if primary_author.profile_image}}
<div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
{{else}}
<div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
{{/if}}
</a>
{{#if featured}}
<a href="{{url}}" class="m-article-card__featured js-tooltip" data-tippy-content="{{t "Featured"}}" aria-label="{{t "Featured"}}">
<span class="icon-star" aria-hidden="true"></span>
</a>
{{/if}}
</div>
{{#if primary_tag}}
<div class="m-article-card__info">
<a href="{{primary_tag.url}}" class="m-article-card__tag">{{primary_tag.name}}</a>
{{else}}
<div class="m-article-card__info no-tag">
{{/if}}
<a href="{{url}}" class="m-article-card__info-link" aria-label="{{title}}">
<div>
<h2 class="m-article-card__title js-article-card-title {{#unless feature_image}}js-article-card-title-no-image{{/unless}}" title="{{title}}">
{{title}}
</h2>
</div>
<div class="m-article-card__timestamp">
<span>{{date published_at timeago="true"}}</span>
<span>&bull;</span>
<span>{{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span>
</div>
</a>
</div>
</article>
{{#is "post"}}
</div>
{{/is}}
{{else}}
<header class="m-heading no-margin">
<h3>{{t "No posts found"}}</h3>
<p>
{{t "Apparently there are no posts at the moment, check again later."}}
</p>
</header>
{{/foreach}}