BugWP logo BugWP
Back to Community
Home / Community / Plugin → Cmb2

How to Display CMB2 File and File List Images on Your WordPress Frontend

38 threads Sep 16, 2025 Plugin → Cmb2

Content

A common challenge when using the CMB2 plugin for WordPress is getting uploaded images to display correctly on the frontend of your website. Based on community discussions, this issue often stems from a misunderstanding of how CMB2 stores file data and which WordPress functions to use for retrieval.

The Core of the Problem: URL vs. ID

CMB2's 'file' and 'file_list' field types store data in a specific way that is not always intuitive. By default, a 'file' field saves the image's URL in the database. However, it also automatically saves the attachment ID in a separate meta key. This dual-saving mechanism is powerful but can lead to confusion.

Many developers try to use the URL with functions like wp_get_attachment_image(), which expects an attachment ID, not a URL. This mismatch is the most frequent cause of images not displaying, resulting in broken image links or empty variables.

How to Properly Retrieve and Display Images

Solution 1: For the 'file' Field Type

To display an image from a standard 'file' field, you must retrieve the attachment ID, not the URL. CMB2 saves the ID in your field's ID with _id appended.

Example Code:

$image_id = get_post_meta( get_the_ID(), 'your_field_id_id', true );
if ( $image_id ) {
    echo wp_get_attachment_image( $image_id, 'medium' );
}

In this example, if your field ID is wiki_test_image, the attachment ID is stored in wiki_test_image_id. Using the ID allows you to leverage WordPress functions like wp_get_attachment_image() to output the image tag with a specific size (e.g., 'medium', 'large', or your own custom size).

Solution 2: For the 'file_list' Field Type

The 'file_list' field stores an array of items where the attachment ID is the key and the URL is the value. To display a gallery of images, you need to loop through this array.

Example Code:

$files = get_post_meta( get_the_ID(), 'your_file_list_id', true );
if ( $files ) {
    foreach ( (array) $files as $attachment_id => $file_url ) {
        echo wp_get_attachment_image( $attachment_id, 'thumbnail' );
    }
}

Why This Approach is Better

Storing and using the attachment ID is the recommended method for several reasons:

  • Image Sizes: It allows you to easily generate any registered image size (thumbnail, medium, large) without having to manually create and manage them.
  • Metadata: You can access other attachment metadata, such as the title, alt text, or caption, using functions like get_the_title( $attachment_id ).
  • Site Migration: Using IDs is more robust than storing absolute URLs. If your site domain changes, the IDs remain correct, while hardcoded URLs will break. Serialized data containing URLs must be handled carefully during migration to avoid corruption.

What to Do If Your Images Are Still Missing

If you've confirmed your code is correct but images are not showing, try these troubleshooting steps:

  1. Check the Saved Data: Use var_dump( get_post_meta( get_the_ID(), 'your_field_id', true ) ); to see exactly what is stored in the database. This will tell you if you are getting an array, an ID, a URL, or nothing at all.
  2. Verify the Meta Key: Ensure the meta key you are using in your get_post_meta() call matches the field ID defined in your CMB2 configuration exactly.
  3. Review CMB2 Documentation: The CMB2 team maintains extensive documentation on GitHub. The file field type documentation provides essential examples for output.

By understanding how CMB2 handles file data and using the appropriate WordPress functions, you can reliably display images and create dynamic, professional-looking frontend displays.

Related Support Threads Support