How-to: Change Blog Post Featured Image to Smaller Size

Posted in: ,

In Karma v4.0 or higher:

Access index.php and single.php found in /wp-content/themes/Karma/ or via the Dashboard in Appearance > Editor (code in line 100 and 83)

In Karma v2.6.4 or higher:

Access theme-template-part-content-blog.php and theme-template-part-content-blog-single.php found in /wp-content/themes/Karma/ or via the Dashboard in Appearance > Editor (code in line 30)

In Karma v2.6 or higher:

Access content-blog.php and content-blog-single.php found in /wp-content/themes/Karma/ or via the Dashboard in Appearance > Editor (code in line 32)
And archive.php found in /wp-content/themes/Karma/ or via the Dashboard in Appearance > Editor (code in line 56)

In Karma v2.5 or lower:

Access content-blog.php and content-blog-single.php found in /wp-content/themes/Karma/functions/content/ (code in line 25)
And archive.php found in /wp-content/themes/Karma/ (code in line 56)

Open the files and look for these lines of code found in the lines shown above:

//prepare to get image
$thumb = get_post_thumbnail_id();
$image_width = 538;
$image_height = 218;

Make the necessary adjustments to the width and height, like so:

//prepare to get image
$thumb = get_post_thumbnail_id(); 
$image_width = 275; 
$image_height = 145;

Then we will need to override the Post Image Frame default styling.
To do this, add the following code to the Custom CSS area in Site Options > Styling Options:

Modern Frame:

.content_blog .modern_img_frame {background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/image-frame-sprite-2.png) !important;background-position:-1px -279px !important;height:179px !important; width:293px !important;} 
.content_blog .modern_img_frame img {height:145px !important;}
.content_blog .modern_img_frame .img-preload {height:145px !important;width:275px !important;}

Shadow Frame:

.content_blog .shadow_img_frame.tt-blog-featured {background:url(http://ocalhost:8888/wp-content/themes/Karma/images/_global/image-frame-sprite.png) no-repeat -628px -273px;  width:287px; height:180px;}
.content_blog  .img-preload {height:145px !important;width:275px !important;}
.content_blog .shadow_img_frame.tt-blog-featured img {width:275px;height:145px !important;}

Please Note: In the above code you must replace http://localhost:8888 with your own website URL.

If you prefer to have the text wrap around the Post Image, then add the following code as well:

.content_blog p {padding-right:102px;}
.content_blog .tt-blog-featured {float:left !important;margin-right:16px !important;}

OPTIONAL: Only apply this change to the Main Blog and Archive pages (content-blog.php and archive.php), and not to the Single Post Page (content-blog-single.php). This will allow for the smaller size Featured Image to only display in the Main Blog pages, then the Single Post page will display the full size Featured Image.

Please see screenshot for end result:

(click screenshot for full-size view)