{"id":18975,"date":"2012-05-30T05:35:50","date_gmt":"2012-05-30T09:35:50","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=18975"},"modified":"2017-09-15T06:54:21","modified_gmt":"2017-09-15T10:54:21","slug":"wordpress-how-to-change-predefined-image-dimensions","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-how-to-change-predefined-image-dimensions.html","title":{"rendered":"WordPress. How to change predefined image dimensions"},"content":{"rendered":"<p>\r\n<\/p>\r\n<p>This tutorial is  going to show you how to to change the predefined image dimensions on your WordPress template.<\/p>\r\n<p> When you upload a new image using the Featured Image function in any post type, whether it is standard or custom, \u00a0or via the <strong>Dashboard  &gt; Media &gt; Add New<\/strong> 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. <\/p>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/service-center\/\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-3-(835-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>\r\n<p> For instance,your image is called in 1920\u00d71200_front.jpg and when you upload it through WordPress under &ldquo;wp-content\\uploads\\2011\\07 folder you will get: 1920\u00d71200_front.jpg,  1920\u00d71200_front-100\u00d7100.jpg, 1920\u00d71200_front-164\u00d7151.jpg, 1920\u00d71200_front-200\u00d7120.jpg,  1920\u00d71200_front-692\u00d7300.jpg etc.<\/p>\r\n<p> If the default  images used for the posts on your template are landscape-oriented \u00a0and you upload a portrait-oriented image it will  definitely get cropped wrongly.<\/p>\r\n<p>In order to fix this, open the <strong>theme-init.php<\/strong> \u00a0file located in your <strong>&ldquo;themes\\theme_number\\includes\\<\/strong> folder in a php editor  (Dreamweaver) and you will see the\u00a0 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.<\/p>\r\n<p>For  example, the name of your cropped image created on ftp is called Mona_Lisa-560&#215;300  and you want to change its dimensions to 195 X 302 (portrait). Your code runs  as <\/p>\r\n<pre class=\"brush:php\">\r\n  \/\/ This theme uses  post thumbnails\r\n  if (  function_exists( 'add_theme_support' ) ) { \/\/ Added in 2.9\r\n  add_theme_support(  'post-thumbnails' );\r\n  set_post_thumbnail_size(  148, 115, true ); \/\/ Normal post thumbnails\r\n  add_image_size(  'large-thumbnail', 1920, 1280, true ); \/\/ Large Thumbnail\r\n  add_image_size(  'post-thumbnail-xl', 692, 300, true ); \/\/ Portfolio Extra Large Thumbnail\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \r\n  add_image_size(  'portfolio-post-thumbnail-small', 148, 85, true ); \/\/ Portfolio Small Thumbnail\r\n  add_image_size(  'portfolio-post-thumbnail', 220, 150, true ); \/\/ Portfolio Thumbnail\r\n  add_image_size(  'portfolio-post-thumbnail-large', 370, 240, true ); \/\/ Portfolio Large  Thumbnail\r\n  add_image_size(  'portfolio-post-thumbnail-xl', 560, 300, true ); \/\/ Portfolio Extra Large  Thumbnail\r\n  add_image_size(  'small-thumbnail', 90, 55, true ); \/\/ Small Thumbnail\r\n  }<\/pre>\r\n<p>You need to change <\/p>\r\n<pre class=\"brush:php\"> add_image_size(  'portfolio-post-thumbnail-xl', 560, 300, true ); \/\/ Portfolio Extra Large  Thumbnail<\/pre>\r\n<p>to <\/p>\r\n<pre class=\"brush:php\">  add_image_size(  'portfolio-post-thumbnail-xl', 195, 302, true ); \/\/ Portfolio Extra Large  Thumbnail<\/pre>\r\n<p>and<strong> re-upload the image<\/strong> from your WordPress admin panel through the Featured  image option of the post and preview the post from the fron end of your site.<\/p>\r\n<p> If your image is framed, change the height and width if the image frame in css.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p><a href=\"\/help\/files\/wordpress\/wordpress_predefined_post_image_dimensions.htm\" target=\"blank\">WordPress. How to change predefined image dimensions<\/a><\/p>\r\n<\/p>\r\n<\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial is  going to show you how to to change the predefined image dimensions on your Wordpress template.<\/p>\n","protected":false},"author":30,"featured_media":18979,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[1267,537,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/18975"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=18975"}],"version-history":[{"count":2,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/18975\/revisions"}],"predecessor-version":[{"id":83175,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/18975\/revisions\/83175"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/18979"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=18975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=18975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=18975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}