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; display: block;
text-decoration: none !important; text-decoration: none !important;
.thumbnail-container { .grid-item-thumbnail {
margin: 0; width: 255px;
padding: 0;
background-color: #f6f6f6;
height: 255px; height: 255px;
} background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0;
display: block;
position: relative;
img { .skeleton {
max-width: 255px; width: 255px;
max-height: 255px; height: 255px;
width: auto; position: absolute;
height: auto; z-index: -1;
border-radius: 0px; background-color: #e0e0e0;
bottom: 0;
}
img {
width: 255px;
height: 255px;
height: auto;
border-radius: 0px;
margin-bottom: -5px;
visibility: hidden;
}
} }
&:hover { &:hover {

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

@ -9,11 +9,19 @@
<?php the_title(); ?> <?php the_title(); ?>
</p> </p>
<?php if ( has_post_thumbnail() ) : ?> <?php if ( has_post_thumbnail() ) : ?>
<div class="thumbnail-container"> <div
<?php the_post_thumbnail( 'tainacan-medium' ); ?> 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> </div>
<?php else : ?> <?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; ?> <?php endif; ?>
</a> </a>