description = "Gallery"

[viewBag]

[blogPosts blogPostsGallery]
pageNumber = "{{ :page }}"
postsPerPage = 9
noPostsMessage = "No posts found"
sortOrder = "random"
categoryPage = "blog/blog-category"
postPage = "blog/blog-post"
==
<?php
function onStart()
{
    $this->addCss('assets/vendor/swipebox/css/swipebox.min.css');
    $this->addJs('assets/vendor/swipebox/js/jquery.swipebox.min.js');
}
?>
==
<div class="mb-12 
    {% if (blogPosts.posts and this.theme.blog_posts_style != 'style1') or (searchResults.results and this.theme.blog_posts_style != 'style1') or (blogPost.post and this.theme.blog_post_style != 'style1') %}card border-0 shadow p-7{% endif %}" 
    {% if (blogPosts.posts and this.theme.blog_posts_animation) or (blogPost.post and this.theme.blog_post_animation) %}data-aos="fade-up" data-aos-duration="1200"{% endif %}
>
    <h4 class="mb-7">Post Gallery</h4>
    <div class="container">
    <div class="row">
        {% set posts = blogPostsGallery.posts %}
        {% for post in posts %}
        {% if post.featured_images.count > 0 %}
        <div class="col-4 p-1">
            <a class="swipebox-gallery" href="{{ post.featured_images.first.getThumb(false, false, 'auto') }}" caption="<b class='text-white display-11'>{{ post.title }}</b><br><em class='text-light'>{{ html_limit(post.summary, 280)|raw }}</em>">
                <img src="{{ post.featured_images.first.getThumb(100, 100, 'crop') }}" class="img-fluid w-100" alt="{{ post.title }}" />
            </a>
        </div>
        {% endif %}
        {% endfor %}
    </div>
    </div>
</div>

{% put scripts %}
<script>
;( function( $ ) {
    $( '.swipebox-gallery' ).swipebox( {
		hideCloseButtonOnMobile : false, // true will hide the close button on mobile devices
		removeBarsOnMobile : true, // false will show top bar on mobile devices
		hideBarsDelay : 5000, // delay before hiding bars on desktop
		videoMaxWidth : 1600 // videos max width
    } );
} )( jQuery );
</script>
{% endput %}