How To Integrate the WordPress Media Upload Box Into Your Meta Boxes

This video is quick and dirty talk about the WPAlchemy_MediaAccess helper class which will help you integrate the WordPress Media Uploader with your custom meta boxes.

This video is quick and dirty talk about the WPAlchemy_MediaAccess helper class which will help you integrate the WordPress Media Uploader with your custom meta boxes. It’s hot off the code editor (alpha stage) but functions rather well. Please give me your initial impressions/feedback.

View the setup and install WPAlchemy video if you need a quick primer on getting it all setup properly.

file: functions.php

include_once 'metaboxes/setup.php';

include_once 'metaboxes/custom-spec.php';

file: metaboxes/setup.php

include_once WP_CONTENT_DIR . '/wpalchemy/MetaBox.php';

include_once WP_CONTENT_DIR . '/wpalchemy/MediaAccess.php';
 
// include css to help style our custom meta boxes
add_action( 'init', 'my_metabox_styles' );

function my_metabox_styles()
{
	if ( is_admin() ) 
	{ 
		wp_enqueue_style( 'wpalchemy-metabox', get_stylesheet_directory_uri() . '/metaboxes/meta.css' );
	}
}

$wpalchemy_media_access = new WPAlchemy_MediaAccess();

file: metaboxes/custom-spec.php

$custom_mb = new WPAlchemy_MetaBox(array
(
	'id' => '_custom_meta',
	'title' => 'My Custom Meta',
	'template' => get_stylesheet_directory() . '/metaboxes/custom-meta.php',
));

file: metaboxes/custom-meta.php

<?php global $wpalchemy_media_access; ?>
<div class="my_meta_control metabox">
 
	<?php $mb->the_field('imgurl'); ?>
	<?php $wpalchemy_media_access->setGroupName('nn')->setInsertButtonLabel('Insert'); ?>

	<p>
		<?php echo $wpalchemy_media_access->getField(array('name' => $mb->get_the_name(), 'value' => $mb->get_the_value())); ?>
		<?php echo $wpalchemy_media_access->getButton(); ?>
	</p>

	<?php $mb->the_field('imgurl2'); ?>
	<?php $wpalchemy_media_access->setGroupName('nn2')->setInsertButtonLabel('Insert This')->setTab('gallery'); ?>

	<p>
		<?php echo $wpalchemy_media_access->getField(array('name' => $mb->get_the_name(), 'value' => $mb->get_the_value())); ?>
		<?php echo $wpalchemy_media_access->getButton(array('label' => 'Add Image From Library')); ?>
	</p>

</div>

Using MediaAccess Field/Button with MetaBox Repeating Fields Functionality

file: metaboxes/custom-meta.php (e.g. metaboxes/repeating_fields_meta.php)

<?php global $wpalchemy_media_access; ?>
<div class="my_meta_control">

	<p><a href="#" class="dodelete-docs button">Remove All</a></p>

	<?php while($mb->have_fields_and_multi('docs')): ?>
	<?php $mb->the_group_open(); ?>

		<a href="#" class="dodelete button">Remove</a>

		<?php $mb->the_field('imgurl'); ?>
		<?php $wpalchemy_media_access->setGroupName('img-n'. $mb->get_the_index())->setInsertButtonLabel('Insert'); ?>

		<p>
			<?php echo $wpalchemy_media_access->getField(array('name' => $mb->get_the_name(), 'value' => $mb->get_the_value())); ?>
			<?php echo $wpalchemy_media_access->getButton(); ?>
		</p>

		<?php $mb->the_field('title'); ?>
		<label for="<?php $mb->the_name(); ?>">Title</label>
		<p><input type="text" id="<?php $mb->the_name(); ?>" name="<?php $mb->the_name(); ?>" value="<?php $mb->the_value(); ?>"/></p>

	<?php $mb->the_group_close(); ?>
	<?php endwhile; ?>

	<p style="margin-bottom:15px; padding-top:5px;"><a href="#" class="docopy-docs button">Add</a></p>

