description = "Blog 4 Section"

[viewBag]

[blogPosts latestPosts]
pageNumber = "{{ :page }}"
postsPerPage = 12
noPostsMessage = "No posts found"
sortOrder = "published_at desc"
categoryPage = "blog/blog-category"
postPage = "blog/blog-post"
==
<div {% if data.section_blog4_id %}id="{{ data.section_blog4_id }}"{% endif %} class="blog4 py-24 {{ data.section_blog4_bg }}">
    <div class="{{ data.section_blog4_container }}">
        <!-- Row  -->
        {% if data.section_blog4_header or data.section_blog4_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_blog4_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_blog4_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="card-columns {{ data.section_blog4_column }}" style="-webkit-column-gap:{{ data.section_blog4_gap }}; -moz-column-gap:{{ data.section_blog4_gap }}; column-gap:{{ data.section_blog4_gap }};">
            {% set aos = ['fade-right', 'fade-down', 'fade-left', 'fade-right', 'fade-up', 'fade-left'] %}
            {% set posts = latestPosts.posts %}
            {#{% if data.section_blog4_type == 'latest' %}{% set posts = latestPosts.posts %}{% else %}{% set posts = topPosts.mostVisitedPosts %}{% endif %}#}
            {% for post in posts|slice(0, (data.section_blog4_number)) %}
            {% set img = ['200', '400', '300', '300', '400', '200'] %}
            <!-- Column -->
            <div class="card border-0 overflow-hidden rounded-{{ data.section_blog4_radius }} {{ data.section_blog4_shadow }}" style="{% if data.section_blog4_animation == 0 %}transform:translate(0);{% endif %} margin-bottom:{{ data.section_blog4_gap }};" {% if data.section_blog4_animation %}data-aos="{{ aos[ loop.index0 % 6 ] }}" data-aos-duration="1200"{% endif %}>
                {% if post.featuredvideo.hasVideo %}
                <div class="embed-responsive embed-responsive-16by9">{{ post.featuredvideo.iframe_content|raw }}</div>
                {% elseif post.featured_images.count == 1 or (data.section_blog4_carousel == '0' and post.featured_images.count > 1) %}
                <div class="card-img-top">
                    <a href="{{ post.url }}">
                        <img src="{{ post.featured_images.first.getThumb(380, (img[ loop.index0 % 6 ]), 'crop') }}" alt="{{ image.title }}" class="img-fluid w-100"/>
                    </a>
                </div>
                {% elseif data.section_blog4_carousel and post.featured_images.count > 1 %}
                <div id="blog4Carousel-{{ data.section_blog4_id }}{{ post.title|slug }}" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        {% for image in post.featured_images %}
                        <li data-target="#blog4Carousel-{{ data.section_blog4_id }}{{ 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 card-img-top {{ loop.first ? 'active' }}">
                            <a href="{{ post.url }}"><img src="{{ image.getThumb(380, 250, 'crop') }}" class="d-block w-100" alt="{{ image.title }}"></a>
                        </div>
                        {% endfor %}
                    </div>
                    <a class="carousel-control-prev" href="#blog4Carousel-{{ data.section_blog4_id }}{{ 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="#blog4Carousel-{{ data.section_blog4_id }}{{ 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>
                {% elseif post.featuredvideo.hasVideo %}
                <div class="video-wrapper">{{ post.featuredvideo.iframe_content|raw }}</div>
                {% endif %}
                <div class="p-7 {{ data.section_blog4_align }}">
                    <div class="d-flex display-13">
                        {% if data.section_blog4_type == 'latest' and data.section_blog4_category %}
                        {% for category in post.categories %}
                        <a href="{{ category.url }}">{{ category.name }}{% if not loop.last %}, {% endif %}</a>
                        {% endfor %}
                        {% endif %}
                        {% if data.section_blog4_date %}
                        <span class="ml-auto">{{ post.published_at|date('M d, Y') }}</span>
                        {% endif %}
                    </div>    
                    <h5 class="font-weight-medium mt-5"><a href="{{ post.url }}" class="text-link">{{ post.title }}</a></h5>
                    {% if data.section_blog4_desc %}
                    <p class="mt-4">{{ html_limit(post.summary, 120)|raw }}</p>
                    {% endif %}
                </div>
            </div>
            <!-- Column -->
            {% else %}
            <div class="col-md-4">{{ noPostsMessage }}</div>
            {% endfor %}
        </div>
    </div>
</div>