Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

CMB2 multiple files not displaying on page

I'm trying to use the CMB2 'Multiple Files' fields type on a custom post type called 'projects'. But the images are not displaying on the post. This is my setup so far.

My functions.php file

<?php
/**
 * Get the bootstrap!
 */
if ( file_exists(  __DIR__ . '/cmb2/init.php' ) ) {
  require_once  __DIR__ . '/cmb2/init.php';
} elseif ( file_exists(  __DIR__ . '/CMB2/init.php' ) ) {
  require_once  __DIR__ . '/CMB2/init.php';
}

add_action( 'cmb2_admin_init', 'cmb2_metaboxes' );
/**
 * Define the metabox and field configurations.
 */
function cmb2_metaboxes() {

  // Start with an underscore to hide fields from custom fields list
  $prefix = '_cubo_';

  /**
   * Initiate the metabox
   */
  $cmb = new_cmb2_box( array(
      'id'            => 'cubo_metabox',
      'title'         => __( 'Project', 'cmb2' ),
      'object_types'  => array( 'projects' ), // Post type
      'context'       => 'normal',
      'priority'      => 'high',
      'show_names'    => true, // Show field names on the left
      // 'cmb_styles' => false, // false to disable the CMB stylesheet
      // 'closed'     => true, // Keep the metabox closed by default
  ) );

  $cmb->add_field( array(
      'name'         => __( 'Images', 'cmb2' ),
      'desc'         => __( 'Upload project images.', 'cmb2' ),
      'id'           => $prefix . 'file_list',
      'type'         => 'file_list',
      'preview_size' => array( 150, 150 ), // Default: array( 50, 50 )
  ) );

}
 ?>

I've added this to my template-tags.php file

<?php
/**
* Sample template tag function for outputting a cmb2 file_list
*
* @param  string  $file_list_meta_key The field meta key. ('wiki_test_file_list')
* @param  string  $img_size           Size of image to show
*/
function cmb2_output_file_list( $file_list_meta_key, $img_size = 'medium' ) {

  // Get the list of files
  $files = get_post_meta( get_the_ID(), $file_list_meta_key, 1 );

  echo '<div class="file-list-wrap">';
  // Loop through them and output an image
  foreach ( (array) $files as $attachment_id => $attachment_url ) {
      echo '<div class="file-list-image">';
      echo wp_get_attachment_image( $attachment_id, $img_size );
      echo '</div>';
  }
  echo '</div>';
}
 ?>

Then I've added this to my single-projects.php

<?php
get_header(); ?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
        <?php
        while (have_posts()) : the_post();

            get_template_part('template-parts/content', 'projects', get_post_format());

            // // If comments are open or we have at least one comment, load up the comment template.
            // if (comments_open() || get_comments_number()) :
            //     comments_template();
            // endif;

                        cmb2_output_file_list( 'cubo_metabox', 'small' );


        endwhile; // End of the loop.

        ?>

        </main><!-- #main -->
    </div><!-- #primary -->
 ?>

And then go to the admin area > projects > add new > and add some images to a post with my newly created field. Save the post. But the images aren't being displayed to the page. And if I inspect the source I can see in the markup that div has been created, but it is empty.

<div class="file-list-wrap"><div class="file-list-image"></div></div>

The post I added the images to have an post-id-70. I checked the mySQL database and under post_id 70, this is added.

  70    _cubo_file_list     a:7:{i:73;s:54:"http://cubo.dk/wp-content/uploads/2016/08/dta_2x-6.jpg";i:78;s:54:"http://cubo.dk/wp-content/uploads/2016/08/dta_2x-1.jpg";i:77;s:54:"http://cubo.dk/wp-content/uploads/2016/08/dta_2x-2.jpg";i:76;s:54:"http://cubo.dk/wp-content/uploads/2016/08/dta_2x-3.jpg";i:74;s:54:"http://cubo.dk/wp-content/uploads/2016/08/dta_2x-5.jpg";i:75;s:54:"http://cubo.dk/wp-content/uploads/2016/08/dta_2x-4.jpg";i:72;s:52:"http://cubo.dk/wp-content/uploads/2016/08/dta_2x.jpg";}

So it seems at least to me that the files have to been correctly added to database, but I can't understand where I go wrong since they aren't being displayed in within the div on the page?

Can anypne explain to me why this isn't working? Thanks.

https://github.com/webdevstudios/CMB2/wiki/Field-Types#file_list

Doru Marginean
Doru Marginean
2,290 Points

Hi Christian Steen Jørgensen,

In single-projects.php you need to use the field meta_key not the metabox_key:

cmb2_output_file_list( 'cubo_metabox', 'small' );

needs to be changed to:

cmb2_output_file_list( '_cubo_file_list', 'small' );

Also there isn't a 'small' image size, default sizes are: thumbnail, medium, large and full. So unless you declare a custom image size using the above code will result in the full size image which is added as a fallback when an image size is not found.

More info: https://codex.wordpress.org/Post_Thumbnails