WordPress. How to change predefined image dimensions

This tutorial is going to show you how to to change the predefined image dimensions on your WordPress template.

When you upload a new image using the Featured Image function in any post type, whether it is standard or custom,  or via the Dashboard > Media > Add New panel, WordPress automatically creates several versions of the same image on your FTP with dimensions both specified in the Media Settings and in the source code of your current theme.

For instance,your image is called in 1920×1200_front.jpg and when you upload it through WordPress under “wp-content\uploads\2011\07 folder you will get: 1920×1200_front.jpg, 1920×1200_front-100×100.jpg, 1920×1200_front-164×151.jpg, 1920×1200_front-200×120.jpg, 1920×1200_front-692×300.jpg etc.

If the default images used for the posts on your template are landscape-oriented  and you upload a portrait-oriented image it will definitely get cropped wrongly.

In order to fix this, open the theme-init.php  file located in your “themes\theme_number\includes\ folder in a php editor (Dreamweaver) and you will see the  dimensions that you need to change. The comments added to the code are going to help you identify what image dimensions exactly you need to edit.

For example, the name of your cropped image created on ftp is called Mona_Lisa-560×300 and you want to change its dimensions to 195 X 302 (portrait). Your code runs as

  // This theme uses  post thumbnails
  if (  function_exists( 'add_theme_support' ) ) { // Added in 2.9
  add_theme_support(  'post-thumbnails' );
  set_post_thumbnail_size(  148, 115, true ); // Normal post thumbnails
  add_image_size(  'large-thumbnail', 1920, 1280, true ); // Large Thumbnail
  add_image_size(  'post-thumbnail-xl', 692, 300, true ); // Portfolio Extra Large Thumbnail           
  add_image_size(  'portfolio-post-thumbnail-small', 148, 85, true ); // Portfolio Small Thumbnail
  add_image_size(  'portfolio-post-thumbnail', 220, 150, true ); // Portfolio Thumbnail
  add_image_size(  'portfolio-post-thumbnail-large', 370, 240, true ); // Portfolio Large  Thumbnail
  add_image_size(  'portfolio-post-thumbnail-xl', 560, 300, true ); // Portfolio Extra Large  Thumbnail
  add_image_size(  'small-thumbnail', 90, 55, true ); // Small Thumbnail
  }

You need to change

 add_image_size(  'portfolio-post-thumbnail-xl', 560, 300, true ); // Portfolio Extra Large  Thumbnail

to

  add_image_size(  'portfolio-post-thumbnail-xl', 195, 302, true ); // Portfolio Extra Large  Thumbnail

and re-upload the image from your WordPress admin panel through the Featured image option of the post and preview the post from the fron end of your site.

If your image is framed, change the height and width if the image frame in css.

Feel free to check the detailed video tutorial below:

WordPress. How to change predefined image dimensions