Wordpress custom taxonomy image resize ACF

Question

I've created a product post type on Wordpress called products, with a custom taxonomy called "product_categories" using Advanced Custom Fields (ACF) I added an image field to the taxonomy to be able to add an image to each product category. Below is the query im doing. It works fine, however I want to display the image in a custom size, so it's not loading a huge 2000x3000 image every time. Here is my current code:

<?php

$prodargs=array(  
    'hide_empty'        => 0,  
    'parent'        => 0,  
    'taxonomy'      => 'product_categories');  

    $prodcats=get_categories($prodargs);  

    foreach($prodcats as $pc){ 
        $termlink = get_term_link( $pc->slug, 'product_categories' ); 

?>

    <a class="single-library-cat" href="<?php echo $termlink; ?>">
        <img src="<?php the_field('taxonomy_image', 'product_categories_'.$pc->term_id); ?>" />
        <?php echo $pc->name; ?>
    </a>

<?php } ?>

I know through ACF I can access extra image data such as sizes, width height. Just not sure I would implement it to my currect code. https://www.advancedcustomfields.com/resources/image/

Answer 1

1) In functions.php define your custom size with add_image_size function and add helper method

add_theme_support('post-thumbnails');
add_image_size( 'category', 250, 200, true );

function get_src_picture($id, $size)
{
    $thumb = wp_get_attachment_image_src($id, $size);
    return $thumb[0];
}

2) Change "Return value" property of the image acf field to "Image ID"

3) Get image thumb

  <img src="<?= get_src_picture(get_field('taxonomy_image', 'product_categories_'.$pc->term_id), 'category') ?>" />