description = "Category Header"

[viewBag]
==
{% if category.featured_images.count > 1 and this.theme.blog_posts_image == 'gallery' %}
<div id="postheaderCarousel{{ post.title|slug }}" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        {% for image in category.featured_images %}
        <li data-target="#postheaderCarousel{{ post.title|slug }}" data-slide-to="{{ loop.index0 }}" {% if loop.index0 == 0 %}class="active"{% endif %}></li>
        {% endfor %}
    </ol>
    <div class="carousel-inner" role="listbox">
        {% for image in category.featured_images %}
        <div class="carousel-item bg-cover py-md-24 py-7 {{ loop.first ? 'active' }} 
        {% if this.theme.header_trans and this.theme.header|length == 3 %}pt-lg-64 pb-lg-36
        {% elseif this.theme.header_trans and this.theme.header|length == 2 %}pt-lg-48 pb-lg-36
        {% elseif this.theme.header|length == 1 %}pt-lg-36 pb-lg-36
        {% endif %}
        "style="background-image: url('{{ image.getThumb(1920, (this.theme.blog_posts_height), 'crop') }}'); height: {{ this.theme.blog_posts_height }}px;"
        >
        </div>
        {% endfor %}
    </div>
{% endif %}
{% if category.featured_images.count == 1 or (category.featured_images.count > 1 and this.theme.blog_posts_image == 'image') %}
<div class="position-relative bg-cover py-md-24 py-7 {{ this.theme.blog_posts_pageheader_parallax ? 'jarallax' }} 
{% if this.theme.header_trans and this.theme.header|length == 3 %}pt-lg-64 pb-lg-36
{% elseif this.theme.header_trans and this.theme.header|length == 2 %}pt-lg-48 pb-lg-36
{% elseif this.theme.header|length == 1 %}pt-lg-36 pb-lg-36
{% endif %}
" style="background-image: url('{{ category.featured_images.first.getThumb(1920, (this.theme.blog_posts_height), 'crop') }}'); height: {{ this.theme.blog_posts_height }}px;"
>
{% endif %}
        <div class="position-absolute pos-0 overflow-hidden w-100 h-100 {{ this.theme.blog_posts_pageheader_opacity }} {{ this.theme.blog_posts_pageheader_overlay }}"></div>
        <div class="h-100 w-100 pos-0 position-absolute">
            <div class="{{ this.theme.blog_posts_container }} h-100">
                <!-- Row  -->
                <div class="row align-items-center justify-content-center h-100">
                    <!-- Column -->
                    <div class="col-md-8 align-self-center text-center" {% if this.theme.blog_posts_pageheader_animation %}data-aos="fade-down" data-aos-duration="1200"{% endif %}>
                        <h1 class="{{ this.theme.settings_pageheader_fcolor }} font-weight-bold text-uppercase py-md-4 py-2">
                            {{ category.name }}
                        </h1>
                        <h6 class="{{ this.theme.settings_pageheader_fcolor }} opacity-75">
                            {{ category.description|raw }}
                        </h6>
                    </div>
                    <!-- Column -->
                </div>
            </div>
        </div>
{% if category.featured_images.count == 1 or (category.featured_images.count > 1 and this.theme.blog_posts_image == 'image') %}
</div>
{% endif %}
{% if category.featured_images.count > 1 and this.theme.blog_posts_image == 'gallery' %}
    <a class="carousel-control-prev" href="#postheaderCarousel{{ post.title|slug }}" role="button" data-slide="prev">
        <span class="fa fa-angle-left icon-prev" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#postheaderCarousel{{ post.title|slug }}" role="button" data-slide="next">
        <span class="fa fa-angle-right icon-next" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
{% endif %}