tmdinosaurcenter
/
tainacan-theme
mirror of https://github.com/tainacan/tainacan-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adjustments on grid view mode to force cropped version of image.

This commit is contained in:
mateuswetah 2018-12-10 18:29:46 -02:00
parent 064bc3c590
commit a5229b0489
2 changed files with 36 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/assets/scss/_view-mode-grid.scss
View File

@ -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 {

14
src/tainacan/view-mode-grid.php
View File

@ -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>