{"id":139677,"date":"2016-02-25T11:00:06","date_gmt":"2016-02-25T17:00:06","guid":{"rendered":"https:\/\/getflywheel.com\/?p=15773"},"modified":"2023-04-06T10:08:37","modified_gmt":"2023-04-06T15:08:37","slug":"how-to-create-additional-image-sizes-in-wordpress","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-create-additional-image-sizes-in-wordpress\/","title":{"rendered":"How to Create Additional Image Sizes in WordPress"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">No need to download a plugin to add image sizes to WordPress: there\u2019s a function for that. Whether you need to add different sizes for your portfolio images or simply to have more choices when it comes to your post thumbnails, it\u2019s not that hard to add sizes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress already comes with four image sizes: <code>thumbnail<\/code> (150px by 150px), <code>medium<\/code> (300px by 300px), <code>large<\/code> (640px by 640px), and <code>full-size<\/code> (original image resolution). Depending on your theme, you might have a few extra ones already.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Images Work in WordPress<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Whenever you upload a new image to WordPress, it generates resized versions that you can use on your website. That way, you never have to worry about resizing all your images yourself and uploading those versions. WordPress takes care of that for you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s a powerful feature that you should learn to use, as it can save you quite a bit of time when optimizing images for the web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add Image Sizes to WordPress<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To add new image sizes, you\u2019ll need access to your <code>functions.php<\/code> file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before you add sizes, you\u2019ll want to make sure they are supported by copying this line of code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_theme_support( 'post-thumbnails' );<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now you are ready to use the <code>add_size_image()<\/code> function. You\u2019ll need a to use these arguments to make it work properly:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>Name<\/code>: A string that identifies your image size (required)<\/li>\n\n\n\n<li><code>Width<\/code>: The image sizes in pixels (optional)<\/li>\n\n\n\n<li><code>Height<\/code>: The image sizes in pixels (optional)<\/li>\n\n\n\n<li><code>Crop<\/code>: Define the type of crop or its positioning(optional)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Here are a few examples:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_size_image ( \u2018featured-large\u2019, 1200, 600 ); \/\/ Soft Crop add_size_image (\u2018featured-medium\u2019, 600, 400, true); \/\/ Hard Crop add_size_image (\u2018featured-small\u2019, 300, 200, array( 'left', 'top' ) ); \/\/ Hard Crop Left Top<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Understanding the Cropping Options<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">As you\u2019ve seen already, there are two image cropping options: soft crop and hard crop. Because they each have their pros and cons, let\u2019s look at them individually.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Soft Crop\/Resizing<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The option used by default, soft crop is more of a resizing property than a cropping one. It keeps the proportions of the image, but makes it fit the dimensions you asked for. It has the value of <code>false<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Soft crop works with one or two specified dimensions. If you only specify the width, the image will be as long as it needs to be to keep the proportions. This works great if you have a portfolio and want to keep the width of the images the same, but have the different heights still show.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In case you specify two dimensions, the image will be resized to the first one it hits. Let\u2019s say you are using the <code>featured-large<\/code> image size above and you upload a picture that is 2000px by 800px. The cropped version would be 1200px by 480px.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If it was the other way around, though, and you had a tall image of 800px by 2000px, the new version would be of 240px by 600px. What you need to remember is that the resized image can\u2019t be bigger than the dimensions specified. So the first one it hits, that\u2019s when the resizing stops.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hard Crop<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hard cropping will do what soft cropping didn\u2019t: it will cut the image to fit the specified dimensions. The means that the ratio of the new image will be different, and not all of the content will be shown.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You use it by specifying <code>true<\/code> as the last argument.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The default cropping position is centered, but if you prefer to position the cropping either at the top or one of the corners of your image, you could also specify that. You\u2019ll have to use <code>array ( \u2018horizontal-position\u2019, \u2018vertical-position\u2019 )<\/code>. You can use the values <code>left<\/code>, <code>center<\/code>, and <code>right<\/code> for the horizontal positioning and <code>top<\/code>, <code>center<\/code>, and <code>bottom<\/code> for the vertical position.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Displaying the new image sizes<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now that you\u2019ve got your new sizes, it\u2019s time to add them either to your posts as a featured image or to your portfolio. First, you\u2019ll need to find the appropriate PHP file to post your code in, like <code>single.php<\/code> or <code>single-portfolio.php<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you are within the Loop, you will need to use this function:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>the_post_thumbnail( 'your-custom-size' );<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure you change <code>your-custom-size<\/code> with the name of your new size!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to display one picture in particular, using one of your new sizes, use the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>echo wp_get_attachment_image( 42, 'your-custom-size' ); <\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You will need to specify your Image ID in that case. To find that, go to your Admin Dashboard &gt; Media. Click on the image you want to find the ID of. It will either take you to another page or open a popup. Check the URL. You should see something like this:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">http:\/\/yourwebsiteURL.com\/wp-admin\/upload.php?item=300 or<br>http:\/\/yourwebsiteURL.com\/wp-admin\/post.php?post=300&amp;action=edit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">300 is your image ID!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Regenerate Thumbnails<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The final step, after you added all the sizes you needed, it to use the <a href=\"https:\/\/wordpress.org\/plugins\/regenerate-thumbnails\/\" target=\"_blank\" rel=\"noopener noreferrer\">Regenerate Thumbnails plugin<\/a> to make sure all your old images have the new versions. This is a powerful tool that will create all the missing versions of your images, so you don\u2019t have to worry about it!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You\u2019re done! You now have awesome new image sizes to use on your WordPress website that fit <i>your<\/i> needs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>No need to download a plugin to add image sizes to WordPress: there\u2019s a function for that. Whether you need to add different sizes for your portfolio images or simply to have more choices when it comes to your post thumbnails, it\u2019s not that hard to add sizes. WordPress already comes with four image sizes:<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":142288,"template":"","resource-topic":[1396],"resource-role":[1397,896,897],"resource-type":[916],"class_list":["post-139677","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create Additional Image Sizes in WordPress<\/title>\n<meta name=\"description\" content=\"Adding image sizes to WordPress is an easy task. All it takes is a simple function! Follow along with this guide to learn how.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Additional Image Sizes in WordPress\" \/>\n<meta property=\"og:description\" content=\"Adding image sizes to WordPress is an easy task. All it takes is a simple function! Follow along with this guide to learn how.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-create-additional-image-sizes-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-06T15:08:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/02\/resize-image-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Create Additional Image Sizes in WordPress\" \/>\n<meta name=\"twitter:description\" content=\"Adding image sizes to WordPress is an easy task. All it takes is a simple function! Follow along with this guide to learn how.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/02\/resize-image-header.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-create-additional-image-sizes-in-wordpress\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-create-additional-image-sizes-in-wordpress\/\",\"name\":\"How to Create Additional Image Sizes in WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2016-02-25T17:00:06+00:00\",\"dateModified\":\"2023-04-06T15:08:37+00:00\",\"description\":\"Adding image sizes to WordPress is an easy task. All it takes is a simple function! Follow along with this guide to learn how.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-create-additional-image-sizes-in-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-create-additional-image-sizes-in-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-create-additional-image-sizes-in-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create Additional Image Sizes in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Additional Image Sizes in WordPress","description":"Adding image sizes to WordPress is an easy task. All it takes is a simple function! Follow along with this guide to learn how.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Create Additional Image Sizes in WordPress","og_description":"Adding image sizes to WordPress is an easy task. All it takes is a simple function! Follow along with this guide to learn how.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-create-additional-image-sizes-in-wordpress\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-04-06T15:08:37+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/02\/resize-image-header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"How to Create Additional Image Sizes in WordPress","twitter_description":"Adding image sizes to WordPress is an easy task. All it takes is a simple function! Follow along with this guide to learn how.","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/02\/resize-image-header.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-create-additional-image-sizes-in-wordpress\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-create-additional-image-sizes-in-wordpress\/","name":"How to Create Additional Image Sizes in WordPress","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2016-02-25T17:00:06+00:00","dateModified":"2023-04-06T15:08:37+00:00","description":"Adding image sizes to WordPress is an easy task. All it takes is a simple function! Follow along with this guide to learn how.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-create-additional-image-sizes-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/how-to-create-additional-image-sizes-in-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-create-additional-image-sizes-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Create Additional Image Sizes in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/02\/resize-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer, Developer, Freelancer","topic":"<strong>Topics:<\/strong> Design","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139677","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/142288"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139677"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139677"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139677"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}