Last updated on : August 2, 2025

The Image field allows users to upload or select an image from the WordPress Media Library. It’s ideal for custom featured images, user profile pictures, icons, banners, or any place where visual media is required.

This field stores both the image ID and URL, providing flexibility to access the image in various formats and sizes.

Settings
  1. Field Type: Selects the type of input field to display. The Image field creates a media picker that allows users to upload or select an image from the WordPress Media Library.
  2. Field Label: The label displayed above the image selector. Helps users understand the purpose of the image input.
  3. Field Name: A unique identifier used in the database and code. Only lowercase letters, numbers, and underscores are allowed. This value is used when retrieving and saving data.
  4. Required Field: Forces users to select an image before submitting the form. If enabled, empty selections will not be accepted. Defaults to off.
  5. Default Value: Sets a pre-selected image that appears when creating new entries. Can be defined using an image ID.
  6. Placeholder: A fallback image or text shown when no image has been selected yet.
  7. Image Size: Defines the size of the image to retrieve when rendering on the frontend. Options can include thumbnail, medium, large, full, or any custom sizes registered by your theme or plugins. This controls the preview image users see and what gets returned on the frontend.
Frontend Value Example

When retrieving the field value, you get an array containing the image ID and URL:

Array
(
    [id] => 253
    [url] => https://voxycure.com/wp-content/uploads/2025/07/wp_dummy_content_generator_252.jpg
)
Template usage

Basic Display (Using URL)

$image = get_post_meta( $post->ID, 'image_field_key', true );

if ( ! empty( $image['url'] ) ) {
    echo '<img src="' . esc_url( $image['url'] ) . '" alt="Image">';
}

Advanced Display (Using ID + Size)

If you want to control the output size (e.g., medium, full, etc.), use the image ID with wp_get_attachment_image_src():

$image = get_post_meta( $post->ID, 'image_field_key', true );

if ( ! empty( $image['id'] ) ) {
    $image_data = wp_get_attachment_image_src( $image['id'], 'medium' ); // Change 'medium' to your selected size
    if ( $image_data ) {
        echo '<img src="' . esc_url( $image_data[0] ) . '" alt="Image">';
    }
}

That’s it! You’ve successfully configured an Image field. Now it’s ready to handle image selection, preview, and display with full support for custom sizes in your WordPress setup.