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.
Great Dimas! I’ve briefly tested and so far it works like a champ. Very nice work.
great work Dimas , and great class but media upload have an error with multifields every field take the same value
@leon, just added a new video demo using repeating fields. Hope that helps!
thanks Dimas your great .. keep it up
Thank you again Dimas,
I waited this feature for a long time and it will be very useful for everybody i’m sure
I will test this uploader as soon as possible and give you feedback if i see a bug.
I implemented the media upload class to my project by remplacing a simple input file by the uploader. Every things work well in the backoffice. However on the front, my data don’t display anymore.
Do i need to change something in my template too ?
The code in my back_metabox.php file:
setGroupName('img-n'.$mb->get_the_index())->setInsertButtonLabel(__('Insert the url image in the field','aeronef')); ?>
getField(array('name'=>$mb->get_the_name('imgUrl'),'value'=>$mb->get_the_value('imgUrl'))); ?>
getButton(); ?>
The code in my front_template.php file:
global $custom_metabox_slider;
$custom_metabox_slider->the_meta();
?>
have_fields('slide')) { ?>
<img src="the_value('imgUrl'); ?>">
get_the_value('slideCaption')!='') { ?>
the_value('slideCaption') ?>
$custom_metabox_slider->the_value(‘slideCaption’) display but not the image : $custom_metabox_slider->the_value(‘imgUrl’);
Sorry, it seems there is some problem with the
markup in my prev. comment. My code is not fully displayed ...@pixenjoy, try https://gist.github.com/ … and repost your code, I’ll modify or delete your comments above…
Hello Dimas,
This is back_metabox.php (work well)
https://gist.github.com/913221
This is front_template.php (baseline display but not imgUrl data)
https://gist.github.com/913217
When imgUrl was a simple input field it display.
bug again Dimas with multifields it’s like duplication error watch this
goo.gl/7qooY
and watch this another error
goo.gl/Oo3Br
best regards
@pixenjoy, can you confirm by looking inside the
wp_postmetafor the meta data related to the particular post, you are basically looking for the php serialized array data … looking to see ifimgUrlis indeed somewhere in there.@leon confirm you are using WPAlchemy_MetaBox 1.4.5
@Dimas Confirmed i use WPAlchemy 1.4.5 , release date : 6/4/2011
Hi Dimas!
Thanks for this. I owe you a few hundred beers and/or teas and/or coffees for making my life 100x easier.
I wanted to contribute something that I’ve personally found very useful over the past couple of days while building a custom portfolio for a photographer. I found myself longing for the actual attachment ID, plus I wanted to populate a preview area so the client can see the image she just put in her portfolio. So around line 325 of MediaAccess.php I added the following:
http://pastebin.com/SLWhkbnm
Hopefully others will find this equally useful since it opens a whole new level of media management goodness via AJAX and the various built-in WP image manipulation functions.
Cheers!
@Dameian, thanks for the code, I will integrate, the attachment ID is also very useful.
Dimas,
Yes, i see an imgUrl value in my wp_metadata table. This is a phpmyadmin screenshot of what i see in the meta_value field : http://www.pixenjoy.com/documents/screenshot.png
any solution for my problem ?
@leon, use https://gist.github.com/ and show my your: MetaBox/MediaAccess definition and your meta box content
@pixenjoy, do you get any output if you do:
var_dump($custom_metabox_slider->get_the_value('slide') );and is “imgUrl” in there?
I put the var_dump() just before the “while” as you can see here : https://gist.github.com/913217
And yes, i’ve got some output … imgUrl is in there : http://www.pixenjoy.com/documents/screenshot2.png
So when you view source you see (blank image):
Also when you can see the image in the browser with:
Yes, img src is empty in my source code: http://www.pixenjoy.com/documents/screenshot3.png
But
http://localhost/public/wordpress/wp-content/uploads/2011/03/background4-300x194.jpg
display my image in the browser.
For anyone using WP Alchemy + the media uploader helper to on custom post types… I just wanted to mention this in case someone else hits the same wall I just did:
If using custom post types and you do not have/want/need the visual editor capability enabled for that custom post type, you will lose the the ability to insert uploaded images. The button in the media manager window simply won’t be there for images uploaded through your custom post type.
To get around this, what you can do is enable the editor capability when setting up the custom post type, then just add this to a css file that only loads when editing that particular post type:
#postdivrich {
display: none;
}
Not ideal, but it works.
This may also be useful. Here is the conditional code I use to limit the loading of css to my custom post type editing page(s) so you don’t make every visual editor disappear:
http://pastebin.com/3crj3027
@Dameian in the WpALchemy it’s attr call hide_editor if you set it true the editor will gone and the insert button will come
@leon Hah! Yeah. I had a bit of a headsmacking moment last night when I ran across that while looking through all the functions for something unrelated.
I’ve found the bug ! Your code is ok Dimas, the error was in my script.
Sorry to wasted your time.