description = "Posts Style 3"

[viewBag]
==
{% set aos = ['fade-right', 'fade-down', 'fade-left', 'fade-right', 'fade-up', 'fade-left'] %}
{% for post in posts %}
{% set img = ['500', '900', '500', '700', '1200', '400'] %}
<!-- Posts  -->
<div class="card border-0 overflow-hidden rounded-{{ this.theme.blog_posts_card_radius }} {{ this.theme.blog_posts_card_shadow }} {{ this.theme.blog_posts_card_type == 'color' ? this.theme.blog_posts_card_color }}" style="{% if this.theme.blog_posts_animation == 0 %}transform:translate(0);{% endif %} margin-bottom:{{ this.theme.blog_posts_card_gap }};" {% if this.theme.blog_posts_animation %}data-aos="{{ aos[ loop.index0 % 6 ] }}" data-aos-duration="1200" data-aos-once="true"{% endif %}>
    {% if post.featuredvideo.hasVideo %}
    <div class="embed-responsive embed-responsive-16by9">{{ post.featuredvideo.iframe_content|raw }}</div>
    {% elseif post.featured_images.count > 1 and this.theme.blog_posts_image == 'gallery' %}
    <div id="postsCarousel{{ post.title|slug }}" class="carousel slide carousel-fade" data-ride="carousel">
        <ol class="carousel-indicators">
            {% for image in post.featured_images %}
            <li data-target="#postsCarousel{{ 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 overflow-hidden rounded-top-{{ this.theme.blog_posts_card_radius }} {{ loop.first ? 'active' }}">
                <a href="{{ post.url }}"><img src="{{ image.getThumb(1000, (this.theme.blog_posts_height), 'crop') }}" class="d-block w-100" alt="{{ post.title }}"></a>
            </div>
            {% endfor %}
        </div>
        <a class="carousel-control-prev" href="#postsCarousel{{ 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="#postsCarousel{{ 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.featured_images.count == 1 or this.theme.blog_posts_image == 'image' %}
    <a href="{{ post.url }}">
        <img src="{{ post.featured_images.first.getThumb(1000, (img[ loop.index0 % 6 ]), 'crop') }}" alt="{{ image.description }}" class="card-img-top"/>
    </a>
    {% endif %}
    <div class="p-7 {{ this.theme.blog_posts_align }}">
        <div class="d-flex display-13">
            <span>{{ post.published_at|date('M d, Y') }}</span>
            {% if this.theme.blog_post_disqus %}
            <span class="ml-auto"><i class="fa fa-comments display-14 text-body" aria-hidden="true"></i> <a href="{{ post.url }}#disqus_thread"></a></span>
            {% endif %}
        </div>
        <h5 class="font-weight-medium mt-5">
            <a href="{{ post.url }}" class="text-link">{{ post.title }}</a>
        </h5>
        <p class="mt-5 mb-5">{{ html_limit(post.summary, 280)|raw }}</p>
        <div class="d-flex align-items-center display-13">
            {% if post.user.avatar %}
            <span><img class="rounded-circle mr-1" src="{{ post.user.avatar.getThumb(40, 40, 'crop') }}" alt="{{ post.user.avatar.file_name }}">
            By {{ post.user.first_name}}</span>
            {% endif %}
            <span class="ml-auto">
            {% for category in post.categories %}
            <a href="{{ category.url }}" class="text-uppercase text-success">{{ category.name }}</a>{% if not loop.last %}, {% endif %}
            {% endfor %}
            </span>
        </div>
    </div>
</div>
<!-- Posts -->
{% else %}
<div class="col-md-12 py-24" {% if this.theme.blog_posts_animation %}data-aos="{{ aos[ loop.index0 % 6 ] }}" data-aos-duration="1200"{% endif %}>{{ noPostsMessage }}</div>
{% endfor %}