fix masonry

htdocs/_templates/_head.php

@@ -9,23 +9,7 @@
     <!-- Bootstrap core CSS -->
     <link href="<?=get_config('base_path')?>assets/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- JS has to be loaded in footer not header as it impacts page load time. -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
-    <script>
-    // Initialize the agent at application startup.
-    const fpPromise = import('https://openfpcdn.io/fingerprintjs/v3')
-        .then(FingerprintJS => FingerprintJS.load())
-
-    // Get the visitor identifier when you need it.
-    fpPromise
-        .then(fp => fp.get())
-        .then(result => {
-        // This is the visitor identifier:
-        const visitorId = result.visitorId
-        console.log(visitorId)
-        $('#fingerprint').val(visitorId);
-        })
-    </script>
+    
     <? if (file_exists($_SERVER['DOCUMENT_ROOT'] .get_config('base_path').'css/' . basename($_SERVER['PHP_SELF'], ".php") . ".css")) { ?>
         <link href="<?=get_config('base_path')?>css/<?= basename($_SERVER['PHP_SELF'], ".php") ?>.css" rel="stylesheet">
     <? } ?>

htdocs/_templates/_master.php

@@ -18,6 +18,35 @@
 	<script
 		src="<?=get_config('base_path')?>assets/dist/js/bootstrap.bundle.min.js">
 	</script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous"></script>
+	<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
+    <script>
+    // Initialize the agent at application startup.
+    const fpPromise = import('https://openfpcdn.io/fingerprintjs/v3')
+        .then(FingerprintJS => FingerprintJS.load())
+
+    // Get the visitor identifier when you need it.
+    fpPromise
+        .then(fp => fp.get())
+        .then(result => {
+        // This is the visitor identifier:
+        const visitorId = result.visitorId
+        console.log(visitorId)
+        $('#fingerprint').val(visitorId);
+        })
+
+	// init Masonry
+	var $grid = $('.row').masonry({
+		// itemSelector: '.col',
+		// columnWidth: '.col',
+		percentPosition: true
+	});
+	// layout Masonry after each image loads
+	$grid.imagesLoaded().progress( function() {
+		$grid.masonry('layout');
+	});
+    </script>
 
 
 </body>

htdocs/_templates/index/photogram.php

 <div class="album py-5 bg-light">
 	<div class="container">
-
-		<div class="row" data-masonry='{"percentPosition": true }'>
+	<!-- data-masonry='{"percentPosition": true }' -->
+		<div class="row" >
 			<?php
                 $posts = Post::getAllPosts();
 				use Carbon\Carbon;