From a5229b048941044a29ae3bbbb0f072c3c53f6266 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Mon, 10 Dec 2018 18:29:46 -0200
Subject: [PATCH] Adjustments on grid view mode to force cropped version of
 image.

---
 src/assets/scss/_view-mode-grid.scss | 36 +++++++++++++++++++---------
 src/tainacan/view-mode-grid.php      | 14 ++++++++---
 2 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/src/assets/scss/_view-mode-grid.scss b/src/assets/scss/_view-mode-grid.scss
index c6721cd..0bfb5d3 100644
--- a/src/assets/scss/_view-mode-grid.scss
+++ b/src/assets/scss/_view-mode-grid.scss
@@ -21,19 +21,33 @@
         display: block;
         text-decoration: none !important;
 
-        .thumbnail-container {
-            margin: 0;
-            padding: 0;
-            background-color: #f6f6f6;
+        .grid-item-thumbnail {
+            width: 255px;
             height: 255px;
-        }
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            margin: 0;
+            display: block;
+            position: relative;
 
-        img {
-            max-width: 255px;
-            max-height: 255px;
-            width: auto;
-            height: auto;
-            border-radius: 0px;
+            .skeleton {
+                width: 255px;
+                height: 255px;
+                position: absolute;
+                z-index: -1;
+                background-color: #e0e0e0;
+                bottom: 0;
+            }
+            
+            img {
+                width: 255px;
+                height: 255px;
+                height: auto;
+                border-radius: 0px;
+                margin-bottom: -5px;
+                visibility: hidden;
+            }
         }
 
         &:hover {
diff --git a/src/tainacan/view-mode-grid.php b/src/tainacan/view-mode-grid.php
index bd051d7..1b8e5fb 100644
--- a/src/tainacan/view-mode-grid.php
+++ b/src/tainacan/view-mode-grid.php
@@ -9,11 +9,19 @@
 					<?php the_title(); ?>           
 				</p>
 				<?php if ( has_post_thumbnail() ) : ?>
-					<div class="thumbnail-container">
-						<?php the_post_thumbnail( 'tainacan-medium' ); ?> 
+					<div 
+							style="background-image: url(<?php the_post_thumbnail_url( 'tainacan-medium' ) ?>)"
+							class="grid-item-thumbnail">
+						<?php the_post_thumbnail( 'tainacan-medium' ); ?>
+						<div class="skeleton"></div> 
 					</div>
 				<?php else : ?>
-					<?php echo '<img alt="Thumbnail placeholder" src="' . get_template_directory_uri() . '/assets/images/thumbnail_placeholder.png">'?>
+					<div 
+							style="background-image: url(<?php echo get_template_directory_uri() . '/assets/images/thumbnail_placeholder.png'?>)"
+							class="grid-item-thumbnail">
+						<?php echo '<img alt="Thumbnail placeholder" src="' . get_template_directory_uri() . '/assets/images/thumbnail_placeholder.png">'?>
+						<div class="skeleton"></div> 
+					</div>
 				<?php endif; ?>  
 			</a>