Update blog post list to use masonry layout

assets/js/script.js

@@ -12,6 +12,21 @@ $(window).on('load', function () {
 const observer = lozad(); // lazy loads elements with default selector as ".lozad"
 observer.observe();
 
+/* ========================================================================= */
+/* init Masonry for blog list
+/* ========================================================================= */
+var grid = document.querySelector('.blog-post');
+
+if (grid) {
+  var msnry = new Masonry(grid, {
+    percentPosition: true
+  });
+
+  imagesLoaded(grid).on('progress', function() {
+    // layout Masonry after each image loads
+    msnry.layout();
+  });
+}
 
 /* ========================================================================= */
 /*	Image Preloader
@@ -21,7 +36,6 @@ function imgIsLoaded(imgElement) {
 	$(imgElement).removeClass("unloaded");
 }
 
-
 /* ========================================================================= */
 /*	Code Copy Button
 /* ========================================================================= */

layouts/_default/article.html

@@ -1,7 +1,7 @@
-<article class="col-lg-4 col-md-6 col-12 clearfix wow fadeInUp mb-4" data-wow-duration="500ms">
-    <div class="post-block border-glow-2">
-        <div class="media-wrapper">
-            <img class="img-fluid lozad" src="{{ .Params.Image_webp | absURL }}" onerror="this.onerror=null;this.src='{{ .Params.image | absURL }}'">
+<article class="col-sm-6 col-lg-4 mb-4 clearfix" data-wow-duration="500ms">
+    <div class="card post-block border-glow-2">
+        <div class="card-img">
+            <img class="img-fluid" src="{{ .Params.Image_webp | absURL }}" onerror="this.onerror=null;this.src='{{ .Params.image | absURL }}'">
         </div>
         
         {{ partial "get_tags.html" . }}

layouts/_default/list.html

@@ -10,26 +10,31 @@
         <div class="row">
             <div class="col-12">
                 {{"<!-- Section Title -->" | safeHTML }}
-                <dir class="title text-center wow fadeInDown">
+                <div class="title text-center wow fadeInDown">
                     <h2>{{ with i18n "blogTitle" }} {{ index (split . " ") 0 | safeHTML }} {{ end }}<span class="color">
                         {{ with i18n "blogTitle" }} {{ index (split . " ") 1 | safeHTML }} {{ end }}</span></h2>
-                        <div class="border-Rinkusu"></div>
-                </dir>
+                    <div class="border-Rinkusu"></div>
+                </div>
+                {{"<!-- /Section Title -->" | safeHTML }}
             </div>
+        </div>    
             
-            {{ partial "tagcloud.html" . }}
+        {{ partial "tagcloud.html" . }}
                 
-            {{"<!-- Section Title -->" | safeHTML }}
+        <div class="row blog-post" data-masonry='{ "percentPosition": true }'>
             {{ $paginator := .Paginate .Data.Pages}}
             {{ range $paginator.Pages }}
-            {{ .Render "article" }}
+                {{ .Render "article" }}
             {{ end }}
+        
             <div class="col-12">
                 {{ template "_internal/pagination.html" . }}
             </div>
         </div>
     </div>
+    <script src="/plugins/image-loaded/imagesloaded.pkgd.min.js"></script>
 </section>
 {{"<!-- /Blog Section -->" | safeHTML }}
 
 {{ end }}
+    

layouts/static/portfolio.html

@@ -16,43 +16,52 @@
                 {{"<!-- Title -->" | safeHTML}}
                 <div class="title text-center">
                     <h2>{{ with .title }} {{ index (split . " ") 0 | safeHTML }} {{ end }}<span class="color">
-						{{ with .title }} {{ after (len (index (split . " ") 0)) . | safeHTML }} {{ end }}</span></h2>
+                        {{ with .title }} {{ after (len (index (split . " ") 0)) . | safeHTML }} {{ end }}</span></h2>
                     <div class="border-Rinkusu"></div>
                 </div>
+                <p class="text-center mb-4">
+                    {{ .description }}
+                </p>
                 {{"<!-- /Title -->" | safeHTML}}
             </div>
         </div>
+
+        
         {{ range .portfolio_categories }}
         {{ $text_color := .text_color}}
-        <div class="row portfolio-category">
-            
-            <div class="col-12">
-                {{"<!-- Section Title -->" | safeHTML}}
-                <div class="title text-center">
-                    <h2 class="portfolio-category-title" style="background-color: {{ .bg_color}};">
-                        {{ with .name }} {{ index (split . " ") 0 | safeHTML }} {{ end }}<span style="color: {{ $text_color }};">
-                        {{ with .name }} {{ after (len (index (split . " ") 0)) . | safeHTML }} {{ end }}</span></h2>
-                    <div class="border-Rinkusu"></div>
-                </div>
-                {{"<!-- /Section Title -->" | safeHTML}}
-            </div>
-
-            <div class="masonry-wrapper">
-                <div class="masonry">
-                    {{ $category := .name }}
-                    {{ range .portfolio_items }}
-                        {{- $original := resources.Get .image -}}
-                        {{ $thumb := $original.Fit "512x512" }}
-                        {{ $image := $original.Fit "1080x1080" }}
-                        <a class="masonry-item" href="{{ $image.RelPermalink }}" data-lightbox="{{ $category }}" data-title="{{ .name }}">                            
-                            <img src="{{ $thumb.RelPermalink }}" alt="" class="masonry-content">
-                        </a>
-                    {{ end }}
-                </div>
+        <div class="row">    
+            {{"<!-- Section Title -->" | safeHTML}}
+            <div class="pb-2 title text-center">
+                <h2 class="portfolio-category-title" style="background-color: {{ .bg_color }};">
+                    {{ with .name }} {{ index (split . " ") 0 | safeHTML }} {{ end }}
+                    <span style="color: {{ $text_color }};">
+                    {{ with .name }} {{ after (len (index (split . " ") 0)) . | safeHTML }} {{ end }}
+                    </span>
+                </h2>
+                <div class="border-Rinkusu"></div>
             </div>
+            {{"<!-- /Section Title -->" | safeHTML}}
         </div>
+            
+        <div class="row portfolio-category" data-masonry='{ "percentPosition": true }'>
+            {{ $category := .name }}
+            {{ range .portfolio_items }}
+            {{- $original := resources.Get .image -}}
+            {{ $thumb := $original.Fit "512x512" }}
+            {{ $image := $original.Fit "1080x1080" }}
+            <div class="item col-sm-4 col-lg-3 my-2">
+                <a class="card bg-transparent" href="{{ $image.RelPermalink }}" data-lightbox="{{ $category }}" data-title="{{ .name }}">                            
+                    <img class="card-img" src="{{ $thumb.RelPermalink }}" alt="">
+                </a>
+            </div>
+            {{ end }}
+            </div>
+            
+        
         {{ end }}
     </div>
+        
+    </div>
     <script src="{{ .image_loaded_plugin }}"></script>
 </section>
 {{"<!-- /Portfolio Section -->" | safeHTML}}