Custom WordPress Image size not displaying

Question

I am trying to add a custom image size in WordPress like so:

// Add custom image sizes
if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' ); // The important part
    }


if ( function_exists( 'add_image_size' ) ) {
    add_image_size( 'home_portrait size', 1000, 1000, false );
}
/* Display Custom Image Sizes */
add_filter('image_size_names_choose','wpshout_custom_sizes');
function wpshout_custom_sizes($sizes){
    return array_merge($sizes, array(
        'home_portrait' => __('Home Portrait standard'),
));
}

I can see this extra size is generated when I upload an image to the media library as expected but it does not work when I try and implement it in PHP with advanced custom fields.

The custom image size is 1000px by 1000px.

In an attempt to trouble shoot and narrow down the issue, I amended the default WP size of 'medium' to also be 1000px by 1000px.

In the code below, the top image which uses this default 'medium' size renders perfectly on the website using the correct image but the second does not, it just displays the full size image.

I can't work out what is wrong with my custom image code given that it seemingly should be very straight forward.

<!-- THIS WORKS -->
                                    
                                    <?php 
                                        $top_image = get_field('top_animated_image_1'); 
                                    ?>  
                                    
                                    <div class="upper-image">
                                            <?php $top_animated_image_1 = get_field( 'top_animated_image_1' ); ?>
                                            <?php $size = 'medium'; ?>
                                            <?php if ( $top_animated_image_1 ) : ?>
                                                <?php echo wp_get_attachment_image( $top_animated_image_1, $size ); ?>
                                            <?php endif; ?>
                                    </div>
                                    
                                    <!-- THIS DOES NOT -->
                                    
                                    <?php 
                                        $lower_image = get_field('lower_animated_image_2'); 
                                    ?>  
                                    
                                    
                                    <div class="lower-image">
                                        <?php $lower_animated_image_2 = get_field( 'lower_animated_image_2' ); ?>
                                        <?php $size = 'home_portrait'; ?>
                                        <?php if ( $lower_animated_image_2 ) : ?>
                                            <?php echo wp_get_attachment_image( $lower_animated_image_2, $size ); ?>
                                        <?php endif; ?>
                                    </div>  

Answer 1

I got this working in the end by changing it to

// Make sure featured images are enabled
add_theme_support( 'post-thumbnails' );

// Add featured image sizes
add_image_size( 'home_portrait', 1000, 1000, false ); // width, height, crop



// Register the three useful image sizes for use in Add Media modal
add_filter( 'image_size_names_choose', 'wpshout_custom_sizes' );
function wpshout_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'home_portrait' => __( 'Home Portrait' ),

    ) );

though I am still not sure why the first did not work