</div>

You can get the code on github.

95 responses to “How To Integrate the WordPress Media Upload Box Into Your Meta Boxes”

pixenjoy April 21, 2011 at 3:20 am | Permalink

Hello Dimas,

I would like to translate the “Add Media” button label with the php gettext functions but this label is a string in your MediaAcces.php file.

It could be great to be able to translate this label in other languages in your next release.
Dimas April 22, 2011 at 9:11 am | Permalink
@pixenjoy, good idea, I’d like to make all of wpalchemy more translation ready, that is, expose all the little text bits. I think in your case you can change the label using:
```
$media_access->getButton(array('label' => 'TEXT'));
```
Bill April 23, 2011 at 5:30 am | Permalink

Hi, is there a way to have a field in a meta box that accepts a single file upload? I’d for my users to be able to attach/upload a resume to a post. One resume per post. I’d like it to be a PDF file, too. But, I am not sure how I’d do this.

If possible, I’d like to avoid exposing the user to the media gallery…

thanks!
Pietro May 2, 2011 at 4:07 am | Permalink

Hi, there is no example code? It’s a little bit difficult read/copy the code in the youtube video Tnx
John Westbroek May 2, 2011 at 7:47 am | Permalink

First of all, thanks for the MetaBox PHP class, it’s a real time-saver and hasn’t let me down so far.

I’m running into a few problems using the MediaAccess class. When using it with regular posts it works fine but on Custom Post Types the “Insert” button doesn’t show up in the MediaUpload-box and is replaced by the original “Insert this” button (which doesn’t work). Also on PDF-files no button is showing at all. Could you help with this?
Dimas May 2, 2011 at 3:55 pm | Permalink

@John, I’ll take a look … MediaAccess still in dev of course.
shawn May 4, 2011 at 6:14 pm | Permalink

I saw the comment about the media preview images in the admin from pastebin, but I don’t see the code in the mediaaccess.php file.
http://pastebin.com/SLWhkbnm

I’ve tried adding it in myself, but keep getting it wrong.

Any chance you could provide a modified vs. of mediaaccess that properly includes the image preview?

love the script!
pixenjoy May 21, 2011 at 6:04 am | Permalink

Hello,

Just a note : I use the theme-check plugin to test my theme and make sure it’s up to spec with the latest WP theme review standards.

And when i ckeck my theme, this message display :

WARNING: Found eval in the file /metabox/MediaAccess.php. eval() is not allowed.. Line 355: data = eval('(' + (data.indexOf('{') < 0 ? '{' + data + '}' : data) + ')');

Is it possible to replace the “eval” code by another instruction ? WordPress seems not appreciate eval() function.
Maybe for the next update
Aaron Vanderzwan May 31, 2011 at 10:55 am | Permalink

MediaAccess is great!

