Vivid-Casper/partials/post-card.hbs

{{!-- This is a partial file used to generate a post "card"
which templates loop over to generate a list of posts. --}}

<article class="post-card {{post_class}}{{#is "home"}}{{^is "paged"}}{{#has index="0"}}{{#match @custom.first_post_layout "Large card"}} post-card-large{{/match}}{{#match @custom.first_post_layout "Full-width card"}} post-card-full{{/match}}{{/has}}{{#match @custom.feed_layout "Dynamic grid"}}{{#match @custom.first_post_layout "None"}}{{#has index="0,1"}} dynamic{{/has}}{{else}}{{#has index="1,2"}} dynamic{{/has}}{{/match}}{{/match}}{{/is}}{{/is}}{{#if @custom.keep_card_thumbnail_ratio}} keep-ratio{{/if}}">

    {{#if feature_image}}
    <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, 800px"
            src="{{img_url feature_image size="m"}}"
            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
            loading="lazy"
        />
    </a>
    {{/if}}

    <div class="post-card-content">

        <a class="post-card-content-link" href="{{url}}">
            <header class="post-card-header">
                {{#primary_tag}}
                    <div class="post-card-primary-tag">{{name}}</div>
                {{/primary_tag}}
                <h2 class="post-card-title">{{title}}</h2>
            </header>
            {{#if excerpt}}
                <div class="post-card-excerpt">{{excerpt}}</div>
            {{/if}}
        </a>

        <footer class="post-card-meta">
            <time class="post-card-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
            {{#if reading_time}}
                <span class="sep">—</span>
                <span class="post-card-meta-length">{{reading_time}}</span>
            {{/if}}
        </footer>

    </div>{{!--/.post-card-content--}}

</article>