description = "Post Header"

[viewBag]
==
{% if post.featured_images.count > 1 and this.theme.blog_post_image == 'gallery' %}
<div id="postheaderCarousel{{ post.title|slug }}" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        {% for image in post.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 post.featured_images %}
        <div class="carousel-item bg-cover py-md-24 py-10 {{ 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_post_height), 'crop') }}'); height: {{ this.theme.blog_post_height }}px;"
        >
        </div>
        {% endfor %}
    </div>
{% endif %}
{% if post.featured_images.count == 1 or (post.featured_images.count > 1 and this.theme.blog_post_image == 'image') %}
<div class="position-relative bg-cover py-md-24 py-10 {{ this.theme.blog_post_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('{{ post.featured_images.first.getThumb(1920, (this.theme.blog_post_height), 'crop') }}'); height: {{ this.theme.blog_post_height }}px;"
>
{% endif %}
        <div class="position-absolute pos-0 overflow-hidden w-100 h-100 {{ this.theme.blog_post_pageheader_opacity }} {{ this.theme.blog_post_pageheader_overlay }}"></div>
        <div class="h-100 w-100 pos-0 position-absolute">
            <div class="{{ this.theme.blog_post_container }} h-100">
                <!-- Row  -->
                <div class="row align-items-center justify-content-center h-100">
                    <!-- Column -->
                    <div class="col-md-6 align-self-center text-center" {% if this.theme.blog_post_animation %}data-aos="fade-down" data-aos-duration="1200"{% endif %}>
                        <h1 class="{% if this.theme.blog_post_pageheader_overlay == 'bg-white' or this.theme.blog_post_pageheader_overlay == 'bg-secondary' %}text-dark{% else %}text-white{% endif %} font-weight-bold text-uppercase pt-5 pb-4">
                            {{ post.title }}
                        </h1>
                        <h6 class="{% if this.theme.blog_post_pageheader_overlay == 'bg-white' or this.theme.blog_post_pageheader_overlay == 'bg-secondary' %}text-dark{% else %}text-white{% endif %} opacity-75">
                            {% for category in post.categories %}{{ category.name }}{% if not loop.last %}, {% endif %}{% endfor %}
                        </h6>
                    </div>
                    <!-- Column -->
                </div>
            </div>
        </div>
{% if post.featured_images.count == 1 or (post.featured_images.count > 1 and this.theme.blog_post_image == 'image') %}
</div>
{% endif %}
{% if post.featured_images.count > 1 and this.theme.blog_post_image == 'gallery' %}
    <a class="carousel-control-prev w-auto pl-4" href="#postheaderCarousel{{ post.title|slug }}" role="button" data-slide="prev">
        <span class="fa fa-angle-left icon-prev d-flex justify-content-center align-items-center rounded-circle w-12r h-12r border-1 border-white-50" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next w-auto pr-4" href="#postheaderCarousel{{ post.title|slug }}" role="button" data-slide="next">
        <span class="fa fa-angle-right icon-next d-flex justify-content-center align-items-center rounded-circle w-12r h-12r border-1 border-white-50" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
{% endif %}