Image progress messy.

asset/style.css

@@ -165,32 +165,63 @@ body {
   content: '';
   clear: both;
 }
+
+/* GRID ITEM */
 .grid-item, .grid-item--width2 { 
 	border-radius: var(--size-item-corner);
   background: var(--color-content-bg-i);
 	margin-bottom: var(--size-gutter);
 	width: var(--size-grid-column);
-	padding: var(--size-gutter); 
 	box-sizing: border-box;
   text-decoration: none; 
 	float: left;
+  clear: both;
 }
 @media screen and (min-width: 886px) {
 	.grid-item--width2 { 
 		width: calc(var(--size-grid-column) * 2 + var(--size-gutter));
 	}
 }
+.grid-item-upper-content {
+  padding: var(--size-gutter) var(--size-gutter) var(--size-gutter) var(--size-gutter);
+  display: inline-block;
+  width: 100%;
+}
+.grid-item-image .grid-item-upper-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+.grid-item-lower-content {
+  padding: 0 var(--size-gutter) 0 var(--size-gutter);
+  height: 100%;
+  display: inline-block;
+}
+.grid-item-lower-content:empty {
+  display: none;
+}
+.grid-item-image .grid-item-lower-content {
+  visibility: hidden;
+}
+.grid-item-image {
+  background: transparent;
+}
 .grid-item img {
+  border-radius: var(--size-item-corner);
   /*margin: calc(var(--size-gutter) * -1);
-  width: calc(100% + var(--size-gutter)*2);*/
+  width: calc(var(--size-gutter) + 100%);*/
-  max-width: 100%; 
+  width: 100%;
-  height: auto;
-  clear: both;
 }
 .grid-item:hover { 
 	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1);
 	background: var(--color-content-bg-e);
 }
+.grid-item-image:hover { 
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1);
+  background: transparent;
+}
 
 /* LINK */
 .grid-item .link {
@@ -209,6 +240,12 @@ body {
   float: left;
   clear: both;
 }
+.grid-item-image .title {
+  display: none;
+}
+.grid-item-image:hover .title {
+  display: initial;
+}
 .grid-item .link .link-line { 
   margin-top: var(--size-item-elem-padding);
   float: left;
@@ -252,7 +289,6 @@ body {
 
 /* LINK, NOTE, QUOTE, TERM, TAGS */
 .note, .quote, .term, .tags, .prog {
-	padding-top: var(--size-item-elem-padding);
   color: var(--color-content-item-i); 
 	font-size: var(--size-font-body);
   float: left;
@@ -266,6 +302,9 @@ body {
 .grid-item:hover .prog {
 	color: var(--color-content-item-e);
 }
+.grid-item-image .grid-item-lower-content {
+  display: none;
+}
 .tags a {
 	color: var(--color-content-item-i); 
 	text-decoration:none; 

logic/viewmasonry.js

@@ -33,19 +33,19 @@ function ViewMasonry()
       });
     console.log(3 + ' ' + this.msnry);
 
-      // var imgLoad = imagesLoaded('.grid');
+    var imgLoad = imagesLoaded('.grid');
-      // function onAlways( instance ) {
+    function onAlways( instance ) {
-      //   console.log('all images are loaded');
+      console.log('all images are loaded');
-      //   parent.msnry.reloadItems();
+      parent.msnry.reloadItems();
-      //   parent.msnry.layout();
+      parent.msnry.layout();
-      // }
+    }
-      // imgLoad.on( 'always', onAlways );
+    imgLoad.on( 'always', onAlways );
-      // // imgLoad.off( 'always', onAlways );
+    // imgLoad.off( 'always', onAlways );
-      // imgLoad.on( 'progress', function(instance, image)
+    imgLoad.on( 'progress', function(instance, image)
-      // {
+    {
-      //   var result = image.isLoaded ? 'loaded' : 'broken';
+      var result = image.isLoaded ? 'loaded' : 'broken';
-      //   console.log( 'image is ' + result + ' for ' + image.img.src );
+      console.log( 'image is ' + result + ' for ' + image.img.src );
-      // });
+    });
     }
   }
 
@@ -85,6 +85,11 @@ function ViewMasonry()
       }
     }
 
+    if (typeof value.TYPE !== 'undefined' && value.TYPE == 'image')
+    {
+      itemClass += " grid-item-image";
+    }
+
     let entry = ``;
     // DIV
     entry += `<div class="${itemClass}" id="${this.divNamePre + value.DIID}">`;
@@ -104,6 +109,9 @@ function ViewMasonry()
       entry += `<a href="${String(value.LINK)}" id="${idUrl}" class="link">`;
     }
 
+    // UPPER CONTENT START
+    entry += `<div class="grid-item-upper-content">`;
+
     // TITLE
     entry += `<div class="title">${key.to_properCase()}</div>`;
 
@@ -168,6 +176,17 @@ function ViewMasonry()
       entry += `</a>`;
     }
 
+    // UPPER CONTENT END
+    entry += `</div>`;
+
+
+
+
+
+
+    // LOWER CONTENT START
+    entry += `<div class="grid-item-lower-content">`;
+
     // TAGS
     if (typeof value.TAGS !== 'undefined')
     {
@@ -210,6 +229,12 @@ function ViewMasonry()
       entry += `<div class="prog"><i class="fas fa-clock textIcon"></i>${value.PROG}</div>`;
     }
 
+    // LOWER CONTENT END
+    entry += `</div>`;
+
+
+
+    // IMAGE
     if (typeof value.TYPE !== 'undefined' && value.TYPE == 'image')
     {
       if (typeof value.FILE !== 'undefined')