Code for new custom field type

interactive_image-v4.php

<?php

class acf_field_interactive_image extends acf_field
{
	// vars
	var	$settings, // will hold info such as dir / path
			$defaults; // will hold default field options


	/*
	*  __construct
	*
	*  Set name / label needed for actions / filters
	*
	*  @since	3.6
	*  @date	23/01/13
	*/

	function __construct()
	{
		// vars
		$this->name = 'interactive_image';
		$this->label = __('Interactive image');
		$this->category = __("Layout",'acf'); // Basic, Content, Choice, etc
		$this->defaults = array (
			// add default here to merge into your field.
			// This makes life easy when creating the field options as you don't need to use any if( isset('') ) logic. eg:
			//'preview_size' => 'thumbnail'
			'interactive_image_type' => 'automotive',
			'interactive_image_src'  => get_bloginfo ( 'template_url' ) . '/fields/default.jpg',
			'interactive_image_tag1'  => array ( 'top' => 10, 'left' => 10 ),
			'interactive_image_tag2'  => array ( 'top' => 10, 'left' => 10 ),
			'interactive_image_tag3'  => array ( 'top' => 10, 'left' => 10 ),
			'interactive_image_tag4'  => array ( 'top' => 10, 'left' => 10 ),
			'interactive_image_tag5'  => array ( 'top' => 10, 'left' => 10 ),
			'interactive_image_tag6'  => array ( 'top' => 10, 'left' => 10 ),
			'interactive_image_tag7'  => array ( 'top' => 10, 'left' => 10 ),
			'interactive_image_tag8'  => array ( 'top' => 10, 'left' => 10 ),
			'interactive_image_tag9'  => array ( 'top' => 10, 'left' => 10 ),
			'interactive_image_tag10'  => array ( 'top' => 10, 'left' => 10 )
		);


		// do not delete!
		parent::__construct();


		// settings
		$this->settings = array(
			'path' => apply_filters('acf/helpers/get_path', __FILE__),
			'dir' => apply_filters('acf/helpers/get_dir', __FILE__),
			'version' => '1.0.0'
		);

	}


	/*
	*  create_options()
	*
	*  Create extra options for your field. This is rendered when editing a field.
	*  The value of $field['name'] can be used (like bellow) to save extra data to the $field
	*
	*  @type	action
	*  @since	3.6
	*  @date	23/01/13
	*
	*  @param	$field	- an array holding all the field's data
	*/

	function create_options($field)
	{
		// defaults?
		$field = array_merge($this->defaults, $field);

		// key is needed in the field names to correctly save the data
		$key = $field['name'];

		?>

		<tr class="field_option field_option_<?php echo $this->name; ?>">
			<td class="label">
				<label><?php _e("Top and left default values",'acf'); ?></label>
			</td>
			<td>
				<?php

				do_action('acf/create_field', array(
					'type'	=>	'number',
					'name'	=>	'fields['.$key.'][interactive_image_tag_top]',
					'value'	=>	$field['interactive_image_tag_top'],
				));

				do_action('acf/create_field', array(
					'type'	=>	'number',
					'name'	=>	'fields['.$key.'][interactive_image_tag_left]',
					'value'	=>	$field['interactive_image_tag_left'],
				));

				?>
			</td>
		</tr>

		<?php
	}


	/*
	*  create_field()
	*
	*  Create the HTML interface for your field
	*
	*  @param	$field - an array holding all the field's data
	*
	*  @type	action
	*  @since	3.6
	*  @date	23/01/13
	*/

