masonry

user/themes/gilles_acezat/templates/partials/base.html.twig

@@ -22,7 +22,9 @@
 
     {% block javascripts %}
         {% do assets.addJs('jquery', 101) %}
-        {% do assets.addJs('theme://js/jquery.treemenu.js', {group:'bottom'}) %}
+        {% do assets.addJs('theme://js/imagesloaded.pkgd.min.js', {group:'bottom'}) %}
+        {% do assets.addJs('theme://js/isotope.pkgd.min.js', {group:'bottom'}) %}
+        {% do assets.addJs('theme://js/masonry.pkgd.min.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
     {% endblock %}
     {{ assets.js()|raw }}
@@ -30,23 +32,14 @@
 {% endblock head %}
 </head>
 <body id="top">
-    <div id="page-wrapper">
+    <div id="page-wrapper" class="{{page.template}}">
 
     {% block header %}
         <header>
             <section class="container {{ grid_size }}">
                 <nav class="navbar">
-                    <section class="navbar-section logo">
-                      <a href="/"><h1>{{site.title|capitalize}}</h1></a>
-                      <h2>{{site.header.status|upper}}</h2>
-                    </section>
-                    <section class="navbar-section desktop-menu">
-
-                        {% if config.plugins.login.enabled and grav.user.username %}
-                            <span class="login-status-wrapper"><i class="fa fa-user"></i> {% include 'partials/login-status.html.twig' %}</span>
-                        {% endif %}
-
-                    </section>
+                  <a href="/"><h1>{{site.title|capitalize}}</h1>
+                  <h2>{{site.header.status|upper}}</h2></a>
                 </nav>
                 <div class="contact">
                   <svg>

user/themes/gilles_acezat/templates/partials/blog-item.html.twig

@@ -1,7 +1,3 @@
-
-
-<div class="content-item h-entry">
-
   {% if not hero_image_name %}
       <div class="content-title text-center">
           {% include 'partials/blog/title.html.twig' with {title_level: 'h2'} %}
@@ -62,16 +58,18 @@
 
   <div class="e-content">
       {{ page.content|raw }}
-      {% set image = page.media.images|first %}
-      {% if image %}
-          {{ image.cropZoom(800,400).html }}
-      {% endif %}
   </div>
 
+  <div class="img">  
+  {% set image = page.media.images|first %}
+  {% if image %}
+  {{ image.cropZoom(800,400).html }}
+  {% endif %}
+</div>
+
   <div class="top">
     <a href="#page-wrapper">
       <img src="" alt="">
       <p>top</p>
     </a>
   </div>
-</div>

user/themes/gilles_acezat/templates/partials/blog-list-item.html.twig

@@ -1,33 +1,36 @@
-<div class="card">
-    {% set image = page.media.images|first %}
-    {% if image %}
-    <div class="card-image">
-        <a href="{{ page.url }}">{{ image.html }}</a>
-    </div>
-    {% endif %}
+{% for category in page.taxonomy.category %}
+  <div class="card {{ category }}" data-category= "{{ category }}">
 
-    <div class="card-header">
-        <div class="card-title">
-        {% include 'partials/blog/title.html.twig' with {title_level: 'h5'} %}
-        </div>
+      {% set image = page.media.images|first %}
+      {% if image %}
+      <div class="card-image">
+          <a href="{{ page.url }}">{{ image.html }}</a>
+      </div>
+      {% endif %}
 
-
-        {% if page.taxonomy.category %}
-          <div class="card-category">
-            {% include 'partials/blog/category.html.twig' %}
+      <div class="card-header">
+          <div class="card-title">
+          {% include 'partials/blog/title.html.twig' with {title_level: 'h5'} %}
           </div>
-      {% endif %}
 
-      {% if page.date %}
-      <div class="card-date">
-        {% include 'partials/blog/date.html.twig' %}
-      </div>
-      {% endif %}
-    </div>
 
-    {% if page.taxonomy.tag %}
-      <div class="card-footer">
-        {% include 'partials/blog/taxonomy.html.twig' %}
+          {% if page.taxonomy.category %}
+            <div class="card-category">
+              {% include 'partials/blog/category.html.twig' %}
+            </div>
+        {% endif %}
+
+        {% if page.date %}
+        <div class="card-date">
+          {% include 'partials/blog/date.html.twig' %}
+        </div>
+        {% endif %}
       </div>
-  {% endif %}
-</div>
+
+      {% if page.taxonomy.tag %}
+        <div class="card-footer">
+          {% include 'partials/blog/taxonomy.html.twig' %}
+        </div>
+    {% endif %}
+  </div>
+{% endfor %}

user/themes/gilles_acezat/templates/partials/blog/category.html.twig

@@ -1,5 +1,5 @@
 {% if page.taxonomy.category %}
     {% for category in page.taxonomy.category %}
-    <a href="{{ blog.url|rtrim('/') }}/category{{ config.system.param_sep }}{{ category }}">{{ category }}</a>
+    <a href="{{ blog.url|rtrim('/') }}/category{{ config.system.param_sep }}{{ category }}" data-filter="{{ category }}" >{{ category }}</a>
     {% endfor %}
 {% endif %}