Fixed Related Project & Posts Image size

Author: giucu91

inc/class-shapely-related-posts.php

@@ -226,9 +226,9 @@ function output_related_posts() {
 
 				echo '<div class="item">';
 				if ( has_post_thumbnail( $related_posts->post->ID ) ) {
-					echo '<a href="' . esc_url( get_the_permalink() ) . '">' . get_the_post_thumbnail( $related_posts->post->ID, 'shapely-grid' ) . '</a>';
+					echo '<a href="' . esc_url( get_the_permalink() ) . '" class="related-item-thumbnail" style="background-image: url( ' . get_the_post_thumbnail_url( $related_posts->post->ID, 'shapely-grid' ) . ' )">' . get_the_post_thumbnail( $related_posts->post->ID, 'shapely-grid' ) . '</a>';
 				} else {
-					echo '<a href="' . esc_url( get_the_permalink() ) . '"><img class="wp-post-image" alt="" src="' . get_template_directory_uri() . '/assets/images/placeholder.jpg" /></a>';
+					echo '<a href="' . esc_url( get_the_permalink() ) . '" class="related-item-thumbnail" style="background-image: url( ' . get_template_directory_uri() . '/assets/images/placeholder.jpg )"><img class="wp-post-image" alt="" src="' . get_template_directory_uri() . '/assets/images/placeholder.jpg" /></a>';
 				}
 
 				if ( $show_title ) {

style.css

@@ -4155,6 +4155,17 @@ footer.bg-dark a {
   margin-right: 20px;
   color: #001c28; }
 
+.shapely-related-posts .owl-carousel .owl-item .related-item-thumbnail img {
+    display: none;
+}
+.shapely-related-posts .related-item-thumbnail {
+    display: block;
+    padding-bottom: 85%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+}
+
 .pt0 {
   padding-top: 30px; }