Feature Request: New Media Uploader

[purethemes]

Hi, I'm not sure if and when the old thickbox will be removed, but it's been a while since we have this new awesome Media Uploader, and I was wondering if you have in plans adding it? I've tried myself but I've run across some issues, I'm not that smart yet ;) Cheers

[Pixelous]

+1

Would be great also to implement gallery metabox like in WooCommerce plugin.

Derek you can download WooCommerce and look at their code here http://www.woothemes.com/woocommerce/

This feature very useful especially for photographer themes.

@valendesigns do you have a time on this?

[purethemes]

Hi Pixelous, I don't agree with you, this is nice feature but it's quite specific for woocommerce, I've done something similar for my theme http://www.youtube.com/watch?v=nGmoso0-PS8 I'll share the code tomorrow, I need to clean it up a little. However that's just solution for one type of field, but I think upgrading OptionTree to use new Media Uploader instead of old thickbox is more important than "eye candy" features like you've suggested ;)

[Pixelous]

OMG! @purethemes that's exactly I am looking for! Please share the code! I'll give a comment to your profile page in comments above the code!

By the way is it difficult to create a video url field for each image?

[purethemes]

@Pixelous I'll try to find some free time soon to post it as a plugin on github. It's just for images, and it's solely for the Media Uploader, so adding some other fields with Video url, would be tricky.

@anonumus because user would have to first set Post Type and save the post/page as a draft to see the fields, and that sucks imho. No one complained about how is this done now ;) Cheers

[htvu]

Here is my code for new Media Upload https://gist.github.com/htvu/5355294 Instead modify OptionTree code directly, I register a script and make sure it's loaded after OptionTree JS.

[Pixelous]

@htvu thanks for sharing! Can you please describe how to use your code?

[Pixelous]

@purethemes can you please share with the code this week?

As for video url maybe this can help? http://thisismyurl.com/wordpress/plugins/add-custom-fields-to-media/

[htvu]

I used following code in functions.php:

        add_action( 'admin_enqueue_scripts', 'ot_enhanced_scripts', 12 );
        if ( ! function_exists( 'ot_enhanced_scripts' ) ) {
            function ot_enhanced_scripts() {
                if ( 'toplevel_page_ot-theme-options' == get_current_screen() -> id ) {
                    if ( function_exists( 'wp_enqueue_media' ) ) {
                        wp_enqueue_media();
                    }
                }
                wp_enqueue_script( 'ot-enhanced-js', FRAMEWORK_JS . 'ot-enhanced.js', array( 'jquery' ), '', true );
            }
        }

ot-enhanced.js content is the code in my previous comment. By this way I don't have to care about OT updates, OT theme mode or plugin mode. If your WP version older than 3.5 my JS will not execute so OT use old media upload.

[Pixelous]

@htvu really thanks but I don't see any HTML structure of a meta box. So you gave JavaScript part and what about other? Can you explain more detail please?

[Pixelous]

@purethemes any news about your code?

[htvu]

@Pixelous this function call in JS generate HTML: wp.media.editor.open($(this));. Unless you need to customize Media Upload layout, you will need call media API to generate HTML.

[Pixelous]

@htvu have added your code but don't see any galleries. Where it's supposed to be?

[htvu]

It's showed when you click blue button of OT's Upload field. Make sure you don't make mistake. Check firebug console for error (script loaded ok ?) Of course you must use WP 3.5+.

[Pixelous]

@anonumus yeah! I have understood it right now! Still looking for a good solution. Will try to look at WooCommerce gallery code.

[htvu]

@anonumus thanks for your explanation. I just followed the topic title. @Pixelous now I understand your issue. I have some solutions for you:

1. If you just want to have a function like the video above, just create a simple ajax script to load page/post attach images and show it in metabox. The limit of solution is the list in metabox just show as a preview.
2. Use an ajax script to fetch images from page/post gallery to a List Item of OT. This solution is more flexible because it give you abilities to interact with image list in metabox directly (ordering, add title/desc for each image...) and it also reserve page/post gallery for other purpose. Currently, I'm using this one.
3. Use wp.media API to set multi selection for Media Upload. This solution maybe use for global options.

Here is my implement for image list (List Item).

[Pixelous]

Guys thank you for all your answers! Seems I am going to use a code from WooThemes guys. Just a question it's possible to add custom field (video url) to images? Please see the screenshot. If it's possible then another question how bad is for the WordPress database?

[purethemes]

Guys, sorry but I was quite busy, so here's the code, not cleaned ;) https://gist.github.com/purethemes/5381815 just don't forget to enquee JS and CSS

[valendesigns]

@purethemes Well done!

[ghost]

Just tested it on a side project I'm working on and it works like a charm!

Thank you!

