Web & Graphic designer.

Based in Edinburgh, UK. Specializing in custom WordPress site development and graphic design.

If you are a business seeking a web presence or an employer looking to hire, you can get in touch with me here.

GeneratePress theme tutorial: Blog thumbnail image fixed height fix

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.

Blog grid layout thumbnail variable height
Default blog grid layout – Note the thumbnail variable size.

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.

Blog grid layout thumbnail variable height - Mobile View
Default blog grid layout – Mobile View.

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.

Blog grid layout thumbnail equal heights

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.

Blog Grid layout - 2 columns
Blog Grid layout – 2 columns.

Blog Grid layout - 1 column
Blog Grid layout – 1 column

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

WP Show Posts - Latest News - Varied - thumbnail heights

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;
  }
  
}

 

WP Show Posts - Latest News - Fixed thumbnail heights
Thumbnails with fixed heights.

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!

4 thoughts on “GeneratePress theme tutorial: Blog thumbnail image fixed height fix”

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.