	function create_field( $field )
	{
		// defaults?
		$field = array_merge($this->defaults, $field);

		$key = $field['name'];


		// create Field HTML
		?>
		<div>
			<pre style="word-break: break-all; white-space: pre-wrap"><?php
				foreach($field as $thing => $value) {
					if(!is_array($value)) {
						echo $thing . " => " . $value . "<br>";
					} else {
						echo $thing . " => { <br>";
						foreach($value as $subthing => $subvalue) {
							echo "	" . $subthing . " => " . $subvalue . "<br>";
						}
						echo "} <br>";
					}
				}
				foreach($field['value'] as $thing => $value) {
					if(!is_array($value)) {
						echo $thing . " => " . $value . "<br>";
					} else {
						echo $thing . " => { <br>";
						foreach($value as $subthing => $subvalue) {
							echo "	" . $subthing . " => " . $subvalue . "<br>";
						}
						echo "} <br>";
					}
				}
				?></pre>
			<h2>Interactive image type</h2>
			<select name="interactive_image_select" id="interactive_image_select">
				<option value="automotive" selected>Automotive</option>
			</select>
			<h2>Image</h2>
			<img id="select-tag-position" class="interactive_image_preview" width="100%" src="<?php echo $field['interactive_image_src']; ?>" alt="Interactive image">
			<h2>Interactive tags</h2>
			<div id="interactive_image_tags" class="interactive-image-tags">
				<?php
				$tagcounter = 0;
				$tagamount = 3;

				for($tagcounter; $tagcounter < $tagamount; $tagcounter++) {
					$tagnr = $tagcounter + 1;
					?>
					<div class="tag-options tag<?php echo $tagnr; ?>-options">
						<h4>Tag <?php echo $tagnr; ?></h4>
						<div class="tag-options-position">
							<p><em>Position in percentages (%)</em></p>
							<label for="<?php echo $key.'[interactive_image_tag'.$tagnr.'][top]'; ?>" class="valuelabel">Top</label>
							<?php
							do_action('acf/create_field', array(
								'type'	=> 'number',
								'min'   => 0,
								'max'		=> 100,
								'step'	=> 0.01,
								'placeholder' => 0.00,
								'name'	=> $key.'[interactive_image_tag'.$tagnr.'][top]',
								'value'	=> $field['value']['interactive_image_tag'.$tagnr]['top']
							)); ?>
							<label for="tag<?php echo $tagnr; ?>top" class="valuelabel">Left</label>
							<?php
							do_action('acf/create_field', array(
								'type'	=> 'number',
								'min'   => 0,
								'max'		=> 100,
								'step'	=> 0.01,
								'placeholder' => 0.00,
								'name'	=> $key.'[interactive_image_tag'.$tagnr.'][left]',
								'value'	=> $field['value']['interactive_image_tag'.$tagnr]['left']
							));
							?>
							<p><a href="#select-position-tag<?php echo $tagnr; ?>" title="Pick position for tag <?php echo $tagnr; ?>">Pick position from image</a></p>
						</div>
						<div class="tag-options-content">
							<p><em>Tag content</em></p>
							<p>Lorem ipsum dolor sit amet.</p>
						</div>
					</div>
				<?php } ?>
			</div>
		</div>
		<?php
	}


	/*
	*  input_admin_enqueue_scripts()
	*
	*  This action is called in the admin_enqueue_scripts action on the edit screen where your field is created.
	*  Use this action to add css + javascript to assist your create_field() action.
	*
	*  $info	http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts
	*  @type	action
	*  @since	3.6
	*  @date	23/01/13
	*/

	function input_admin_enqueue_scripts()
	{
		// Note: This function can be removed if not used


		// register acf scripts
		wp_register_script('acf-input-interactive_image', $this->settings['dir'] . 'js/input.js', array('acf-input', 'jquery'), $this->settings['version'], true);
		wp_register_style('acf-input-interactive_image', $this->settings['dir'] . 'css/input.css', array('acf-input'), $this->settings['version']);


		// scripts
		wp_enqueue_script(array(
			'acf-input-interactive_image',
		));

		// styles
		wp_enqueue_style(array(
			'acf-input-interactive_image',
		));

	}


	/*
	*  input_admin_head()
	*
	*  This action is called in the admin_head action on the edit screen where your field is created.
	*  Use this action to add css and javascript to assist your create_field() action.
	*
	*  @info	http://codex.wordpress.org/Plugin_API/Action_Reference/admin_head
	*  @type	action
	*  @since	3.6
	*  @date	23/01/13
	*/

	function input_admin_head()
	{
		// Note: This function can be removed if not used
	}


