custom-archive-tags.hbs

{{!-- Layout --}}
{{!< default}}

{{#contentFor "special_body_class"}}topic{{/contentFor}}

<section class="container">
    {{#post}}
        <div class="u-marginBottom40 site-archive u-textAlignCenter">
            <h1 class="site-archive-title u-underline u-fontSizeLargest u-md-fontSize36 u-contentTitle"><span>{{title}}</span></h1>
            <div class="site-archive-des u-fontSize20 u-marginAuto u-maxWidth740">{{content}}</div>
        </div>
    {{/post}}

    <div class="row">
    {{#get "tags" limit="18" include="count.posts" order="count.posts desc"}}
    {{#foreach tags}}

    <div class="col s12 m6 l4 u-marginBottom30">
        <article class="topic-item u-relative u-flexColumnTop">
            <header class="topic-header u-flex1 u-flexCenter u-paddingRight20 u-paddingLeft20 u-spaceBetween">
                <h2 class="topic-name u-contentTitle u-fontSize20 u-textCapitalize"><a href="{{url}}" class="u-block">{{name}}</a></h2>
                <p class="u-fontSize15 u-textMuted">{{count.posts}} {{t "Stories"}}</p>
            </header>

            <figure class="topic-img u-flex0 u-relative">
                {{#if feature_image}}
                    <img class="u-absolute u-image u-block blur-up lazyload"
                        src="{{img_url feature_image size="l"}}"
                        srcset="{{img_url feature_image size="xxs"}}"
                        data-srcset="{{img_url feature_image size="s"}} 300w, {{img_url feature_image size="m"}} 600w, {{img_url feature_image size="l"}} 1000w"
                        data-sizes="(max-width: 1000px) 400px, 600px"
                        alt="{{name}}"
                    />
                {{else}}
                    <div class="u-absolute0 u-block u-bgCover" style="background-image: url({{asset "images/not-image.jpg"}})"></div>
                {{/if}}
            </figure>

            <a href="{{url}}" class="u-absolute0 zindex2" aria-label="{{name}}"></a>
        </article>
    </div>

    {{/foreach}}
    {{/get}}
    </div>
</section>