GeneratePress theme tutorial: Blog thumbnail image fixed height fix

Today I would like to address an issue that seemed quite tricky in the beginning but I was able to find a solution though some thorough googling! GeneratePress Premium has a nice blog layout addon that allows blog archives to be displayed as a grid. On top of that Tom Osborne the creator of GeneratePress has created a WordPress plugin called WP Show Posts which allows you to display posts anywhere on your website using an easy to use shortcode. I have recently used both of those mentioned functionalities on my latest creation, a support community forum and resource repository for the WordPress Brizy page builder. You can view the community page at https://brizycommunity.com.

While building the website I run into an issue regarding the height of the blog thumbnail images on the blog archive. Depended on the size of the feature image uploaded for every single post, some thumbnails would appear with varied heights making the blog layout appearing a bit off.

I could set a fixed width and height by going to Layout->Blog and set width and height pixel values for the Archive featured image dimensions but then I would lose all responsive design functionality for various desktop and mobile device screen sizes since due to the fixed size nature of the thumbnails.

A better way I found out was to actually utilize some sweet CSS. I wanted that CSS to be applied only at a minimum size of 769px, my mobile breakpoint.

@media( min-width: 769px ) {
  
  .inside-article .post-image a img {
    height: 174px;
    object-fit: cover;
    object-position: center;
  }
  
}

In the above code, I set the thumbnail archive feature image to a set height of 174px. I also set the object-fit CSS property cover and the object-position property to center. That way the thumbnail dimensions would not stretch out of proportions but instead zoom into the image slightly to keep their aspect ratio intact.

Also that way, I would still retain equal heights on a 2 column layout but switch to the default behaviour on a one column layout.

The same issue was also present on the WP Show Posts shortcode on the homepage:

Adding some CSS to the existing code fixed the variable thumbnail image height issue:

@media( min-width: 769px ) {
  
  .inside-article .post-image a img {
    height: 174px;
    object-fit: cover;
    object-position: center;
  }
  
  section.wp-show-posts article .wp-show-posts-image a img {
    height: 232px !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
}

I provide advanced customization work for GeneratePress, so please get in touch if you need any work done.

Hope you find that useful. Till next time, then!

UPDATE

GP Premium 1.10.0 update brought a new Featured Image Resizer feature and it works quite well. To adjust settings according to our previous examples, we would first remove the CSS provided in the article, then head over to Appearance -> Customize -> Blog and scroll down to the Feature Images section. Set Width to 100% and adjust Height accordingly.