Get fields form plugin

• Bram Roos

• March 16, 2017 at 7:13 am

Hi all! First, loving the ACF!

I’m fairly new to the coding PHP but slowly getting there, so please bare with me.

I’m trying to use a ACF plugin called ACF Image Mapping. Unfortunately it is not a ‘plug and play’ sort of plugin and the plugin author has not provided any further (clear) directions.
I have created all the suggested field and the back end seems to function as it should. However, it appears I need to get a field with constructed HTML from the plugin PHP file and place it in my page template. I’m not sure how to achieve this.

Code is as follows:

<?php

if( ! defined( 'ABSPATH' ) ) exit;

if( !class_exists('acf_field_image_mapping') ) :

class acf_field_image_mapping extends acf_field {
	
	function __construct( $settings ) {
	
		$this->name = 'image_mapping';

		$this->label = __('Image Mapping', 'acf-image_mapping');
		
		$this->category = 'basic';
		
		$this->defaults = array(
			'font_size'	=> 14,
			'x'	=> 0,
			'y'	=> 0,
		);

		$this->l10n = array(
			'error'	=> __('Error! Please enter click to create a coordinate pair', 'acf-image_mapping'),
		);
		
		$this->settings = $settings;
		
		// do not delete!
    	parent::__construct();
	}
	
	function render_field_settings( $field ) {

		acf_render_field_setting( $field, array(
			'label'			=> __( 'Image Field Label', 'acf-image_mapping' ),
			'instructions'	=> __( 'Field label of image to link to', 'acf-image_mapping' ),
			'placeholder'   => __( 'ACF_IMAGE_FIELD_NAME', 'acf-image_mapping' ),
			'type'			=> 'text',
			'name'			=> 'image_field_label',
			'required'      => true
		));

		acf_render_field_setting( $field, array(
			'label'			=> __( 'Percentage Based Coordinates', 'acf-image_mapping' ),
			'instructions'	=> __( 'Convert the coordinate pair to percentages instead of the raw X / Y pair', 'acf-image_mapping' ),
			'type'			=> 'true_false',
			'name'			=> 'percent_based',
		));

		// acf_render_field_setting( $field, array(
		// 	'label'			=> __( 'Don\'t append units', 'acf-image_mapping' ),
		// 	'instructions'	=> __( 'Check this box if you DO NOT want units included in the value', 'acf-image_mapping' ),
		// 	'type'			=> 'true_false',
		// 	'name'			=> 'skip_units',
		// ));
	}
	
	function render_field( $field ) {
			
		/*
		*  Review the data of $field.
		*  This will show what data is available
		*/

		$img_label     = esc_attr( $field['image_field_label'] );
		$field_name    = esc_attr( $field['name'] );
		$field_value   = esc_attr( $field['value'] );
		$percent_based = array_key_exists( 'percent_based', $field ) && $field['percent_based'] ? 1 : 0;
		$xy_pair       = explode( ',', $field_value );
		if ( 1 < count( $xy_pair ) ) {
			$x = $xy_pair[0];
			$y = $xy_pair[1];
		} else {
			$x = 0;
			$y = 0;
		}
		echo <<< HTML

			<!-- Image where we will catch the user's clicks -->
			<div class="$this->name-image">
				<img src="" data-percent-based="$percent_based" data-label="$img_label" />
				<span style="left:$x;top:$y;"></span>
			</div>

			<!-- XY Coordinate Pair -->
			<input class="$this->name-input" type="text" name="$field_name" value="$field_value" />

HTML;
	}
	
	function input_admin_enqueue_scripts() {
		
		// vars
		$url = $this->settings['url'];
		$version = $this->settings['version'];
		
		// register & include JS
		// wp_register_script( 'acf-input-image_mapping', "{$url}assets/js/input.js", array('acf-input'), $version );
		wp_register_script( 'acf-input-image_mapping', "{$url}assets/js/input.js", array('acf-input'), null );
		wp_enqueue_script('acf-input-image_mapping');
		
		// register & include CSS
		wp_register_style( 'acf-input-image_mapping', "{$url}assets/css/input.css", array('acf-input'), $version );
		wp_enqueue_style('acf-input-image_mapping');
	}
}

// initialize
new acf_field_image_mapping( $this->settings );

// class_exists check
endif;
?>

Now how do I retrieve the HTML under function render_field( $field ) and place it in my page template?

Really hope somebody could point me in the right direction!

Many thanks!
Bram Roos

.