Adding Categories to Media Library Images

Hi, what do you mean to populate a series of checkboxes? Have separate checkboxes for each category?

Regards

Nickolas

Hi Nickolas,

I’ve set up a number of categories with the idea that an image (or file) can be tagged with one or more categories – so I need a way of the user being able to select multiple categories and then adding them to an image (or file).

Does that make sense?

I was hoping there was a hook before the form is displayed where I could get a list of categories and make a checkbox for each one … but I’m open to other ways of doing it too.

Cheers,

Crac

Yes it can be done with a hook actually. Here is an example:

if (!function_exists('wfu_file_upload_output_custom_handler')) {
	function wfu_file_upload_output_custom_handler($output, $params) {
		$sid = $params["uploadid"];
		$fid = 1;
		$categories = array( "red", "blue", "green", "black" );
		$output .= "\n".'<input type="hidden" id="wfu_categories_'.$sid.'" value="'.implode(",", $categories).'" />'."\n";
		$output .= "
			<script type=\"text/javascript\">
			if(window.addEventListener) { window.addEventListener(\"load\", wfu_tweak_listbox, false); }
			else if(window.attachEvent) { window.attachEvent(\"onload\", wfu_tweak_listbox); }
			else { window[\"onload\"] = wfu_tweak_listbox; }
			var wfu_tweak_listbox = function() {
				var WFU = GlobalData.WFU[$sid];
				if (!WFU.userdata._getValue) WFU.userdata._getValue = WFU.userdata.getValue;
				WFU.userdata.getValue = function(props) {
					var field = document.getElementById('userdata_' + $sid + '_field_' + props.key);
					var value = '';
					if (props.type == 'list') {
						for (var i = 0; i < field.options.length; i++)
							if (field.options[i].selected) value += (value == '' ? '' : ',') + field.options[i].value;
					}
					else value = this._getValue(props);
					return value;
				}
				var categories = document.getElementById('wfu_categories_' + $sid).value.split(',');
				var findex = $fid - 1;
				var list = document.getElementById('userdata_' + $sid + '_field_' + findex);
				while (list.options.length > 0) list.options.remove(0);
				for (var i = 0; i < categories.length; i++) {
					var opt = document.createElement('OPTION');
					opt.value = categories[i];
					opt.innerHTML = categories[i];
					list.options.add(opt);
				}
				list.selectedIndex = -1;
				WFU.userdata.props[findex].store();
			}();
			</script>		
		";
		return $output;
	}
	add_filter('_wfu_file_upload_output', 'wfu_file_upload_output_custom_handler', 10, 2);
}

The above hook will manually create categories “red”, “blue”, “green” and “black” as an example and will put them in the first field (fid=1) which is a listbox. It will also make the listbox multiselect.

This is an example. Instead of colors, the script can read categories from an existing category list and put them in the field.

What categories do you want to show. Media categories?

Nickolas

Hi,

That’s great. I’ve made a few small modifications, but it’s all working – nothing actually wrong, just wanted to change the formatting a bit. Here’s my finished version, both modifying the form and adding the uploaded file to the Media Library with the sepected categories:

if ( isset($GLOBALS["WFU_GLOBALS"]["WFU_DEBUG"]) ) $GLOBALS["WFU_GLOBALS"]["WFU_DEBUG"][3] = "ON";

if (!function_exists('wfu_debug_wfu_process_media_insert_function_handler')) {
	function wfu_debug_wfu_process_media_insert_function_handler($res, $file_path, $userdata_fields, $page_id) {
		$wp_upload_dir = wp_upload_dir();
		$filetype = wp_check_filetype( wfu_basename( $file_path ), null );
		// create empty variables for the fields we are interested in
		$title = "";
		$caption = "";
		$description = "";
		$category = "";
		// go through each of the inputs and identify which ones we are interested in
		foreach ($userdata_fields as $fld) {
			if ($fld["label"] === "Title") {
				$title = ( isset($fld) && trim($fld["value"]) != "" ? trim($fld["value"]) : preg_replace( '/\.[^.]+$/', '', wfu_basename( $file_path ) ) );
			} elseif ($fld["label"] === "Caption") {
				$caption = ( isset($fld) ? $fld["value"] : "" );
			} elseif ($fld["label"] === "Description") {
				$description = ( isset($fld) ? $fld["value"] : "" );
			} elseif ($fld["label"] === "Category") {
				$category = explode(",", $fld["value"]);
			}
		}
		$attachment = array(
			'guid'           => $wp_upload_dir['url'] . '/' . wfu_basename( $file_path ), 
			'post_mime_type' => $filetype['type'],
			'post_title'     => $title,
			'post_content'   => $description,
			'post_excerpt'   => $caption,
			'post_status'    => 'inherit'
		);
		$attach_id = wp_insert_attachment( $attachment, $file_path, $page_id ); 
		require_once(ABSPATH . 'wp-admin/includes/image.php');
		$attach_data = wp_generate_attachment_metadata( $attach_id, $file_path );
		$update_attach = wp_update_attachment_metadata( $attach_id, $attach_data );
		// see if we can add some categories
		// get the ids for the selected categories
		$catIds = array();
		foreach ($category as $cat) {
			$catIds[] = term_exists($cat, "media_category")["term_id"];
		}
		// update the post with the category values
		wp_set_post_terms($attach_id, $catIds, "media_category");
		// categories done
		$filedata = wfu_get_filedata($file_path, true);
		if ( $filedata != null ) {
			$filedata["media"] = array( "type" => "data", "attach_id"	=> $attach_id );
			wfu_save_filedata_from_id($filedata["general"]["idlog"], $filedata);
		}
		$res["result"] = 'R';
		$res["output"] = $attach_id;
		return $res;
	}
	add_filter('wfu_debug-wfu_process_media_insert', 'wfu_debug_wfu_process_media_insert_function_handler', 10, 4);
	$GLOBALS['wfu_debug-wfu_process_media_insert'] = "1";
}

if (!function_exists('wfu_file_upload_output_custom_handler')) {
	function wfu_file_upload_output_custom_handler($output, $params) {
		$sid = $params["uploadid"];
		$fid = 4;
		// get a list of defined categories
		$categories = get_terms( array(
			'taxonomy' => 'media_category',
			'hide_empty' => false,
			'orderby' => 'name',
			'order'   => 'ASC'
		) );
		// get an array of name and slug values
		$cats = array();
		foreach ($categories as $cat) {
			$cats[] = $cat->name . "|" . $cat->slug;
		}
		// modify the list select
		$output .= "\n".'<input type="hidden" id="wfu_categories_'.$sid.'" value="'.implode(",", $cats).'" />'."\n";
		$output .= "
			<script type=\"text/javascript\">
			if(window.addEventListener) { window.addEventListener(\"load\", wfu_tweak_listbox, false); }
			else if(window.attachEvent) { window.attachEvent(\"onload\", wfu_tweak_listbox); }
			else { window[\"onload\"] = wfu_tweak_listbox; }
			var wfu_tweak_listbox = function() {
				var WFU = GlobalData.WFU[$sid];
				if (!WFU.userdata._getValue) WFU.userdata._getValue = WFU.userdata.getValue;
				WFU.userdata.getValue = function(props) {
					var field = document.getElementById('userdata_' + $sid + '_field_' + props.key);
					var value = '';
					if (props.type == 'list') {
						for (var i = 0; i < field.options.length; i++)
							if (field.options[i].selected) value += (value == '' ? '' : ',') + field.options[i].value;
					}
					else value = this._getValue(props);
					return value;
				}
				var categories = document.getElementById('wfu_categories_' + $sid).value.split(',');
				var findex = $fid - 1;
				var list = document.getElementById('userdata_' + $sid + '_field_' + findex);
				while (list.options.length > 0) list.options.remove(0);
				for (var i = 0; i < categories.length; i++) {
					var opt = document.createElement('OPTION');
					var cat = categories[i].split('|');
					opt.value = cat[1];
					opt.innerHTML = cat[0];
					list.options.add(opt);
				}
				list.selectedIndex = -1;
				list.size = list.length;
				WFU.userdata.props[findex].store();
			}();
			</script>		
		";
		return $output;
	}
	add_filter('_wfu_file_upload_output', 'wfu_file_upload_output_custom_handler', 10, 2);
}

Thanks for your help!

Cheers,

Crac

• This reply was modified 6 years, 4 months ago by crac1967.

Excellent!!!