description = "Blog 1 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_blog1_id %}id="{{ data.section_blog1_id }}"{% endif %} class="blog1 py-24 {{ data.section_blog1_bg }}">
    <div class="{{ data.section_blog1_container }}">
        <!-- Row  -->
        {% if data.section_blog1_header or data.section_blog1_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_blog1_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_blog1_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="row">
            {% set aos = ['flip-left', 'flip-up', 'flip-right'] %}
            {% set posts = latestPosts.posts %}
            {#{% if data.section_blog1_type == 'latest' %}{% set posts = latestPosts.posts %}{% else %}{% set posts = topPosts.mostVisitedPosts %}{% endif %}#}
            {% for post in posts|slice(0, (data.section_blog1_number)) %}
            <!-- Column -->
            <div class="{{data.section_blog1_column }}" {% if data.section_blog1_animation %}data-aos="{{ aos[ loop.index0 % 3 ] }}" data-aos-duration="1200"{% endif %}>
                <div class="card border-0 mb-7 shadow-md">
                    {% 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_blog1_carousel == '0' and post.featured_images.count > 1) %}
                    <div class="card-img-top img-hover">
                        <a href="{{ post.url }}">
                            <img src="{{ post.featured_images.first.getThumb(380, 250, 'crop') }}" alt="{{ image.title }}" class="img-fluid w-100"/>
                        </a>
                    </div>
                    {% elseif data.section_blog1_carousel and post.featured_images.count > 1 %}
                    <div id="blog1Carousel-{{ data.section_blog1_id }}{{ post.title|slug }}" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            {% for image in post.featured_images %}
                            <li data-target="#blog1Carousel-{{ data.section_blog1_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 img-hover {{ 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="#blog1Carousel-{{ data.section_blog1_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="#blog1Carousel-{{ data.section_blog1_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_blog1_align }}">
                        {% if data.section_blog1_category or data.section_blog1_date %}
                        <div class="d-flex display-13">
                            {% if data.section_blog1_type == 'latest' and data.section_blog1_category %}
                            {% for category in post.categories %}
                            <a href="{{ category.url }}">{{ category.name }}{% if not loop.last %}, {% endif %}</a>
                            {% endfor %}
                            {% endif %}
                            {% if data.section_blog1_date %}
                            <span class="ml-auto">{{ post.published_at|date('M d, Y') }}</span>
                            {% endif %}
                        </div>
                        {% endif %}
                        <h5 class="font-weight-medium mt-5"><a href="{{ post.url }}" class="text-link">{{ post.title }}</a></h5>
                        {% if data.section_blog1_desc %}
                        <p class="mt-4">{{ html_limit(post.summary, 100)|raw }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- Column -->
            {% else %}
            <div class="{{data.section_blog1_column }}">{{ noPostsMessage }}</div>
            {% endfor %}
        </div>
    </div>
</div>