WP 3.5 Compatible version (download here)
-
I needed this plugin to work with the most recent version of WordPress (3.5 right now) so I made some modifications and fixed some of the bugs so that the plugin works. (Not sure if it works on the Add Media pages though.)
Feel free to download it: https://github.com/blutz/media-credit
It’s not easily upgradeable from Scott’s latest version here (I removed the closing shortcode tag and its placement) so if someone wants to write a converter and test this, we can probably integrate everything back here.
-
What did you change exactly? I contacted Scott in early December and by Christmas had provided him with an early draft patch that fixed several bugs in conjunction with tinyMCE as well as the incompatibilities with 3.5. Unfortunately, I haven’t heard from him since his initial reply.
I am using the modified plugin on my personal blog and have found two additional issues that had to be dealt with. I’m thinking of forking the plugin to provide the community with a working (backwards compatible!) Media Credit plugin.
The plugin never worked out of the box for me because WP doesn’t parse shortcodes in the caption. I fixed that, fixed a few issues with the javascript, and fixed its interaction with WordPress’ AJAX save function. It’s just a lot of little details that didn’t quite work right.
I didn’t know Scott had made an updated one himself, so I posted this here in case anyone else wanted one that works now.
He hasn’t made an update yet, but I’ve send him several patches. I arrived at changes similar to yours, but without the calls to “click” etc. in the event handlers – seems to work fine for me. What I had to do was replace jquery.autocomplete with the newer jquery.ui.autocomplete, otherwise I would get JS conflicts on my production site. And it’s cleaner anyway ??
As for the TinyMCE bugs: I only ever edit in HTML mode, so I didn’t really notice. However, for these patches, I’ve fixed the conversion between shortcodes and TinyMCE-HTML. Previously, the closing shortcode tag would remain. If that was the problem you had, my fix doesn’t change the shortcode syntax and therefore is (AFAIK) completely backward compatible.
Do you know of any way to fix the closing shortcode tag? (Or did you just manually remove it?) The only reason I changed to a single tag is because of that (I didn’t want to make my users remove it every time).
Yeah, you have to handle an additional event in the TinyMCE plugin. Since I haven’t heard from Scott yet, I will post my patch here once I’ve removed the dependency to livequery (it’s unnecessary with jquery.on, but I’m still fine-tuning some details).
Trying to use your plugin, but it doesn’t seem to be working with the lastest nightly builds. The issue appears to be that the media credit doesn’t parse within the caption shortcode once again.
Is this something you’re working on, or should I fork and get my hands dirty?
Well shoot. I guess I should be trying it on the nightly builds. Thanks for pointing this out!
I won’t be able to work on this for a week or two so if either of us is working on it let’s make sure everyone knows. (Feel free to fork/pull request my repo.)
Right now WP >=3.5 support is pretty hacked (it’s not way WP wants us to deal with the new media dialog) so it sounds like part of it might just need a re-write so it won’t cause issues down the line. (Plus I think this plugin should have a better autocomplete form — the current one doesn’t play nicely with the media dialog — and guest author support to work with co-authors plus.)
Also I had never worked with TinyMCE when I was making my version of the plugin so I had it just display the shortcode (instead of the credit) in TinyMCE. (I was on a really tight deadline.)
Hi folks!
Sorry for the extraordinarily long absence. I’d love to get a new version of MC released that works for 3.5/3.6, etc. Byron and Peter, I just e-mailed you both individually, but I figured keeping the conversation in public here would be best.
Peter, did your latest patch fix all issues and maintain backward compatibility? TinyMCE integration, autocomplete, etc. Does it take into account the details in this post? I’m working to get Media Credit set up on GitHub, but until then, can you link to it somewhere?
Thanks, all!
All the best,
ScottGreat to hear from you! Yes, my patch does take the info from the 3.5-field-guide into account.
However, I’ll have to double check if it really fixes everything. I’ve had some intermittent trouble getting the MC to stick while editing image metadata in the new media modal. However, that coincided with a migration of my site to a new server with some “experimental” settings, so it might not be pertinent.
I’ll try to find a place to make the patch available for download tomorrow.
Addendum: TinyMCE integration and autocomplete are working, the custom fields are fully backward compatible.
This is great news, guys. As I said, I’m rebuilding my databases, so generating the media credit tag structure is as simple as rerunning my script.
However, It would be great if a double tag/single tag decision was made so that I could start pulling things together (even if it didn’t quite work on the front end yet).
Will, I doubt we’d be switching to a single tag structure as Byron’s fork does since migration would be a pain. I could only see that being necessary if WP core forces our hand, which I’d hope recent releases haven’t required.
It’s great to have you back, Scott! My fork was a really quick fix — I had about 2 days to get it working and to launch a site on WP 3.5 so it’s fine if we don’t use what I did. (For instance, I couldn’t get the double tag system to work quickly so I just gave up and switched to single tag.)
I’ve been using my fork of the plugin since January and (I know we’re need to tackle WP 3.6 compatibility first) my biggest annoyance is the dropdown/autocomplete menu rarely actually works/sticks (and is visually a little confusing).
Also IIRC WP 3.5+ wants plugin devs to use new hooks to interface with the new media dialog but my fork just hacks the old ones until they work.
I think I’ve cleaned up the patch sufficiently (except for version numbers, which I had to adapt to differentiate between the different versions of the plugin).
diff -urw media-credit.orig/css/jquery.autocomplete.css media-credit/css/jquery.autocomplete.css --- media-credit.orig/css/jquery.autocomplete.css 2012-12-17 00:49:35.000000000 +0100 +++ media-credit/css/jquery.autocomplete.css 2013-01-03 15:09:58.000000000 +0100 @@ -1,48 +1,9 @@ +/* Old jquery-autocomplete plugin */ .ac_results { - padding: 0px; - border: 1px solid black; - background-color: white; - overflow: hidden; - z-index: 99999; + z-index: 2000000 !important; /* to ensure visibility with media modal in WP >= 3.5 */ } -.ac_results ul { - width: 100%; - list-style-position: outside; - list-style: none; - padding: 0; - margin: 0; -} - -.ac_results li { - margin: 0px; - padding: 2px 5px; - cursor: default; - display: block; - /* - if width will be 100% horizontal scrollbar will apear - when scroll mode will be used - */ - /*width: 100%;*/ - font: menu; - font-size: 12px; - /* - it is very important, if line-height not setted or setted - in relative units scroll will be broken in firefox - */ - line-height: 16px; - overflow: hidden; -} - -.ac_loading { - background: white url('indicator.gif') right center no-repeat; -} - -.ac_odd { - background-color: #eee; -} - -.ac_over { - background-color: #0A246A; - color: white; +/* New jquery-ui-autocomplete plugin */ +.ui-selectmenu-menu { + z-index: 2000000 !important; /* to ensure visibility with media modal in WP >= 3.5 */ } Only in media-credit/js: GPL_LICENSE.txt Only in media-credit/js: MIT_LICENSE.txt Only in media-credit.orig/js: jquery.autocomplete.pack.js diff -urw media-credit.orig/js/media-credit-autocomplete.js media-credit/js/media-credit-autocomplete.js --- media-credit.orig/js/media-credit-autocomplete.js 2012-12-17 00:49:35.000000000 +0100 +++ media-credit/js/media-credit-autocomplete.js 2013-08-04 19:39:48.000000000 +0200 @@ -1,45 +1,57 @@ function mediaCreditAutocomplete(id, currAuthorId, currAuthor) { var PLUGIN_DIR = "../wp-content/plugins/media-credit/"; //TODO: better way to do this? - var inputField = "input.[id='attachments[" + id + "][media-credit]']" + var inputField = "input#attachments\\[" + id + "\\]\\[media-credit\\]"; jQuery(inputField) .click(function() { this.select(); if (this.value == currAuthor) { - // this.value = ""; removeID(id); } + }) .blur(function() { if (this.value == "") { - /* - this.value = currAuthor; - addID(id, currAuthorId); - */ removeID(id); } }) - /* --- For jQuery UI autocomplete + /* --- For jQuery UI autocomplete */ .autocomplete({ - source: PLUGIN_DIR + "search.php", + source: function(request, response) { + jQuery.post(ajaxurl, + { action: 'media_credit_author_names', + term: request.term, + limit: 100 }, + function(data) { response(data); }, "json"); + }, minLength: 2, select: function(event, ui) { + console.log("select-event"); addID(id, ui.item.id); - } - })*/ - .autocomplete(ajaxurl, { - // delay: 200 - extraParams: { action: 'media_credit_author_names' } - }) - .result(function(event, data, formatted) { - addID(id, data[1]); + }, + open: function(){ + jQuery(this).autocomplete('widget').css('z-index', 2000000); + return false; + }, }); } function addID(id, author) { - jQuery("#media-credit-" + id).attr("value", author); + jQuery("#attachments\\[" + id + "\\]\\[media-credit-hidden\\]").attr("value", author); } function removeID(id) { - jQuery("#media-credit-" + id).attr("value", ""); + jQuery("#attachments\\[" + id + "\\]\\[media-credit-hidden\\]").attr("value", ""); } + +function setupMediaCreditAutocomplete() { + that = jQuery('.media-credit-hidden'); + + myData = that.data(); + mediaCreditAutocomplete(myData.postId, myData.author, myData.authorDisplay); +} + + +jQuery(document).ready(function() { + jQuery(document).on('focusin', '.media-credit-input:not(.ui-autocomplete-input)', null, setupMediaCreditAutocomplete); +}); \ No newline at end of file diff -urw media-credit.orig/js/media-credit-tinymce.js media-credit/js/media-credit-tinymce.js --- media-credit.orig/js/media-credit-tinymce.js 2012-12-17 00:49:35.000000000 +0100 +++ media-credit/js/media-credit-tinymce.js 2012-12-17 00:24:20.000000000 +0100 @@ -4,9 +4,28 @@ init : function(ed, url) { var t = this; - t.url = url; + ed.onInit.add(function(ed) { + ed.dom.events.add(ed.getBody(), 'mousedown', function(e) { + var parent; + + if ( e.target.nodeName == 'IMG' && ( parent = ed.dom.getParent(e.target, 'div.mceTemp') ) ) { + if ( tinymce.isGecko ) + ed.selection.select(parent); + else if ( tinymce.isWebKit ) + ed.dom.events.prevent(e); + } + }); + }); + + //replace shortcode as its inserted into editor (which uses the exec command) + ed.onExecCommand.add(function(ed, cmd) { + if (cmd ==='mceInsertContent'){ + tinyMCE.activeEditor.setContent( t._do_shcode(tinyMCE.activeEditor.getContent()) ); + } + }); + ed.onBeforeSetContent.add(function(ed, o) { o.content = t._do_shcode(o.content); }); @@ -18,7 +37,10 @@ }, _do_shcode : function(co) { - return co.replace(/\[media-credit([^\]]+)\]([\s\S]+?)\[\/media-credit\][\s\u00a0]*/g, function(a,b,c){ + //return co.replace(/\[media-credit([^\]]+)\]([\s\S]+?)\[\/media-credit\][\s\u00a0]*/g, function(a,b,c){ + // changed regexp to mirror the shortcode for wp-caption + return co.replace(/(?:<p>)?\[media-credit([^\]]+)\]([\s\S]+?)\[\/media-credit\](?:<\/p>)?/g, function(a,b,c){ + var id, name, cls, w, credit, div_cls; b = b.replace(/\\'|\\'|\\'/g, ''').replace(/\\"|\\"/g, '"'); @@ -38,7 +60,7 @@ div_cls = (cls == 'aligncenter') ? 'mceMediaCredit mceTemp mceIEcenter' : 'mceMediaCredit mceTemp'; - return '<div class="'+div_cls+'" draggable><span name="'+name+'" id="'+id+'" class="media-credit-mce '+cls+'" style="width: '+(10+parseInt(w))+ + return '<div class="'+div_cls+'"><span name="'+name+'" id="'+id+'" class="media-credit-mce '+cls+'" style="width: '+(10+parseInt(w))+ 'px"><span class="media-credit-dt">'+c+'</span><span class="media-credit-dd">'+credit+'</span></span></div>'; }); }, @@ -47,6 +69,7 @@ return co.replace(/<div class="mceMediaCredit mceTemp[^"]*">\s*<span([^>]+)>\s*<span[^>]+>([\s\S]+?)<\/span>\s*<span[^>]+>(.+?)<\/span>\s*<\/span>\s*<\/div>\s*/gi, function(a,b,c,name){ var id, cls, w; + //id = b.match(/id=['"]([^'"]+)/i); //name = b.match(/name=['"]([^'"]+)/i); cls = b.match(/class=['"]([^'"]+)/i); diff -urw media-credit.orig/media-credit.php media-credit/media-credit.php --- media-credit.orig/media-credit.php 2012-12-19 21:45:00.000000000 +0100 +++ media-credit/media-credit.php 2013-08-04 19:37:19.000000000 +0200 @@ -3,7 +3,7 @@ Plugin Name: Media Credit Plugin URI: https://www.scottbressler.com/blog/plugins/media-credit/ Description: This plugin adds a "Credit" field to the media uploading and editing tool and inserts this credit when the images appear on your blog. -Version: 1.1.2 +Version: 1.1.101 Author: Scott Bressler Author URI: https://www.scottbressler.com/blog/ License: GPL2 @@ -152,19 +152,29 @@ $credit = get_media_credit($post); // add requirement for jquery ui core, jquery ui widgets, jquery ui position $html = "<input id='attachments[$post->ID][media-credit]' class='media-credit-input' size='30' value='$credit' name='attachments[$post->ID][media-credit]' />"; - $author = ( get_freeform_media_credit($post) == '' ) ? $post->post_author : ''; - $author_display = get_media_credit($post); - $html .= "<input name='media-credit-$post->ID' id='media-credit-$post->ID' type='hidden' value='$author' />"; - $html .= "<script type='text/javascript'>jQuery(document).ready(function() {mediaCreditAutocomplete($post->ID, " . (($author == '') ? -1 : $author) . ", '$author_display');});</script>"; $fields['media-credit'] = array( 'label' => __('Credit:'), 'input' => 'html', - 'html' => $html + 'html' => $html, + 'show_in_edit' => true, + 'show_in_modal' => true, + ); + + $author = ( get_freeform_media_credit($post) == '' ) ? $post->post_author : ''; + $author_display = get_media_credit($post); + $author_for_script = ($author == '') ? -1 : $author; + $html_hidden = "<input name='attachments[$post->ID][media-credit-hidden]' id='attachments[$post->ID][media-credit-hidden]' type='hidden' value='$author' class='media-credit-hidden' data-author='$author_for_script' data-post-id='$post->ID' data-author-display='$author_display' />"; + $fields["media-credit-hidden"] = array( + 'input' => 'html', + 'html' => $html_hidden, + 'show_in_edit' => true, + 'show_in_modal' => true, ); return $fields; } add_filter('attachment_fields_to_edit', 'add_media_credit', 10, 2); + /** * Change the post_author to the entered media credit from add_media_credit() above. * @@ -172,8 +182,9 @@ * @param object $attachment Object of attachment containing few fields, unused in this method. */ function save_media_credit($post, $attachment) { - $wp_user_id = $_POST["media-credit-{$post['ID']}"]; - $freeform_name = $_POST["free-form-{$post['ID']}"]; + $wp_user_id = $attachment['media-credit-hidden']; + $freeform_name = $attachment['media-credit']; + if ( isset( $wp_user_id ) && $wp_user_id != '' && $freeform_name === get_the_author_meta( 'display_name', $wp_user_id ) ) { // a valid WP user was selected, and the display name matches the free-form // the final conditional is necessary for the case when a valid user is selected, filling in the hidden field, @@ -236,18 +247,13 @@ function send_media_credit_to_editor_by_shortcode($html, $attachment_id, $caption, $title, $align) { $post = get_post($attachment_id); $credit_meta = get_freeform_media_credit($post); + if ( $credit_meta == MEDIA_CREDIT_EMPTY_META_STRING ) return $html; else if ( $credit_meta != '' ) $credit = 'name="' . $credit_meta . '"'; else { $credit = 'id=' . $post->post_author; - // Add the new author to the $mediaCredit object in the DOM that TinyMCE will use - echo " - <script type='text/javascript'> - window.parent.\$mediaCredit.id[" . $post->post_author . "] = '" . get_the_author_meta( 'display_name', $post->post_author ) . "'; - </script> - "; } if ( ! preg_match( '/width="([0-9]+)/', $html, $matches ) ) @@ -344,10 +350,10 @@ //----- Add AJAX hook for Media Credit autocomplete box ----// -// hit ajaxurl with action=media_credit_author_names and q= your search. +// hit ajaxurl with action=media_credit_author_names and term= your search. add_action( 'wp_ajax_media_credit_author_names', 'media_credit_author_names_ajax' ); function media_credit_author_names_ajax() { - if ( ! isset( $_GET['q'] ) ) { + if ( ! isset( $_POST['term'] ) ) { die('0'); // standard response for failure } @@ -355,10 +361,11 @@ die('-1'); // standard response for permissions } - if ( isset( $_GET['q'] ) ) { - if ($authors = get_editable_authors_by_name( wp_get_current_user()->id, $_GET['q'], $_GET['limit'] ) ) { + if ( isset( $_POST['term'] ) ) { + if ($authors = get_editable_authors_by_name( wp_get_current_user()->id, $_POST['term'], $_POST['limit'] ) ) { foreach ( $authors as $author ) - echo "$author->display_name|$author->ID\n"; + $results[] = (object) array("id"=>$author->ID, "label"=>$author->display_name, "value"=>$author->display_name); + echo json_encode($results); } echo ''; } @@ -432,8 +439,7 @@ wp_enqueue_script( 'media-credit', MEDIA_CREDIT_URL . 'js/media-credit-preview.js', array('jquery'), 1.0, true); if ( is_media_edit_page( ) ) { - wp_enqueue_script('jquery-autocomplete', MEDIA_CREDIT_URL . 'js/jquery.autocomplete.pack.js', array('jquery'), '1.1'); - wp_enqueue_script('media-credit-autocomplete', MEDIA_CREDIT_URL . 'js/media-credit-autocomplete.js', array('jquery', 'jquery-autocomplete'), '1.0', true); + wp_enqueue_script('media-credit-autocomplete', MEDIA_CREDIT_URL . 'js/media-credit-autocomplete.js', array('jquery', 'jquery-ui-autocomplete' /*, 'jquery-livequery'*/), '1.2', true); } // Don't bother doing this stuff if the current user lacks permissions as they'll never see the pages @@ -449,7 +455,7 @@ // TinyMCE integration hooks function media_credit_mce_external_plugins( $plugins ) { $options = get_option( MEDIA_CREDIT_OPTION ); - $authors = get_media_credit_authors_for_post(); + $authors = get_users(); //get_media_credit_authors_for_post(); echo " <script type='text/javascript'> var \$mediaCredit = { @@ -551,7 +557,8 @@ function is_media_edit_page( ) { global $pagenow; - $media_edit_pages = array('post-new.php', 'post.php', 'page.php', 'page-new.php', 'media-upload.php', 'media.php', 'media-new.php'); + $media_edit_pages = array('post-new.php', 'post.php', 'page.php', 'page-new.php', 'media-upload.php', 'media.php', 'media-new.php', 'ajax-actions.php'); + return in_array($pagenow, $media_edit_pages); } diff -urw media-credit.orig/readme.txt media-credit/readme.txt --- media-credit.orig/readme.txt 2012-12-17 00:49:35.000000000 +0100 +++ media-credit/readme.txt 2013-01-03 21:44:53.000000000 +0100 @@ -1,10 +1,10 @@ === Media Credit === -Contributors: sbressler +Contributors: sbressler, pputzer Donate link: https://www.scottbressler.com/blog/plugins/ Tags: media, image, images, credit, byline, author, user -Requires at least: 2.8 -Tested up to: 3.1 -Stable tag: 1.1.2 +Requires at least: 3.5 +Tested up to: 3.5 +Stable tag: 1.2 Adds a "Credit" field when uploading media to posts and displays it under the images on your blog to properly credit the artist. @@ -88,6 +88,10 @@ == Changelog == += 1.2 (Jan. 3, 2013) = +* Compatibility with WordPress 3.5 +* Fixes for bugs in Visual editor + = 1.1.2 (Mar. 1, 2011) = * Fixes total autocomplete failure on WordPress 3.1 * Fixes freeform credit situation where a user was selected but freeform text was entered afterward diff -urw media-credit.orig/search.php media-credit/search.php --- media-credit.orig/search.php 2012-12-17 00:49:35.000000000 +0100 +++ media-credit/search.php 2013-08-04 19:37:41.000000000 +0200 @@ -1,61 +1,5 @@ <?php -if ( isset( $_GET['q'] ) ) { - $dir = "../../.."; - require_once("$dir/wp-config.php"); - require_once("$dir/wp-admin/includes/user.php"); - require_once("$dir/wp-includes/user.php"); - if ($authors = get_editable_authors_by_name( $current_user->id, $_GET['q'], $_GET['limit'] ) ) { - foreach ( $authors as $author ) - echo "$author->display_name|$author->ID\n"; - - /* --- For jQuery UI autocomplete: - foreach ( $authors as $author ) - $results[] = (object) array("id"=>$author->ID, "label"=>$author->display_name, "value"=>$author->display_name); - echo json_encode($results); - */ - } - echo ''; -} - -/** - * Returns the users that are editable by $user_id (normally the current user) and that contain $name within their - * display name. Important to use this function rather than just selected all users for WPMU bloggers. - * - * Basis for this function is proudly stolen from wp-{admin/}includes/user.php :) - */ -function get_editable_authors_by_name( $user_id, $name, $limit ) { - global $wpdb; - - // get_editable_user_ids was deprecated in WordPress 3.1 and moved to a file that does not get included above, so - // if the function doesn't exist, then we know we're on a site at WP >= 3.1. Let's used some non-deprecated - // goodness instead. - if ( function_exists ( 'get_editable_user_ids' ) ) { - $editable = get_editable_user_ids( $user_id ); - } else { - $editable = get_users( array( - 'who' => 'authors', - 'include_selected' => true - ) ); - } - - if ( !$editable ) { - return false; - } else { - $editable = join(',', $editable); - // Prepare autocomplete term for query: add wildcard after, and replace all spaces with wildcards - $name = str_replace( ' ', '%', $name ) . '%'; - $authors = $wpdb->get_results( $wpdb->prepare( " - SELECT ID, display_name - FROM $wpdb->users - WHERE ID IN ($editable) - AND upper(display_name) LIKE %s - ORDER BY display_name - LIMIT 0, $limit", - strtoupper($name) )); - } - - return apply_filters('get_editable_authors_by_name', $authors, $name); -} +/* Not needed anymore */ ?>Has anyone tried out the patch?
Still looking for a solution here.
We’re going live with our new website early next week. My final import will probably include the double tag version, and I’ll just hide them in functions.php until I have time to tackle a patch myself.
Pepe, looks like you just posted a diff here. Do you have a repo somewhere so I can get at the code?
- The topic ‘WP 3.5 Compatible version (download here)’ is closed to new replies.
