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 trialcsj
12,678 PointsCMB2 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
2,290 PointsDoru Marginean
2,290 PointsHi 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