	/*
	*  field_group_admin_enqueue_scripts()
	*
	*  This action is called in the admin_enqueue_scripts action on the edit screen where your field is edited.
	*  Use this action to add css + javascript to assist your create_field_options() action.
	*
	*  $info	http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts
	*  @type	action
	*  @since	3.6
	*  @date	23/01/13
	*/

	function field_group_admin_enqueue_scripts()
	{
		// Note: This function can be removed if not used
	}


	/*
	*  field_group_admin_head()
	*
	*  This action is called in the admin_head action on the edit screen where your field is edited.
	*  Use this action to add css and javascript to assist your create_field_options() action.
	*
	*  @info	http://codex.wordpress.org/Plugin_API/Action_Reference/admin_head
	*  @type	action
	*  @since	3.6
	*  @date	23/01/13
	*/

	function field_group_admin_head()
	{
		// Note: This function can be removed if not used
	}


	/*
	*  load_value()
	*
	*  This filter is appied to the $value after it is loaded from the db
	*
	*  @type	filter
	*  @since	3.6
	*  @date	23/01/13
	*
	*  @param	$value - the value found in the database
	*  @param	$post_id - the $post_id from which the value was loaded from
	*  @param	$field - the field array holding all the field options
	*
	*  @return	$value - the value to be saved in te database
	*/

	function load_value($value, $post_id, $field)
	{
		// Note: This function can be removed if not used
		return $value;
	}


	/*
	*  update_value()
	*
	*  This filter is appied to the $value before it is updated in the db
	*
	*  @type	filter
	*  @since	3.6
	*  @date	23/01/13
	*
	*  @param	$value - the value which will be saved in the database
	*  @param	$post_id - the $post_id of which the value will be saved
	*  @param	$field - the field array holding all the field options
	*
	*  @return	$value - the modified value
	*/

	function update_value($value, $post_id, $field)
	{
		// Note: This function can be removed if not used
		return $value;
	}


	/*
	*  format_value()
	*
	*  This filter is appied to the $value after it is loaded from the db and before it is passed to the create_field action
	*
	*  @type	filter
	*  @since	3.6
	*  @date	23/01/13
	*
	*  @param	$value	- the value which was loaded from the database
	*  @param	$post_id - the $post_id from which the value was loaded
	*  @param	$field	- the field array holding all the field options
	*
	*  @return	$value	- the modified value
	*/

	function format_value($value, $post_id, $field)
	{
		// defaults?
		/*
		$field = array_merge($this->defaults, $field);
		*/

		// perhaps use $field['preview_size'] to alter the $value?


		// Note: This function can be removed if not used
		return $value;
	}


	/*
	*  format_value_for_api()
	*
	*  This filter is appied to the $value after it is loaded from the db and before it is passed back to the api functions such as the_field
	*
	*  @type	filter
	*  @since	3.6
	*  @date	23/01/13
	*
	*  @param	$value	- the value which was loaded from the database
	*  @param	$post_id - the $post_id from which the value was loaded
	*  @param	$field	- the field array holding all the field options
	*
	*  @return	$value	- the modified value
	*/

	function format_value_for_api($value, $post_id, $field)
	{
		// defaults?
		/*
		$field = array_merge($this->defaults, $field);
		*/

		// perhaps use $field['preview_size'] to alter the $value?


		// Note: This function can be removed if not used
		return $value;
	}


	/*
	*  load_field()
	*
	*  This filter is appied to the $field after it is loaded from the database
	*
	*  @type	filter
	*  @since	3.6
	*  @date	23/01/13
	*
	*  @param	$field - the field array holding all the field options
	*
	*  @return	$field - the field array holding all the field options
	*/

	function load_field($field)
	{
		// Note: This function can be removed if not used
		return $field;
	}


	/*
	*  update_field()
	*
	*  This filter is appied to the $field before it is saved to the database
	*
	*  @type	filter
	*  @since	3.6
	*  @date	23/01/13
	*
	*  @param	$field - the field array holding all the field options
	*  @param	$post_id - the field group ID (post_type = acf)
	*
	*  @return	$field - the modified field
	*/

	function update_field($field, $post_id)
	{
		// Note: This function can be removed if not used
		return $field;
	}


}


// create field
new acf_field_interactive_image();

?>