Quantcast

Joel Nagy .com

web technology is a way of life

Archive for July, 2010

screen-shot-2010-07-28-at-35411-pm

Ever want to use the WordPress Media Gallery for inserting and managing images that you insert in a custom field?  Usually you would need to use the media buttons to add the image and copy and paste the URL to your custom field.  This is rather cumbersome and not really possible if you’ve decided to create a custom post-type that doesn’t use the description field.  With a little modification of a core file and your own custom post-type you can add some additional functionality to pop open the media gallery and insert the URL into your custom field, even display the thumbnail as well. This first block of code contains a javascript function that will respond to the link we’ll create in the media gallery to insert the URL of the chosen image into your custom field. The next bit of code is the custom label and input for the custom field. And then a link to call the Media Gallery. Here we’ve added a parameter called location that identifies the id of the new input.

<script type="text/javascript">
function JNSetCustomMedia(loc, url) {
alert(loc+':'+url);
	try {
		jQuery('#'+loc).attr('value', url);
	} catch (e) { }
}
</script>

<label class="customLabel">URL:</label><input class="customInput" name="myURL" id="myURL" value="<?php echo $URL; ?>" size="60" />

<a class="thickbox" id="set-post-thumbnail" href="media-upload.php?post_id=77&amp;type=image&amp;location=myURL&amp;TB_iframe=1&amp;width=640&amp;height=394" title="Upload custom image">Upload custom image</a>

Inside wp-admin/includes/media.php search for “WPSetAsThumbnail” and before the if statement that checks ($send || $thumbnail || $delete) you need to add this code to add our new code to the $thumbnail html so the URL for the image can be passed back:


if (isset($_GET['location'])) { // look for a call to place image into specific custom field
 		$thumbnail .= ' <a href="javascript:(window.dialogArguments || opener || parent || top).JNSetCustomMedia(\''. $_GET['location'] .'\',\''.
 wp_get_attachment_url($post->ID) .'\');" style="margin: 0 0 0 -15px !important;">Insert custom image</a>';
	}


I’ve only tested this with WordPress 3.0 so far. I’m going to look into adding this functionality as a plugin so that the core media.php file will not need to be edited.

UPDATE: I’ve written a way to insert the links in the media gallery using JavaScript.  It works for all 4 methods (From Computer, From URL, Gallery, and Media Library.)  The code isn’t fully optimized but works well, simply place in your plugin via a call to a function from add_action: add_action(”admin_head”, array(&$this, “admin_custom_head”));

<script type="text/javascript">
//<![CDATA[
// Attach all query vars to the window object for easy access
window.query = new Object();
window.query.length = 0;
window.location.search.replace(
	new RegExp('([^?=&]+)=([^&#]*)?', 'g'),
	// populate the object with the values by name
	function($0, $1, $2) { window.query[$1] = $2; window.query.length++; }
);

function noop() { return; }

function checkForMediaInsert(loc) {
	// If there are Insert into Post buttons we move forward
	if (loc == null || loc == '') return;

	var submit = jQuery('td.savesend input.button').add('#go_button');
	if (submit.length > 0)
		submit.each(function() {
			insertMediaLocation(jQuery(this), loc);
		});

	setTimeout('checkForMediaInsert("'+ loc +'");', 1750);
}

function insertMediaLocation($t, loc) {
	// If we have not already added the link add it
	if ($t == null || loc == null || loc == '') return;
	var $d = null, url = '', $loc = jQuery('#insert-'+loc), href = '';
	var noophref = 'javascript:noop();';
	var id = $t.attr('name').replace(/send\[(\d+)\]/, '$1');

	// Grab URL from either place based on where we are
	if ($t.attr('id') == 'go_button')
		url = jQuery('#src')[0].value;
	else if (id != '')
		url = jQuery('THEAD#media-head-'+id+' +TBODY .urlfile').attr('title');
	if (url == '')
		href = noophref;
	else
		href = 'javascript:(window.dialogArguments || opener || parent || top).JNSetCustomMedia(\''+ loc +'\',\''+ url +'\');';

	if (!$t.hasClass(loc)) {
		// Drop in the link
		$d = jQuery('<a id="insert-'+loc+'" href="'+ href +'" style="margin: 0 0 0 15px !important;">Insert hero image</a>');
		$t.addClass(loc);
		$t.after($d);
	} else if ($t.attr('id') == 'go_button') {
		// Update href on From URL as it can change
		$loc.attr('href', href);
	}

	// If we are on the From URL page color based on whether the image is good
	if ($t.attr('id') == 'go_button') {
		$d = $loc;
		$d.css('color', $t.css('color')); // Get the disabled color (or active, but that'll be changed if all good)
		var goodbutton = jQuery('#status_img img[src$="yes.png"]');
		if (goodbutton.length > 0)
			$d.css('color', jQuery('A:first').css('color'));
		else
			$loc.attr('href', noophref);
	}
}

jQuery(function() {
	// If we have a location request we move forward
	var loc = window.query['location'];
	if (loc == null || loc == '') return;
	setTimeout('checkForMediaInsert("'+ loc +'");', 250);
});
//]]>
</script>
Enhanced by Zemanta
  • 0 Comments
  • Filed under: Code
  • Facebook has taken their Like button a step further.  They now provide you the ability to Admin these Liked pages and send published wall posts as if they were a Fan page.  If you place a Like on your site, make sure to specify yourself as an admin via a meta tag:

    <meta content='NUMERIC_FB_ID_HERE' property='fb:admins'/>

    Then you can also get a view into your analytics via the Facebook insights. These pages show up in your “Ads & Pages” link that is now in the left nav (despite it never actually staying put if you choose Edit and move it up higher, but that’s cause Facebook likes to add features that aren’t quite ready for primetime.)

    Enhanced by Zemanta
  • 0 Comments
  • Filed under: Thoughts
  • In Other News...