liebling/featured.hbs

{{!--
This template is used for the posts that are marked as pages.
--}}

{{#contentFor "preload"}}
  {{!-- This block preloads specific assets for the post page --}}
  <link rel="preload" href="{{asset "css/post.css"}}" as="style" />
  <link rel="preload" href="{{asset "js/page.js"}}" as="script" />
  {{!-- This block preloads specific assets for the index page --}}
  <link rel="preload" href="{{asset "css/home.css"}}" as="style" />
  <link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
  <link rel="preload" href="{{asset "js/home.js"}}" as="script" />
{{/contentFor}}

{{#contentFor "styles"}}
  {{!-- This block loads specific styles for the post page --}}
  <link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" />
  {{!-- This block loads specific styles for the index page --}}
  <link rel="stylesheet" type="text/css" href="{{asset "css/home.css"}}" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
{{/contentFor}}

{{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!< default}}

{{!-- Special header.hbs partial to generate the <header> tag --}}
{{#post}}
  {{> header background=feature_image}}
{{/post}}

<main class="main-wrap">
  {{!-- Everything inside the #post tags pulls data from the post --}}
  {{#post}}
    {{!-- Inject styles of the hero image to make it responsive --}}
    {{> hero background=feature_image}}
    <div class="m-hero__content" data-animate="fade-down">
      <h1 class="m-hero-title bigger">{{title}}</h1>
      {{#if custom_excerpt}}
        <p class="m-hero-description">{{custom_excerpt}}</p>
      {{/if}}
    </div>
    </section>
  {{/post}}
  <article>
    <div class="l-content">
      <div class="l-wrapper in-post" data-animate="fade-up">
        <div class="l-post-content">
          <div class="pos-relative js-post-content">
            {{#post}}
              {{content}}
            {{/post}}
          </div>
        </div>
        {{!-- pyv --}}
        <div class="l-grid centered">
          {{#get "posts" filter="featured:true" include="authors,tags" as |featured|}}
            {{#if featured}}
              <div class="m-featured-slider swiper js-featured-slider">
                <div class="m-featured-slider__list swiper-wrapper">
                  {{#foreach featured to="1"}}
                    <div class="m-featured-slider__list__item swiper-slide">
                      <article class="m-featured-article {{#unless feature_image}}no-picture{{/unless}}">
                        <div class="m-featured-article__picture">
                          {{#if feature_image}}
                            <style>
                              #featured-bg-{{id}} {
                                background-image: url({{img_url feature_image size='l'}});
                              }
                              @media(max-width: 768px) {
                                #featured-bg-{{id}} {
                                  background-image: url({{img_url feature_image size='m'}});
                                }
                              }
                            </style>
                            <div id="featured-bg-{{id}}"></div>
                          {{/if}}
                        </div>
                        {{#if primary_tag}}
                          <div class="m-featured-article__ribbon">
                            <span>{{primary_tag.name}}</span>
                          </div>
                        {{/if}}
                        <a href="{{url}}" class="m-featured-article__content">
                          <h2 class="m-featured-article__title js-featured-article-title" title="{{title}}">
                            {{title}}
                          </h2>
                        </a>
                      </article>
                    </div>
                  {{/foreach}}
                </div>
              </div>
              {{#foreach featured from="2"}}
                <article class="m-article-card {{#unless feature_image}}no-picture{{/unless}} {{post_class}}">
                  <div class="m-article-card__picture">
                    <a href="{{url}}" class="m-article-card__picture-link" aria-hidden="true" tabindex="-1"></a>
                    {{#if feature_image}}
                      <img class="m-article-card__picture-background" src="{{img_url feature_image size="m"}}" loading="lazy" alt="">
                    {{/if}}
                    {{#if primary_tag}}
                      <div class="m-article-card__featured">
                        <span>{{primary_tag.name}}</span>
                      </div>
                    {{/if}}
                  </div>
                  <div class="m-article-card__info no-tag">
                    <a href="{{url}}" class="m-article-card__info-link" aria-label="{{title}}">
                      <div>
                        <h2 class="m-article-card__title js-article-card-title {{#unless feature_image}}js-article-card-title-no-image{{/unless}}" title="{{title}}">
                          {{title}}
                        </h2>
                      </div>
                    </a>
                  </div>
                </article>
              {{/foreach}}
            {{/if}}
          {{/get}}
        </div>
        {{!-- /pyv --}}
      </div>
    </div>
  </article>
</main>

{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
  <script defer src="{{asset "js/page.js"}}"></script>
  <script defer src="{{asset "js/home.js"}}"></script>
{{/contentFor}}