{"id":130,"date":"2010-11-16T03:15:53","date_gmt":"2010-11-15T22:15:53","guid":{"rendered":"http:\/\/www.zubair.info\/blog\/?p=130"},"modified":"2010-11-26T23:11:30","modified_gmt":"2010-11-26T18:11:30","slug":"wordpress-post-thumbnail-and-image-functions","status":"publish","type":"post","link":"https:\/\/www.zubair.info\/blog\/2010\/11\/16\/wordpress-post-thumbnail-and-image-functions.html","title":{"rendered":"WordPress Post Thumbnail and Image Functions"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.zubair.info\/blog\/wp-content\/uploads\/2010\/11\/post-wordpress-post-thumbnail-and-image-functions.gif\" alt=\"Wordpress Post Thumbnail and Image Functions\" title=\"Wordpress Post Thumbnail and Image Functions\" width=\"500\" height=\"190\" class=\"alignnone size-full wp-image-159\" srcset=\"https:\/\/www.zubair.info\/blog\/wp-content\/uploads\/2010\/11\/post-wordpress-post-thumbnail-and-image-functions.gif 500w, https:\/\/www.zubair.info\/blog\/wp-content\/uploads\/2010\/11\/post-wordpress-post-thumbnail-and-image-functions-300x114.gif 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<h3>Working with <code>set_post_thumbnail_size<\/code> and <code>add_image_size<\/code><\/h3>\n<p>Today, I would like to post about these two handy functions introduced in <em>WordPress v2.9<\/em>, these two functions are used to integrate and work with the wordpress post thumbnails features, which was also introduced in <em>wordpress v2.9<\/em>.<\/p>\n<p>I have been seeing people say that these functions are not working in their theme as they should. But i would like to point out some things that might help you with that and at the same time help you understand what the difference in these two functions are.<br \/>\n<!--more--><\/p>\n<div id=\"z-content-nav\">\n<h3 class=\"z-content-nav-title\">Content Navigation<\/h3>\n<ol class=\"z-content-nav-list\">\n<li><a href=\"#z-not-working\"><code>set_post_thumbnail_size<\/code> and <code>add_image_size<\/code> not working<\/a><\/li>\n<li><a href=\"#z-the-difference\">The Difference &#8211; <code>set_post_thumbnail_size<\/code> vs <code>add_image_size<\/code><\/a><\/li>\n<li><a href=\"#z-howto\">How do i implement and use this in my own wordpress theme?<\/a><\/li>\n<li><a href=\"#z-useful-resources\">Useful Resources<\/a><\/li>\n<\/ol>\n<\/div>\n<h3 id=\"z-not-working\">\n<code>set_post_thumbnail_size<\/code> and <code>add_image_size<\/code> are not cropping or resizing your images? <a class=\"top-link\" href=\"#z-content-nav\">TOP  &uarr;<\/a><br \/>\n<\/h3>\n<p><strong>The Solution:<\/strong><br \/>\nFirst, you need to make sure you have the <a href=\"http:\/\/www.php.net\/manual\/en\/image.installation.php\" title=\"Learn more about GD and how to set it up on your system\" target=\"_blank\">GD Library<\/a> installed and enabled in PHP for this to work. I am pretty sure it comes bundled with the default php zip archive that you download from <a href=\"http:\/\/www.php.net\" title=\"PHP Home\" target=\"_blank\">PHP.net<\/a>, so all you might have to do is enable it in your <em>php.ini configuration file<\/em>.<\/p>\n<p>When you&#8217;re done and absolutely sure that <strong>GD<\/strong> is running fine, we move on.<\/p>\n<p class=\"note-class\">\n<b>Note:-<\/b><br \/>\nWordpress doesn&#8217;t <em>CROP<\/em> or <em>RESIZE<\/em> images that have already been uploaded. So if you are trying to crop or resize an image that has been uploaded before you implemented the <code>set_post_thumbnail_size()<\/code> or <code>add_image_size()<\/code> functions then you&#8217;re not going to get that, instead wordpress will just <strong>resize<\/strong> the original and show that to you, it&#8217;ll probably be distorted too.\n<\/p>\n<p>There are 2 things in my mind you can do about that, the first is very obvious you re-upload the image manually, or if there are too many images then it might consume quite some time; so for that we can use the <a href=\"http:\/\/wordpress.org\/extend\/plugins\/ajax-thumbnail-rebuild\/\" title=\"Rebuild Your Post Thumbnails\" target=\"_blank\">Thumbnail Rebuild Plugin<\/a> to scan and generate images for the old ones.<\/p>\n<h3 id=\"z-the-difference\">\nThe Difference &#8211; <code>set_post_thumbnail_size<\/code> vs <code>add_image_size<\/code> <a class=\"top-link\" href=\"#z-content-nav\">TOP  &uarr;<\/a><br \/>\n<\/h3>\n<p>Basically, there is not really much of a difference, they&#8217;re actually both one in the same, I&#8217;ll try to explain more clearly.<\/p>\n<blockquote><p>\n<code>add_image_size<\/code> function description from the <a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/add_image_size\" target=\"_blank\">wordpress codex<\/a>.<br \/>\nRegisters a new image size. This means that WordPress will create a copy of the post thumbnail with the specified dimensions when you upload a new thumbnail.\n<\/p><\/blockquote>\n<p>The <code>set_post_thumbnail_size()<\/code> function is the same as add_image_size, but instead of letting you define a name for the thumbnail it sets a default one for you which is named <code>post-thumbnail<\/code>. That&#8217;s the simplest way i can put it for you.<\/p>\n<p>Check out the below code &#8211; That is how the <code>set_post_thumbnail_size()<\/code> function is defined in the wordpress core.<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n\/**\r\n * Registers an image size for the post thumbnail\r\n *\/\r\nfunction set_post_thumbnail_size( $width = 0, $height = 0, $crop = FALSE ) {\r\n\tadd_image_size( 'post-thumbnail', $width, $height, $crop );\r\n}\r\n\/\/ You can find this @ \/wp-includes\/media.php at line number 185\r\n<\/pre>\n<p>As you can see, <code>set_post_thumbnail_size()<\/code> is using the <code>add_image_size()<\/code> function. The difference in two is that set_post_thumbnail is setting a default name for you to use.<\/p>\n<h3 id=\"z-howto\">\nOK, But How do i implement and use this in my own wordpress theme? <a class=\"top-link\" href=\"#z-content-nav\">TOP  &uarr;<\/a><br \/>\n<\/h3>\n<p>Easy, read my next post <a href=\"http:\/\/www.zubair.info\/blog\/2010\/11\/19\/how-to-use-post-thumbnails-feature-in-wordpress.html\" title=\"How to Use Post Thumbnails Feature in WordPress\">How to Use Post Thumbnails Feature in WordPress<\/a>.<\/p>\n<p>Sorry, i couldn&#8217;t add the <code>set_post_thumbnail_size()<\/code> Function Reference below, as it isn&#8217;t available yet. If you think you know something that would be useful for others that could be included in the below list, then do let me know.<\/p>\n<div id=\"z-useful-resources\">\n<h3 class=\"z-useful-resources-title\">Useful Resources <a class=\"top-link\" href=\"#z-content-nav\">TOP  &uarr;<\/a><\/h3>\n<ul class=\"z-useful-resources-list\">\n<li>WP Codex: <a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/add_image_size\">add_image_size() Function Reference on WordPress Codex<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<h3>Working with <code>set_post_thumbnail_size<\/code> and <code>add_image_size<\/code><\/h3>\n<p>Today, I would like to post about these two handy functions introduced in <em>Wordpress v2.9<\/em>, these two functions are used to integrate and manipulate the wordpress post thumbnails feature which was also introduced in <em>wordpress v2.9<\/em>.<\/p>\n<p>I have been seeing people say that these functions are not working in their theme as they should. But i would like to point out some things that might help you with that and at the same time help you understand what the difference in these two functions are.<\/p>\n","protected":false},"author":1001009,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[65,64,73,58,62,70,66],"class_list":["post-130","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-add_image_size","tag-set_post_thumbnail_size","tag-wordpress-2-9","tag-wordpress-functions","tag-wordpress-image-functions","tag-wordpress-post-thumbnail","tag-wordpress-thumbnail-functions"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.zubair.info\/blog\/wp-json\/wp\/v2\/posts\/130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zubair.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zubair.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zubair.info\/blog\/wp-json\/wp\/v2\/users\/1001009"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zubair.info\/blog\/wp-json\/wp\/v2\/comments?post=130"}],"version-history":[{"count":0,"href":"https:\/\/www.zubair.info\/blog\/wp-json\/wp\/v2\/posts\/130\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zubair.info\/blog\/wp-json\/wp\/v2\/media?parent=130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zubair.info\/blog\/wp-json\/wp\/v2\/categories?post=130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zubair.info\/blog\/wp-json\/wp\/v2\/tags?post=130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}