{"id":1031,"date":"2018-09-10T18:21:01","date_gmt":"2018-09-10T17:21:01","guid":{"rendered":"https:\/\/www.gmitropapas.com\/?p=1031"},"modified":"2020-06-13T18:08:53","modified_gmt":"2020-06-13T17:08:53","slug":"generatepress-theme-tutorial-blog-thumbnail-image-fixed-height-fix","status":"publish","type":"post","link":"https:\/\/www.gmitropapas.com\/generatepress-theme-tutorial-blog-thumbnail-image-fixed-height-fix\/","title":{"rendered":"GeneratePress theme tutorial: Blog thumbnail image fixed height fix"},"content":{"rendered":"\n

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<\/a> 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<\/a> 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<\/a>.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"Blog
Default blog grid layout – Not all images have the same height<\/figcaption><\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

\"Blog
Default blog grid layout – Mobile View<\/figcaption><\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

@media( min-width: 769px ) {\n  \n  .inside-article .post-image a img {\n    height: 174px;\n    object-fit: cover;\n    object-position: center;\n  }\n  \n}<\/pre>\n\n\n\n
In the above code, I set the thumbnail archive feature image to a set height of 174px. I also set the object-fit<\/code> CSS property cover<\/code> and the object-position<\/code> property to center<\/code>. That way the thumbnail dimensions would not stretch out of proportions but instead zoom into the image slightly to keep their aspect ratio intact.<\/p>\n\n\n\n
\"Blog<\/figure>\n\n\n\n
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.<\/p>\n\n\n\n
\n
\n
\"Blog
Blog Grid layout – 2 columns<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"Blog
Blog Grid layout – 1 column<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
The same issue was also present on the WP Show Posts shortcode on the homepage:<\/p>\n\n\n\n
\"WP
Thumbnails with unequal heights<\/figcaption><\/figure>\n\n\n\n
Adding some CSS to the existing code fixed the variable thumbnail image height issue:<\/p>\n\n\n\n
@media( min-width: 769px ) {\n  \n  .inside-article .post-image a img {\n    height: 174px;\n    object-fit: cover;\n    object-position: center;\n  }\n  \n  section.wp-show-posts article .wp-show-posts-image a img {\n    height: 232px !important;\n    object-fit: cover !important;\n    object-position: center !important;\n  }\n  \n}<\/pre>\n\n\n\n
\"WP
Thumbnails with fixed heights<\/figcaption><\/figure>\n\n\n\n
I provide advanced customization work for GeneratePress<\/a>, so please get in touch<\/a> if you need any work done.<\/p>\n\n\n\n
Hope you find that useful. Till next time, then!<\/p>\n\n\n\n
UPDATE<\/h2>\n\n\n\n
GP Premium 1.10.0 update brought a new Featured Image Resizer<\/a> 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<\/strong> and scroll down to the Feature Images<\/strong> section. Set Width<\/strong> to 100% and adjust Height<\/strong> accordingly.<\/p>\n\n\n\n
\"GP
GP Premium 1.10.0 update – Featured image resizer<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
Learn how to force equal thumbnail image heights on a grid layout blog archive in GeneratePress and also keep them responsive. <\/p>\n
Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":1056,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"GeneratePress - WordPress theme tutorial: Blog thumbnail image fixed height fix","_seopress_titles_desc":"Learn how to set fixed blog archive thumbnail images for your GeneratePress blog layout that are also responsive friendly.","_seopress_robots_index":"","footnotes":"","_vp_format_video_url":"","_vp_image_focal_point":[]},"categories":[1],"tags":[28,26,24],"acf":[],"_links":{"self":[{"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/posts\/1031"}],"collection":[{"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/comments?post=1031"}],"version-history":[{"count":0,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/posts\/1031\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/media\/1056"}],"wp:attachment":[{"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/media?parent=1031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/categories?post=1031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/tags?post=1031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}