[Pixelous]

Hi guys!

I have done the gallery with a help of WooThemes code and a developer I hired and set up video link URL as well. If anyone interesting just let me know.

[valendesigns]

Please post your code. Having multiple examples to work with when I start integrating would be great.

[Pixelous]

@valendesigns here is the code how I add metabox with gallery. Note that I add meta boxes not via OptionTree but like described here http://codex.wordpress.org/Function_Reference/add_meta_box I don't think it's a problem to add meta boxes via OptionTree actually.

https://gist.github.com/Pixelous/5383213

Then CSS part (sorry for classes and id's, need to rename of course):

/**
 * Loads a set of CSS and/or Javascript documents. 
 */
function mega_enqueue_admin_scripts($hook) {
    wp_register_style( 'admin.custom', get_template_directory_uri() . '/inc/css/admin.custom.css' );
    if( $hook != 'edit.php' && $hook != 'post.php' && $hook != 'post-new.php' ) 
        return;
    wp_enqueue_style( 'admin.custom' );
}
add_action( 'admin_enqueue_scripts', 'mega_enqueue_admin_scripts' );

/* Write Panels */
#wp-excerpt-editor-container {
    background: #fff;
}
#portfolio_variation-parent #parent_id {
    width: 100%;
}
#postimagediv img {
    border: 1px solid #d5d5d5;
    max-width: 100%;
}
.inside {
    margin: 0;
    padding: 0;
}
.add_portfolio_images {
    padding: 0;
}
#portfolio_images_container {
    padding: 0;
    margin: 1em 0;
}
#portfolio_images_container ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
#portfolio_images_container li.image,
#portfolio_images_container li.add,
#portfolio_images_container li.wc-metabox-sortable-placeholder {
    width: 80px;
    height: 80px;
    overflow: hidden;
    float: left;
    cursor: move;
    border: 1px solid #d5d5d5;
    margin: 9px 9px 0 0;
    background: #f7f7f7;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    position: relative;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
#portfolio_images_container img {
    width: 100%;
    height: auto;
    display: block;
}
#portfolio_images_container li.wc-metabox-sortable-placeholder {
    border: 4px dashed #dddddd;
    background: #f7f7f7 url(../images/image_watermark.png) no-repeat center;
}
#portfolio_images_container ul.actions {
    position: absolute;
    top:0;
    right: 0;
    padding: 2px;
    display: none;
}
#portfolio_images_container li {
    background: #eee;
    border: 1px solid #ddd;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding: 1px;
    float: right;
    margin: 0 0 0 2px;
}
#portfolio_images_container a {
    width: 10px;
    padding: 10px 0 0 0;
    margin: 0;
    height: 0;
    display: block;
    overflow: hidden;
}
#portfolio_images_container a.view {}
#portfolio_images_container a.delete {
    background: url(../images/icons/delete_10.png) no-repeat top left;
}
#portfolio_images_container li:hover ul.actions {
    display: block;
}

And images for CSS:

And how I add custom field (video link URL) to new WP media uploader. The code I took here http://core.trac.wordpress.org/ticket/22759 but in WP Codex seems the same http://codex.wordpress.org/Plugin_API/Filter_Reference/attachment_fields_to_edit

The only not a critical problem is that how to determine whether or not to show a field in a given situation. For example in a specific post type.

add_action( 'init', 'mega_init' );
function mega_init() {
        register_taxonomy_for_object_type( 'category', 'attachment' );
}
add_filter( 'attachment_fields_to_edit', 'mega_attachment_fields_to_edit', 10, 2 );
function mega_attachment_fields_to_edit( $fields, $post ) {
        $fields['mega-attachment-video-url'] = array(
            'label' => 'Video URL',
            'input' => 'text',
            'value' => get_post_meta( $post->ID, 'mega-attachment-video-url', true ),
            'show_in_edit' => false,
        );
        return $fields;
}
/**
 * Save Custom Values in media uploader.
 */
function mega_attachment_field_custom_save( $post, $attachment ) {
    if ( isset( $attachment['mega-attachment-video-url'] ) )
        update_post_meta( $post['ID'], 'mega-attachment-video-url', $attachment['mega-attachment-video-url'] ); 

    return $post;
}
add_filter( 'attachment_fields_to_save', 'mega_attachment_field_custom_save', 10, 2 );

The result:

[Pixelous]

@anonumus Yeah I see :( Trying to edit.

[Pixelous]

@anonumus put in a gist the main php part. Should looks fine now.

[valendesigns]

I've integrated the media uploader code from the gist https://gist.github.com/htvu/5355294 supplied by @htvu and is now in the wip branch. As far as the gallery options, I've not yet started in on that. I'll create a new issue and link to the code here.