This is a quick tips for WordPress developers or WordPress website owners. In this tutorial i will explain how to add additional image sizes in WordPress. When you are uploading the images from admin, WordPress will crop your images in tree sizes which is:
Thumbnail size ( Width: 150 and Height: 150 )
Medium size ( Max Width: 300 and Max Height: 300 )
Large size ( Max Width: 1024 and Max Height: 1024 )
If you want to add some additional image sizes rather than the default image sized, then use the below code in functions.php file of your current activated theme.
1 2 3 4 5 6 7 8 | < ?php //add additional image sizes if ( function_exists( 'add_image_size' ) ) { add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height) add_image_size( 'homepage-thumb', 220, 180, true ); //(cropped) } ?> |
The image size won’t show up in your media settings screen, but it will automatically cropped during image upload. You can call that image sizes by using post thumbnail like:
1 2 3 | < ?php echo get_the_post_thumbnail($post->ID, 'product-thumb'); ?> |
Want to show custom image sizes in your admin media upload option, then open functions.php file of your current theme and copy paste below code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | < ?php function show_image_sizes( $sizes ) { $new_sizes = array(); $added_sizes = get_intermediate_image_sizes(); // $added_sizes is an indexed array, therefore need to convert it // to associative array, using $value for $key and $value foreach( $added_sizes as $key => $value) { $new_sizes[$value] = $value; } // This preserves the labels in $sizes, and merges the two arrays $new_sizes = array_merge( $new_sizes, $sizes ); return $new_sizes; } add_filter('image_size_names_choose', 'show_image_sizes', 11, 1); ?> |
Article Tags: add image size, thumbnails size, wordpress change image size, Wordpress header image size, wordpress image resize function, wordpress image size, WordPress thumbnails size, wordpress tutorials for beginners
