WEB | MOBILE | MULTIMEDIA

HOW TO GET MEDIA URL FROM WORDPRESS MEDIA LIBRARY

 

Sometimes in the course of custom development, you might need to get the URL of media uploaded or already existing in the WordPress Media Library.

Here is a simple way of making use of the Out-Of-The-Box WordPress Media Library, in this example, I will be looking at the approach of using a parameterized link and a JavaScript Callback function to the get media URL (there an image URL).

The Parameterized Link

Here I’m adding the link to a Plugin option page:

<a href="media-upload.php?type=image&TB_iframe=1& width=640& height=350&tab=gallery" title="Get Image URL">Get Image URL</a>

The link URL is: media-upload.php

The parameters are:

  • Type=image – this tells the WordPress Media Library to filter for Image and not list other media types; other types are video and audio. If no type is specified then the library would filtered and any media type could be selected.
  • TB_iframe=1 – this specifies that the pop up window (ThickBox) should use iframe.
  • width=640 -  this specifies the pop up window width.
  • height=350 -  this specifies the pop up window height.
  • tab=gallery – this tells the WordPress Media Library to open the Media Library tab, if not specified the Upload Media tab would open instead.

The link’s title attribute is used as the title of the ThickBox pop up window.

The class attribute must contain the word “thickbox”, otherwise the link would open as a new page and not loaded into ThickBox pop up window. Since the Plugin option is opened in the admin area there won’t be any need to write any jQuery script to handle this, as it included by default in WordPress Admin Area.

When the option page opens, clicking on the link would launch the WordPress Media Library as most WP users are already used to.

JavaScript Callback Function

Once, the selected image option page is opened in the Media Library and all options set, clicking the “Insert into Post” button, the Media Library calls the JavaScript Callback function with the URL of the selected Image (Media) as the function’s argument.

Below is the details of the JavaScript WordPress Media Library runs after the “Insert into Post” button clicked:

<script>
 /* <![CDATA[ */
 var win = window.dialogArguments || opener || parent || top;
 win.send_to_editor('<img src=\"http://localhost/wordpress3-1/wp-content/uploads/2011/05/favicon120.jpg\" alt=\"Test Product\" title=\"favicon120\" width=\"120\" height=\"120\" class=\"alignnone size-full wp-image-9\" />');
 /* ]]> */
 </script>

From above the name of the JavaScript Callback function is apparent and is: send_to_editor

Simply adding a JavaScript function named “send_to_editor” that accepts an argument would do the trick.

Below is a sample plugin that demonstrate the above approach:

<?php
/*
Plugin Name: Media URL
Plugin URI: http://www.viewspro.com
Description: Here is a test plugin
Version: 1.0
Author: Views Professionals
Author URI: http://www.viewspro.com
License: GPL2
*/

	add_action('admin_menu', 'MediaURL_Menu');

	function MediaURL_Menu()
	{
		add_options_page('MediaURL Management', 'Manage MediaURL', 'manage_options', 'MediaURL-mgt', 'MediaURL_Mgt_Page');
		add_thickbox();
	}

	function MediaURL_Mgt_Page()
	{
		if(!current_user_can('manage_options'))
		{
			wp_die(__('You do not have sufficient permissions to access this page.'));
		}
		?>
		<script type="text/javascript">
			function send_to_editor(h)
			{
				jQuery('#imgURL').html(h);

				tb_remove();
			}
		</script>
		<div class="wrap">
			<h3>MediaURL Management</h3>
			<a class="thickbox" id="set-MediaURL-thumbnail" href="media-upload.php?type=image&TB_iframe=1&width=640&height=350&tab=gallery" title="Set MediaURL image">Set MediaURL image</a>

			<p id="imgURL">Image URL should show here!</p>
		</div>
		<?php
	}
?>
NOTE: the tb_remove(); JavaScript function call is to dismiss the ThickBox pop up window.

Inside the send_to_editor function you could easily write a script that extracts the URL, here I just simply display the image.

Share

OTHER POSTS THAT MIGHT INTEREST YOU!