weflock/partials/post-card.hbs

64 lines
2.2 KiB
Handlebars
Raw Normal View History

2018-12-17 07:25:57 -05:00
<article class="post-card {{post_class}} {{#unless feature_image}}no-image{{else}}{{#is "home"}}{{#has index="nth:6"}}post-card-large{{/has}}{{/is}}{{/unless}}">
2017-06-12 05:01:00 -04:00
{{#if feature_image}}
2018-12-17 07:25:57 -05:00
<a class="post-card-image-link" href="{{url}}">
{{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img class="post-card-image"
srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w"
sizes="(max-width: 1000px) 400px, 700px"
src="{{img_url feature_image size="m"}}"
alt="{{title}}"
/>
</a>
2017-06-12 05:01:00 -04:00
{{/if}}
2018-12-17 07:25:57 -05:00
2017-06-12 05:01:00 -04:00
<div class="post-card-content">
2018-12-17 07:25:57 -05:00
2017-06-12 05:01:00 -04:00
<a class="post-card-content-link" href="{{url}}">
2018-12-17 07:25:57 -05:00
2017-06-12 05:01:00 -04:00
<header class="post-card-header">
{{#if primary_tag}}
<span class="post-card-tags">{{primary_tag.name}}</span>
2017-06-12 05:01:00 -04:00
{{/if}}
<h2 class="post-card-title">{{title}}</h2>
</header>
2018-12-17 07:25:57 -05:00
2017-06-12 05:01:00 -04:00
<section class="post-card-excerpt">
<p>{{excerpt words="33"}}</p>
</section>
2018-12-17 07:25:57 -05:00
2017-06-12 05:01:00 -04:00
</a>
2018-12-17 07:25:57 -05:00
2017-06-12 05:01:00 -04:00
<footer class="post-card-meta">
2018-04-10 14:19:29 -04:00
<ul class="author-list">
{{#foreach authors}}
<li class="author-list-item">
<div class="author-name-tooltip">
{{name}}
</div>
{{#if profile_image}}
2018-12-17 07:25:57 -05:00
<a href="{{url}}" class="static-avatar">
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
</a>
2018-04-10 14:19:29 -04:00
{{else}}
2018-04-12 04:05:40 -04:00
<a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
2018-04-10 14:19:29 -04:00
{{/if}}
</li>
{{/foreach}}
</ul>
<span class="reading-time">{{reading_time}}</span>
2017-06-12 05:01:00 -04:00
</footer>
2018-12-17 07:25:57 -05:00
</div>{{!--/.post-card-content--}}
2017-06-12 05:01:00 -04:00
</article>