Image Advanced

Edit this page on Github

Overview

The image advanced field uses WordPress media popup for selecting / uploading images. You can also reorder images.

Screenshot

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.
max_status	Display how many images uploaded/remaining. Applied only when max_file_uploads is defined. true (default) or false. Optional.
image_size	Image size that displays in the edit page. Optional. Default thumbnail. Image size is used to make sure images are not blurry. It’s not meant to display images with the exact width and height. Images are always displayed as square.
add_to	Whether to add new images to the beginning or the end of the list. beginning or end. Default end. Optional.

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

Sample code

array(
    'id'               => 'image',
    'name'             => 'Image Advanced',
    'type'             => 'image_advanced',

    // 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,

    // Do not show how many images uploaded/remaining.
    'max_status'       => 'false',

    // Image size that displays in the edit page. Possible sizes small,medium,large,original
    'image_size'       => 'thumbnail',
),

Data

Similar to file field, 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 advanced and thus, uses the same filters to change the texts that display on the screen.

Filter	Default	Description
rwmb_media_add_string	+ Add Media	Add new image string
rwmb_media_single_images_string	image	Singular “image” string
rwmb_media_multiple_images_string	images	Plural “images” string
rwmb_media_remove_string	Remove	Image remove string
rwmb_media_edit_string	Edit	Image edit string
rwmb_media_view_string	View	Image view string

The code below changes the “+ Add Media” string:

add_filter( 'rwmb_media_add_string', 'prefix_change_add_string' );
function prefix_change_add_string() {
    return '+ New Image';
}

See more

• How to display uploaded images as a WordPress image gallery?

Edit this page on Github