From 43cfc6a2baea6906d753880701be919dfaef055a Mon Sep 17 00:00:00 2001
From: delucis <swithinbank@gmail.com>
Date: Mon, 25 Feb 2019 17:48:00 -0500
Subject: [PATCH] feat: Lazy load member list images

Closes #30
---
 components/member_list.php      | 2 +-
 components/member_list_item.php | 2 +-
 scss/_vars.scss                 | 3 ++-
 scss/style.scss                 | 2 ++
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/member_list.php b/components/member_list.php
index 9a2496b..44bb671 100644
--- a/components/member_list.php
+++ b/components/member_list.php
@@ -13,7 +13,7 @@ function member_list(array $opts)
 
         $html = '<section class="' . $classes . '">' .
                   '<h2>' . $heading . '</h2>' .
-                  '<ul class="clearfix">';
+                  '<ul>';
 
         foreach ($members as $post) {
             $html .= component('member_list_item', array(
diff --git a/components/member_list_item.php b/components/member_list_item.php
index de8d6c9..05ac52b 100644
--- a/components/member_list_item.php
+++ b/components/member_list_item.php
@@ -24,7 +24,7 @@ function member_list_item($opts)
             if (!$alt_text) {
                 $alt_text = $member_name;
             }
-            $html .= '<img src="' . $imgsrc[0] . '" alt="' . $alt_text . '">';
+            $html .= '<img data-src="' . $imgsrc[0] . '" alt="' . $alt_text . '" class="lozad">';
         }
         $html .= "<span>$member_name</span></a></li>";
         return $html;
diff --git a/scss/_vars.scss b/scss/_vars.scss
index 3fc690c..ec18b85 100644
--- a/scss/_vars.scss
+++ b/scss/_vars.scss
@@ -65,10 +65,11 @@ $queries: (
 
 // Composer List Grid Mixin
 @mixin composers-grid($cols, $gutter: .75em) {
-  float: left;
+  display: inline-block;
   margin-right: $gutter;
   margin-bottom: $gutter - .375em;
   width: calc((100% - #{($cols - 1) * $gutter}) / #{$cols});
+  vertical-align: top;
 
   &:nth-child(#{$cols}n) {
     margin-right: 0;
diff --git a/scss/style.scss b/scss/style.scss
index 206ca88..7f90d17 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -761,8 +761,10 @@ iframe {
       img {
         float: left;
         transition: filter .4s ease-out;
+        background: $black;
         width: 35%;
         max-width: 5em;
+        height: 100%;
         filter: grayscale(1) contrast(125%) brightness(125%) saturate(100%);
 
         @include mq (m) {