From 794cbd5c4eeb0bcac5ac9aa6564130f3d67bb7a0 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Mon, 2 Jan 2017 04:04:25 +0000
Subject: [PATCH] project widget: Wait for images to load to prevent
 overlapping (#76)

---
 layouts/partials/footer.html |  1 +
 static/js/hugo-academic.js   | 25 +++++++++++++------------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 5f35f627..ad4cd4de 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -3,6 +3,7 @@
     <script src="{{ "/js/jquery-1.12.3.min.js" | relURL }}"></script>
     <script src="{{ "/js/bootstrap.min.js" | relURL }}"></script>
     <script src="{{ "/js/isotope.pkgd.min.js" | relURL }}"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
     <script src="{{ "/js/hugo-academic.js" | relURL }}"></script>
     {{ range .Site.Params.custom_js }}
     <script src="{{ "/js/" | relURL }}{{ . }}"></script>
diff --git a/static/js/hugo-academic.js b/static/js/hugo-academic.js
index e2988c22..5881870d 100644
--- a/static/js/hugo-academic.js
+++ b/static/js/hugo-academic.js
@@ -94,19 +94,20 @@
    * --------------------------------------------------------------------------- */
 
   var $container = $('#container-projects');
+  $container.imagesLoaded(function () {
+    // Initialize Isotope after all images have loaded.
+    $container.isotope({
+      itemSelector: '.isotope-item',
+      layoutMode: 'masonry'
+    });
 
-  // Initialize Isotope.
-  $container.isotope({
-    itemSelector: '.isotope-item',
-    layoutMode: 'masonry'
-  });
-
-  // Filter items when filter link is clicked.
-  $('#filters a').click(function () {
-    var selector = $(this).attr('data-filter');
-    $container.isotope({filter: selector});
-    $(this).removeClass('active').addClass('active').siblings().removeClass('active all');
-    return false;
+    // Filter items when filter link is clicked.
+    $('#filters a').click(function () {
+     var selector = $(this).attr('data-filter');
+     $container.isotope({filter: selector});
+     $(this).removeClass('active').addClass('active').siblings().removeClass('active all');
+     return false;
+     });
   });
 
   /* ---------------------------------------------------------------------------