{"id":261,"date":"2012-10-14T18:08:38","date_gmt":"2012-10-14T18:08:38","guid":{"rendered":"http:\/\/pixert.com\/blog\/?p=261"},"modified":"2012-10-24T22:58:11","modified_gmt":"2012-10-24T22:58:11","slug":"cropping-post-featured-thumbnails-from-top-instead-of-center-in-wordpress-with-native-cropping-tool","status":"publish","type":"post","link":"https:\/\/pixert.com\/blog\/cropping-post-featured-thumbnails-from-top-instead-of-center-in-wordpress-with-native-cropping-tool\/","title":{"rendered":"Cropping Post Thumbnails from Top instead of Center in WordPress"},"content":{"rendered":"

\"\"<\/a>WordPress Posts \u00a0Thumbnails or Post Featured Images \u00a0is a theme feature<\/a> introduced with Version 2.9<\/a>. Thumbnail is an image that is chosen as the representative image for Posts, Pages or Custom Post Types. The display of this images is up to the theme. This is especially useful for “magazine-style” themes where each post has an image. \u00a0(as stated in WordPress codex<\/a>)<\/p>\n

There is problem with WordPress Posts Thumbnails,\u00a0generated thumbnails are cropped from the center. What if we want to crop thumbnails from top instead of center? especially for portrait images<\/p>\n

1. Open functions.php in Theme Editor or Text Editor (Notepad++ \/ Coda)<\/p>\n

2. Add the following code to functions.php<\/p>\n

\r\n\r\n<?php\r\nfunction px_image_resize_dimensions( $payload, $orig_w, $orig_h, $dest_w, $dest_h, $crop ){\r\n\r\n\/\/ Change this to a conditional that decides whether you want to override the defaults for this image or not.\r\nif( false )\r\nreturn $payload;\r\n\r\nif ( $crop ) {\r\n\/\/ crop the largest possible portion of the original image that we can size to $dest_w x $dest_h\r\n$aspect_ratio = $orig_w \/ $orig_h;\r\n$new_w = min($dest_w, $orig_w);\r\n$new_h = min($dest_h, $orig_h);\r\n\r\nif ( !$new_w ) {\r\n$new_w = intval($new_h * $aspect_ratio);\r\n}\r\n\r\nif ( !$new_h ) {\r\n$new_h = intval($new_w \/ $aspect_ratio);\r\n}\r\n\r\n$size_ratio = max($new_w \/ $orig_w, $new_h \/ $orig_h);\r\n\r\n$crop_w = round($new_w \/ $size_ratio);\r\n$crop_h = round($new_h \/ $size_ratio);\r\n\r\n$s_x = 0; \/\/ [[ formerly ]] ==> floor( ($orig_w - $crop_w) \/ 2 );\r\n$s_y = 0; \/\/ [[ formerly ]] ==> floor( ($orig_h - $crop_h) \/ 2 );\r\n} else {\r\n\/\/ don't crop, just resize using $dest_w x $dest_h as a maximum bounding box\r\n$crop_w = $orig_w;\r\n$crop_h = $orig_h;\r\n\r\n$s_x = 0;\r\n$s_y = 0;\r\n\r\nlist( $new_w, $new_h ) = wp_constrain_dimensions( $orig_w, $orig_h, $dest_w, $dest_h );\r\n}\r\n\r\n\/\/ if the resulting image would be the same size or larger we don't want to resize it\r\nif ( $new_w >= $orig_w && $new_h >= $orig_h )\r\nreturn false;\r\n\r\n\/\/ the return array matches the parameters to imagecopyresampled()\r\n\/\/ int dst_x, int dst_y, int src_x, int src_y, int dst_w, int dst_h, int src_w, int src_h\r\nreturn array( 0, 0, (int) $s_x, (int) $s_y, (int) $new_w, (int) $new_h, (int) $crop_w, (int) $crop_h );\r\n\r\n}\r\nadd_filter( 'image_resize_dimensions', 'px_image_resize_dimensions', 10, 6 );\r\n?>\r\n\r\n<\/pre>\n
3. Download Regenerate Thumbnails plugin from wordpress.org repo and install Regenerate Thumbnails.\u00a0This plugin takes post thumbnails and crops them again using your latest media settings.<\/p>\n
4.\u00a0After you install it click on the \u201cRegenerate All Thumbnails\u201d button under tools. It will automatically crop all the post thumbnails again<\/p>\n
Credits: thank you, \u00a0E. George Stephanis<\/a> for awesome code<\/p>\n","protected":false},"excerpt":{"rendered":"
WordPress Posts \u00a0Thumbnails or Post Featured Images \u00a0is a theme feature introduced with Version 2.9. Thumbnail is an image that is chosen as the representative image for Posts, Pages or Custom Post Types. The display of this images is up to the theme. This is especially useful for “magazine-style” themes where each post has an […]<\/p>\n","protected":false},"author":1,"featured_media":265,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[54,5],"tags":[119,118,6],"class_list":["post-261","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-snippet","category-wordpress","tag-native-wordpress-cropping-tool","tag-post-thumbnails","tag-wordpress-2"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2012\/10\/feaimagewp.jpg?fit=302%2C175&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p1pvi1-4d","jetpack-related-posts":[{"id":218,"url":"https:\/\/pixert.com\/blog\/how-to-fix-custom-field-for-thumbnails-wpzoom-featured-category-widget\/","url_meta":{"origin":261,"position":0},"title":"How to fix Custom Field for thumbnails in WPZoom Featured Category widget","author":"Pixel Insert \/ Pixert","date":"April 6, 2012","format":false,"excerpt":"WPZoom Featured Widget is a widget built inside WPZOOM themes to show Featured Category posts The widget display thumbnail images, post titles and post meta datas from selected Featured Category There's a bug in wpzoom-widgets.php where as all widgets code are. The widget cannot display thumbnail images from custom field\u2026","rel":"","context":"In "Code Snippet"","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2012\/04\/featuredcat-208x300.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":330,"url":"https:\/\/pixert.com\/blog\/set-featured-images-in-posts-automatically\/","url_meta":{"origin":261,"position":1},"title":"WordPress: Set Featured Images Automatically in Hundreds or Thousands of Post","author":"Pixel Insert \/ Pixert","date":"September 23, 2013","format":"link","excerpt":"This plugin is saving time by generate post thumbnails from Featured Images at once. Auto Post Thumbnail","rel":"","context":"In "WordPress"","block_context":{"text":"WordPress","link":"https:\/\/pixert.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":214,"url":"https:\/\/pixert.com\/blog\/how-to-fix-also-bought-noimage-error-wp-ecommerce\/","url_meta":{"origin":261,"position":2},"title":"How to fix “people who bought this item also bought” no image error in wp e-commerce","author":"Pixel Insert \/ Pixert","date":"March 23, 2012","format":false,"excerpt":"Cross Sales is a feature under WP E-Commerce . You can find this under Store Settings > Marketing. An user will see what other people bought with regard to the current product being displayed. Upon activating it though, an error, \u201cNO IMAGE\u201d default thumbnail under that category\u00a0which does not display\u2026","rel":"","context":"In "Code Snippet"","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":284,"url":"https:\/\/pixert.com\/blog\/how-to-add-show-thumbnail-option-in-wpzoom-featured-category-widget\/","url_meta":{"origin":261,"position":3},"title":"How to add ‘Show Thumbnail’ option in WPZOOM Featured Category Widget","author":"Pixel Insert \/ Pixert","date":"February 18, 2013","format":false,"excerpt":"Tribune is a lovely magazine theme from WPZOOM. The theme has custom widgets name WPZOOM Featured Category Widget You could use this widget to display categories on homepage like the demo site\u00a0(Politics - World - Sports - Automotive). The widget show thumbnails by default, it doesn't have feature to disable\u2026","rel":"","context":"In "Code Snippet"","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"WPZOOMFeaturedCategory","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/02\/WPZOOMFeaturedCategory.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":222,"url":"https:\/\/pixert.com\/blog\/wpzoom-featured-category-widget-videozoom\/","url_meta":{"origin":261,"position":4},"title":"WPZoom Featured Category Widget with video for Videozoom theme","author":"Pixel Insert \/ Pixert","date":"April 6, 2012","format":false,"excerpt":"I made the following widget code to show Featured Category with Video embed code. The following widget works with Videozoom theme from WPZoom Open wpzoom-widgets.php in the functions folder of Videozom. \u00a0Add the following code at the bottom of the wpzoom-widgets.php [php] \/*---------------------------------------------*\/ \/* WPZOOM: Featured Category widget with Video\u2026","rel":"","context":"In "Code Snippet"","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":271,"url":"https:\/\/pixert.com\/blog\/wordpress-theme-review-pinboard-by-themify\/","url_meta":{"origin":261,"position":5},"title":"WordPress Theme Review : Pinboard by Themify","author":"Pixel Insert \/ Pixert","date":"December 11, 2012","format":false,"excerpt":"Pinterest has obviously gotten a lot of attention lately,it\u00a0focuses on visual appearance to spread your words and it is one of the best way inspire people nowadays. Pinterest is using dynamic grid layout, features an auto stacking layout with infinite scroll. Themify created Pinterest style theme for WordPress name Pinboard\u2026","rel":"","context":"In "WordPress"","block_context":{"text":"WordPress","link":"https:\/\/pixert.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2012\/12\/pinboardskins.jpg?fit=1200%2C1193&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2012\/12\/pinboardskins.jpg?fit=1200%2C1193&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2012\/12\/pinboardskins.jpg?fit=1200%2C1193&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2012\/12\/pinboardskins.jpg?fit=1200%2C1193&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2012\/12\/pinboardskins.jpg?fit=1200%2C1193&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts\/261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/comments?post=261"}],"version-history":[{"count":0,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts\/261\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/media\/265"}],"wp:attachment":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/media?parent=261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/categories?post=261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/tags?post=261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}