Not a show-stopper, just an FYI. The default editor has to be enabled in order for the MediaAccess ‘Insert’ button to show up (as of 0.1.1). It seems WordPress removes the button completely if the editor is not supported. So… if you are defining your own custom types, just make sure to include ‘editor’ in your ‘support’ arg. If you don’t want the editor, it is currently better to use the WPAlchemy ‘hide_editor’ option (http://www.farinspace.com/wpalchemy-metabox/#display_options).

Hope this saves some one else some time.
Ed June 9, 2011 at 4:21 am | Permalink

Hi Dimas,

I have the same question as Pietro above, could you post the metabox.php file that goes with the MediaAccess.php code, because it looks great, but I have no idea how to make this functionality work as shown in the video without that code that shows in the editor in the video.

Thanks!
Jesse June 23, 2011 at 12:08 pm | Permalink

I’m going to use this for creating a list of slides to use in a slide show on a home page of a wp site. The add / remove option to clone the fieldset is a godsend but I’m wondering how hard it would be to implement some jquery that lets us grab a fieldset instance and drag it up or down – maybe even arrows to click up to move it up in the list of images in order to change the order or fieldset instance number.

Also wondering if there is a way to limit or set max amount of times something can be cloned. For instance I want the user to be able to add anywhere from 1 to 5 max images for the slideshow but it looks like you can add an infinite amount right now all the way down to none at all.

Maybe these are feature requests as I’ve seen jquery to allow reordering of fieldset objects but not sure how to use that with the way this class is currently programmed.
Dimas June 23, 2011 at 12:27 pm | Permalink

@Jesse, if you are using have_fields_and_multi('name', $options), the $options second param is an array with the following values array('length' => 3, 'limit' => 5) … this will show three initial field groups and only allow you to create up to five field groups. As for the sorting check out this video.
Jesse June 23, 2011 at 9:28 pm | Permalink

Dimas, thanks a bunch! I got them both working exactly like your examples.

I know this is a work in progress (the media class) but I tried copying the text from the videos for this to my meta box but I get object errors so it’s maybe something to do with the videos being hard to decipher. An example template with the media upload button like your example in the video is what I’m looking for.
alanna June 24, 2011 at 1:15 pm | Permalink

great work, thanks! works very well.
Jesse June 24, 2011 at 3:24 pm | Permalink

I didn’t declare a new instance of WPAlchemy_MediaAccess() in my functions file. Works now.
Duong June 28, 2011 at 3:49 am | Permalink

Hi Dimas: i can’t find repeating_fields_meta.php and custom_meta.php in https://github.com/farinspace/wpalchemy/blob/dev/wp-content/wpalchemy/ please give me two files. Thanks you!
shawn June 28, 2011 at 6:26 pm | Permalink

@Dimas

Any chance you have the time to take a look at my comment from a few months ago?
http://www.farinspace.com/wordpress-media-uploader-integration/#comment-14671

I’d still like to see how to get the actual thumbs to show up for images instead of the links. Combine that with the sortable, and my gallery is gonna be so much better than it is now.

thanks
*everything else works perfectly, love the class and use it all the time
Ma'moun July 11, 2011 at 7:25 am | Permalink

It would be useful if we could also specify a default size for the image.
Ma'moun July 14, 2011 at 7:24 am | Permalink

Actually, returning the attachement ID would be so helpful. It’s even far more flexible than getting the image URL. (e.g. it can be used to get different sizes in the front-end template)
Ma'moun July 17, 2011 at 6:10 am | Permalink

@Dimas Any chance you can add the ability to get the file attachment IDs to MediaAccess Class?
Fabien August 8, 2011 at 9:41 am | Permalink

Thanks for that videos, it helps very much !

Keep going
kathy August 8, 2011 at 2:08 pm | Permalink

hi dimas- do you think you can put up a gist or paste the code you are using in your metabox template to get this to work. it is a bit tough to see in the video
Dimas August 8, 2011 at 2:34 pm | Permalink

@kathy, I will as soon as I get a moment, in the meanwhile you can view the video fullscreen in HD (which should help a little).
kathy August 9, 2011 at 7:24 am | Permalink

thanks dimas! i think it’d be much neater to have that folded into alchemy for me, but i’ve patched together something that i use all the time now though. it uploads, stores the url, attachment id and i think it tries to catch alt text too, pulls in a preview, and adds a delete button. the delete button removes the preview image and clears all those hidden fields. maybe you can make use of it if you ever get spare time for this again. you know, b/c i’m sure you have tons of that.

http://pastebin.com/kigpvmzq

nb: i have a constant WPALCHEMY which is defined elsewhere as just the URL to my alchemy folder
Melinda August 9, 2011 at 3:29 pm | Permalink

@kathy
Thanks for sharing your code! It helped me to pull the image into my metabox that shows the user which image they uploaded, instead of just the image url. What I really want to do is pull the thumbnail of that image into the metabox instead of the full size image. Do you have any idea how to do this?

Thanks!