tag.hbs

{{!< default}}
{{#tag}}
{{> site-header}}
{{> sub-header}}
<div class="header_banner" data-header-cover-image="{{img_url feature_image}}">
    <div class="header_banner_inner">
        <div class="container">
            <h2 class="site_description">#{{name}}</h2>
        </div>
    </div>
</div>
<script>
    var pagetitle = '{{name}}';
    var pagecoverimg = '{{img_url feature_image}}';
</script>
{{/tag}}
<main id="site-main" class="site-main outer">
    <div class="container">

        <div class="post-feed">
            {{#foreach posts}}

                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
                {{> "post-card"}}

            {{/foreach}}
        </div>

        <div class="next_posts_btn">
          <button>{{t "Load more"}}</button>
        </div>
        
    </div>
</main>

{{#contentFor "scripts"}}
<script>
    $(document).ready(function () {
        var headerCoverImage = $(".header_banner").data("header-cover-image");
        if(headerCoverImage){
            $('.header_banner').css('background', 'url(' + headerCoverImage + ')');
        }
        loadPostCardFeaturedImages();
    });
    var subheaderrender = false;
    $(window).scroll(function() {
        var height = $(window).scrollTop();
        if(height  > 300) {
            $("body").addClass("showing_sub_header");
            if(subheaderrender == false){
                $(".sub_header_page_title").html("#"+pagetitle);
                $(".sub_header_page_featured_image").html('<span style="background:url('+pagecoverimg+')"></span>');
                subheaderrender = true;
            }
        } else {
            $("body").removeClass("showing_sub_header");
        }
    });
</script>
{{/contentFor}}