Wordpress custom thumbnail size

Question

I'am trying to make custom thumbnail sizes in Wordpress. Currently I have following code in functions.php

<?php

add_image_size( 'featuredImageCropped', 310, 150, false );

function custom_excerpt_length( $length ) {
    return 15;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

And I'am trying to access this thumbnail in index.php with following code:

<img class="keis-image" src="<?php $kuva = get_field('kuva');$image = wp_get_attachment_image_src( $kuva['id'], "featuredImageCropped"); echo $image[0]  ?>"/>

However it will return full image instead of resized thumbnail, if I change featuredImageCropped to large or some other basic thumbnail size it will return it as it should.

How could I get my custom thumbnail to render as I'd like to?

Answer 1

Thumbnail Sizes

The default image sizes of WordPress are “thumbnail”, “medium”, “large” and “full” (the size of the image you uploaded). These image sizes can be configured in the WordPress Administration Media panel under Settings > Media. This is how you can use these default sizes with the_post_thumbnail():

the_post_thumbnail();                  // without parameter -> 'post-thumbnail'

the_post_thumbnail( 'thumbnail' );       // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' );          // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'large' );           // Large resolution (default 640px x 640px max)
the_post_thumbnail( 'full' );            // Full resolution (original size uploaded)

the_post_thumbnail( array(100, 100) );  // Other resolutions

Answer 2

According to add_image_size() in the Documentation:
Add this to your theme's functions.php :

add_action( 'after_setup_theme', 'mytheme_custom_thumbnail_size' );
function mytheme_custom_thumbnail_size(){
    add_image_size( 'thumb-small', 200, 200, true ); // Hard crop to exact dimensions (crops sides or top and bottom)
    add_image_size( 'thumb-medium', 520, 9999 ); // Crop to 520px width, unlimited height
    add_image_size( 'thumb-large', 720, 340 ); // Soft proprtional crop to max 720px width, max 340px height
}

To display a featured image with your new size (in this case “thumb-small”) in a post, just add:

<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'thumb-small' ); } ?>

If your theme does not support featured images, you need to add this to your functions.php as well, inside of your setup function.

// Enable featured image
add_theme_support( 'post-thumbnails' );

If you add new thumbnail sizes to a site which already has media uploaded, you’ll need to regenerate thumbnails once for the new sizes to show up using this plugin:

Regenerate Thumbnails