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}}{{#match @custom.feed_layout "Classic"}}{{#is "home"}}{{#has index="0"}} post-card-large{{/has}}{{#has index="1,2"}} dynamic{{/has}}{{/is}}{{/match}}{{#match @custom.feed_layout "Grid"}} keep-ratio{{/match}}{{#match @custom.feed_layout "List"}}{{#is "home"}} post-card-large{{/is}}{{/match}}">

    {{#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>

</article>