ACF image field not resizing images

The ACF (Advanced Custom Fields) plugin in WordPress allows you to create custom fields for your posts, pages, or custom post types. One of the field types provided by ACF is the image field, which allows you to upload and select images.

By default, ACF does not automatically resize the images uploaded through the image field. However, you can use the WordPress built-in function wp_get_attachment_image_src() to retrieve the image URL and then manually resize it using the add_image_size() function.

Here’s an example code snippet that demonstrates how to resize an image uploaded through an ACF image field:

// Register a custom image size
function wpsnippets_custom_image_sizes() {
    add_image_size( 'custom-thumbnail', 300, 200, true );
}
add_action( 'after_setup_theme', 'wpsnippets_custom_image_sizes' );

// Retrieve and display the resized image
$image = get_field( 'image_field_name' ); // Replace 'image_field_name' with your ACF image field name
$image_url = $image['url'];
$resized_image = wp_get_attachment_image_src( $image['id'], 'custom-thumbnail' );

if ( $resized_image ) {
    echo '<img src="' . esc_url( $resized_image[0] ) . '" alt="' . esc_attr( $image['alt'] ) . '">';
}

In the code above, we first register a custom image size called ‘custom-thumbnail’ using the add_image_size() function. This size will have a width of 300 pixels, a height of 200 pixels, and will crop the image to fit these dimensions (the fourth parameter true).

Next, we retrieve the image URL from the ACF image field using get_field(). We then pass the image ID and the custom image size (‘custom-thumbnail’) to wp_get_attachment_image_src() to get the resized image URL.

Finally, we check if the resized image URL is available and then display the image using an <img> tag. We use esc_url() and esc_attr() to sanitize the URLs and alt text for security purposes.

This code snippet can be useful when you want to display resized versions of images uploaded through ACF image fields. Resizing images can help improve page load times and ensure consistent image dimensions across your website.

Examples

Example 1: Using the wp_get_attachment_image_src() function

This use case demonstrates how to retrieve the original image URL from an ACF image field without resizing the image.

$image = get_field('image_field');
$image_url = wp_get_attachment_image_src($image['ID'], 'full')[0];

In this code example, we retrieve the ACF image field value using the get_field() function. Then, we pass the image ID and the desired image size (full in this case) to the wp_get_attachment_image_src() function. Finally, we access the first element of the returned array to get the original image URL.

Example 2: Using the acf/format_value filter

This use case demonstrates how to prevent ACF from resizing images by using the acf/format_value filter.

function wpsnippets_disable_image_resize($value, $post_id, $field) {
    if ($field['type'] === 'image') {
        $value['sizes'] = false;
    }
    return $value;
}
add_filter('acf/format_value', 'wpsnippets_disable_image_resize', 10, 3);

In this code example, we define a custom function wpsnippets_disable_image_resize() that checks if the ACF field type is image. If it is, we set the sizes property of the field value to false, which prevents ACF from generating resized versions of the image. Finally, we add this function as a filter to the acf/format_value hook.

Example 3: Using the acf/prepare_field filter

This use case demonstrates how to modify the ACF image field settings to prevent image resizing using the acf/prepare_field filter.

function wpsnippets_disable_image_resize($field) {
    if ($field['type'] === 'image') {
        $field['return_format'] = 'array';
        $field['preview_size'] = 'full';
    }
    return $field;
}
add_filter('acf/prepare_field', 'wpsnippets_disable_image_resize');

In this code example, we define a custom function wpsnippets_disable_image_resize() that checks if the ACF field type is image. If it is, we modify the return_format to 'array' and set the preview_size to 'full'. This ensures that the original image URL is returned and displayed without resizing. Finally, we add this function as a filter to the acf/prepare_field hook.