title = "Gallery"
url = "/gallery"
layout = "default"
is_hidden = 0
==
<?php
use RainLab\Blog\Models\Category;
    function onStart()
    {
        $menus = Category::where("slug", "gallery")->first()->getAllChildren();
        $posts = Category::where("slug", "gallery")->first();
        $this['menus'] = $menus;
        $this['posts'] = $posts->posts;
		$this['js'] = "assets/js/script.min.js";
        $this['js'] = "assets/js/gallery.min.js";
        // dd($this['posts'][0]->categories[0]->slug);
	}
?>
==
{% put styles %}
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/css/lightgallery.min.css">
    {% endput %}

	{% put scripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.1/isotope.pkgd.min.js"></script>
    <script src="https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
    {% endput %}

    {% put scripts_inline %}
    {% endput %}

    {% put additional_flying_elements %}
    {% endput %}

    {% put footer_pusher %}
    {% endput %}

    {% put modal %}
    {% endput %}

    <section id="gallery-01">
        <div class="container">
            <div class="button-group filter-button-group mb-4 mb-md-5 d-lg-flex justify-content-lg-center"  style="display:none">
                <div class="btn btn-primary rounded-0 filter-button d-block d-sm-inline-block mb-2" data-filter="*">All</div>
                {% for menu in menus %}
                <div class="btn btn-primary rounded-0 filter-button d-block d-sm-inline-block  mb-2" data-filter=".{{menu.slug}}">{{menu.name}}</div>
                {% endfor %}
            </div>
            <div id="photo-gallery" class="grid">
                {% for post in posts %}
                {% for img in post.featured_images %}
                <div data-src="{{img.path}}" class="grid-item {{post.categories[0].slug}} {{post.categories[1].slug}}">
                    <img src="{{img.path}}">
                </div>
                {% endfor %}
                {% endfor %}
                <!-- {% for gallery in galleries %}
                {% for image in gallery.images %}
                <div data-src="{{image.path}}" class="grid-item {{gallery.slug}}">
                    <img src="{{image.path}}">
                </div>
                {% endfor %}
                {% endfor %} -->
            </div>
        </div>
    </section>