Image

Improve this page

Overview

The image field creates a simple image upload with default UI like <input type="file">. Unlike other media fields, this field doesn’t use Media Library UI to upload images.

This field is very similar to file. The only difference is the file field allows to upload all file types while this field allows only images.

Screenshot

image

Settings

Besides the common settings, this field has the following specific settings:

Name Description
max_file_uploads Max number of uploaded images. Optional.
force_delete Whether or not delete the images from Media Library when deleting them from post meta. true or false (default). Optional. Note: it might affect other posts if you use same image for multiple posts.

Note that the multiple setting is always set to true for this field.

Sample code

array(
    'name'             => 'Image Upload',
    'id'               => 'field_id',
    'type'             => 'image',

    // Delete image from Media Library when remove it from post meta?
    // Note: it might affect other posts if you use same image for multiple posts
    'force_delete'     => false,

    // Maximum image uploads
    // 'max_file_uploads' => 2,
),

Data

This field saves multiple values (attachment IDs) in the database. Each value (attachment ID) and is store in a single row in the database with the same meta key (similar to what add_post_meta does with last parameter false).

Template usage

To get the uploaded images, use the helper function rwmb_meta():

$images = rwmb_meta( 'info', array( 'size' => 'thumbnail' ) );
foreach ( $images as $image ) {
    echo '<a href="', $image['full_url'], '"><img src="', $image['url'], '"></a>';
}

This 2nd argument for rwmb_meta is an array of extra parameters and accepts the following parameters:

Name Description
size Image size returned. Optional. If missed, thumbnail will be used.
link Set to true to show link to full-size images. Leave empty to not to.
limit Limit the number of returned images.

This helper function returns an array of images, each image has the following information:

array(
    'ID'   => 123,
    'name' => 'logo-150x80.png',
    'path' => '/var/www/wp-content/uploads/logo-150x80.png',
    'url' => 'https://example.com/wp-content/uploads/logo-150x80.png',
    'width' => 150,
    'height' => 80,
    'full_url' => 'https://example.com/wp-content/uploads/logo.png',
    'title' => 'Logo',
    'caption' => 'Logo caption',
    'description' => 'Used in the header',
    'alt' => 'Logo ALT text',
    'srcset' => 'large.jpg 1920w, medium.jpg 960w, small.jpg 480w' // List of responsive image src
    'sizes' => array(), // List of image sizes. See https://codex.wordpress.org/Function_Reference/wp_get_attachment_metadata
    'image_meta' => array(), // List of image meta. See https://codex.wordpress.org/Function_Reference/wp_get_attachment_metadata
);

In case you want to get only 1 image, use the limit parameter for the helper function:

$images = rwmb_meta( 'info', array( 'limit' => 1 ) );
$image = reset( $images );
?>
<img src="<?php echo $image['url']; ?>">

If you only want to display uploaded images in an unordered list, you can just use the rwmb_the_value():

rwmb_the_value( $field_id, array( 'size' => 'thumbnail' ) );

which outputs:

<ul>
    <li><a href="link/to/full-size1"><img src="link/to/image1"></a></li>
    <li><a href="link/to/full-size2"><img src="link/to/image2"></a></li>
</ul>

Read more about rwmb_meta() and rwmb_the_value().

Filters

This field inherits from file and thus, uses the same filters to change the texts that displayed on the screen.

Filter Default Description
rwmb_file_upload_string Upload files file upload string
rwmb_file_add_string + Add new file Add new file string
rwmb_file_delete_string Delete file delete string
rwmb_file_edit_string Edit file edit string

All filters above accept 2 parameters:

  • $string: the string need to be changed
  • $field: array of field attribute

The code below changes the “+ Add new file” string:

add_filter( 'rwmb_file_add_string', 'prefix_change_add_string' );
function prefix_change_add_string() {
    return '+ New file';
}