custom-authors.hbs

{{!< default}}

{{#post}}
    <main class="site__content">
        <article class="article">

            <header class="section section--only-top background-alternate print-padding-none">
                <div class="container">
                    <h1 class="article__title js-nbsp">{{title}}</h1>
                    <h2 class="article__summary js-nbsp">{{excerpt}}</h2>
                </div>
            </header>

            <section class="section background-alternate">
                <div class="container">

                    {{#get "authors"
                        include="count.posts"
                        order="count.posts DESC"
                        limit="all"
                    }}
                        <div class="grid">

                            {{#foreach authors}}
                                <div>

                                    {{#if profile_image}}
                                        <a
                                            href="{{url}}"
                                            class="
                                                avatar
                                                avatar--responsive
                                                avatar--square
                                                avatar--link
                                                spacing-bottom-small
                                            "
                                        >
                                            <img
                                                src="{{img_url profile_image size="m"}}"
                                                srcset="
                                                    {{img_url profile_image size="s"}} 300w,
                                                    {{img_url profile_image size="m"}} 600w,
                                                    {{img_url profile_image size="l"}} 1000w,
                                                    {{img_url profile_image size="xl"}} 2000w
                                                "
                                                sizes="
                                                    (min-width: 32em) 330px, <!-- Size is controlled by CSS grid, this value is the approximate biggest size. -->
                                                    calc((100vw - 2 * 2.25em - 0.666em) / 2)
                                                "
                                                loading="lazy"
                                                class="avatar__image"
                                                alt="{{name}}"
                                            />
                                        </a>
                                    {{/if}}

                                    <div class="author-card">
                                        <h3 class="author-card__name">
                                            <a href="{{url}}" class="link-unstyled spacing-right-1">
                                                {{name}}
                                            </a>
                                            {{> "staff-label"}}
                                        </h3>
                                        {{#if bio}}
                                            <p class="author-card__bio js-nbsp">
                                                {{bio}}
                                            </p>
                                        {{/if}}
                                    </div>

                                </div>
                            {{/foreach}}

                        </div>
                    {{/get}}

                </div>
            </section>

            <section class="section">
                <div class="container container--article text-center">

                    <div class="js-nbsp js-external-links">
                        {{content}}
                    </div>

                </div>
            </section>

        </article>
    </main>
{{/post}}

{{> "footer"}}