Forum Replies Created

Viewing 6 replies - 1 through 6 (of 6 total)
  • 4. Update this function to get link of tooltip

    function imgmap_get_link_url($meta) {
    
    	return isset($meta->tooltip_url) ? $meta->tooltip_url : '';
    	exit;
    	if($meta->type != 'link')
    		return '#'; 
    
    	switch($meta->link_type) {
    		case 'post': return get_permalink($meta->link_post);
    		case 'page': return get_permalink($meta->link_page);
    		default: return isset($meta->tooltip_url) ? $meta->tooltip_url : '';
    	}
    }

    3. Update this function for tooltip with link

    function imgmap_create_area_element($id, $title) {
    	$imgmap_colors = get_option('imgmap_colors');
    	$meta = imgmap_get_imgmap_area_vars($id);
    
    	if($meta === null)
    		$meta = new StdClass();
    
    	if(!isset($meta->color) || !isset($imgmap_colors['colors'][$meta->color]))
    		$meta->color = $imgmap_colors['last_chosen'];
    
    	if(!isset($imgmap_colors['colors'][$meta->color]))
    		$color = array( 'fillColor' => 'fefefe', 'strokeColor' => 'fefefe', 'fillOpacity' => 0.3, 'strokeOpacity' => 0.6, 'strokeWidth' => 1);
    	else
    		$color = $imgmap_colors['colors'][$meta->color];
    
    	$meta->type = isset($meta->type) ? $meta->type : '';
    	$meta->tooltip_text = isset($meta->tooltip_text) ? $meta->tooltip_text : '';
    	$link = imgmap_get_link_url($meta);
    
    	$meta->title_attribute = isset($meta->title_attribute) ? $meta->title_attribute : '';
    
    	if($link == "" || $link == "#"){
    		$newTooltip = $meta->tooltip_text;
    	} else {
    		$newTooltip = '<a href="'.esc_attr($link).'" target="_blank">'.$meta->tooltip_text.'</a>';
    	}	
    
    	return '<area data-type="'.esc_attr($meta->type).'" data-tooltip="'.esc_attr($meta->type == 'tooltip' ? $newTooltip : false ). '" data-fill-color="'.esc_attr(str_replace('#', '', $color['fillColor'])).'" data-fill-opacity="'.esc_attr($color['fillOpacity']).'" data-stroke-color="'.esc_attr(str_replace('#', '', $color['strokeColor'])).'" data-stroke-opacity="'.esc_attr($color['strokeOpacity']).'" data-stroke-width="'.esc_attr($color['strokeWidth']).'" data-mapkey="area-'.$id.'" shape="poly" coords="'.esc_attr(get_post_meta($id, 'coords', true)).'" href="'.esc_attr($link) .'" title="'.(isset($meta->title_attribute) ? $meta->title_attribute : $title).'" />';
    }

    2. Update this function – to save link in database

    function imgmap_save_meta($id = false) {
    
    	if(get_post_type($id) == IMAGEMAP_POST_TYPE) {
    
    		if(isset($_FILES['imgmap_image'])) {
    			$uploadedFile = $_FILES['imgmap_image'];
    			if($uploadedFile['error'] == 0){
    
    				$file = wp_handle_upload($uploadedFile, array('test_form' => FALSE));
    
    				if(!strpos('image/', $file['type']) == 0)
    				wp_die('This is not an image!');
    
    				update_post_meta($id, 'imgmap_image', $file['url']);
    			}
    		}
    	}
    	if(get_post_type($id) == IMAGEMAP_AREA_POST_TYPE) {
    		$area_vars = imgmap_get_imgmap_area_vars($id);
    		$area_vars->type = $_POST['area-type'];
    		$area_vars->tooltip_text = wp_kses_post($_POST['area-tooltip-text']);
    		$area_vars->tooltip_url = wp_kses_post($_POST['area-tooltip-url']);
    		$area_vars->title_attribute = esc_attr($_POST['area-title-attribute']);
    		$area_vars->link_url = esc_url($_POST['area-link-url']);
    		$area_vars->link_type = esc_attr($_POST['area-link-type']);
    		$area_vars->link_post = esc_attr($_POST['area-link-post']);
    		$area_vars->link_page = esc_attr($_POST['area-link-page']);
    		// Save area settings in JSON format.
    		// Basically when you need one of them, you need all others as well, so it's inefficient to save them in separate columns.
    		update_post_meta($id, 'imgmap_area_vars', $area_vars);
    	}
    }

    1. Update this function – to add link to tooltip

    function imgmap_area_form_types($post) {
    	// Get area variables from post meta
    	$meta = imgmap_get_imgmap_area_vars($post->ID);
    	$meta->type = isset($meta->type) ? $meta->type : 'tooltip';
    	$meta->tooltip_text = isset($meta->tooltip_text) ? $meta->tooltip_text : '';
    	$meta->link_url = isset($meta->link_url) ? $meta->link_url : '';
    	$meta->link_type = isset($meta->link_type) ? $meta->link_type : 'absolute';
    	$meta->link_page = isset($meta->link_page) ? $meta->link_page : -1;
    	?>
    	<div style="width: 20%; float: left;" id="area-form-types">
    		<p><input type="radio" name="area-type" onclick="ShowTypes('link')" value="link" <?php echo $meta->type == 'link' ? 'checked' : '' ?>>
    			<input type="button" class="button" onclick="ShowTypes('link')" value="Link" /></p>
    		<p><input type="radio" name="area-type" onclick="ShowTypes('tooltip')" value="tooltip" <?php echo $meta->type == 'tooltip' ? 'checked' : '' ?>>
    			<input type="button" class="button" onclick="ShowTypes('tooltip')" value="Tooltip" /></p>
    		<p><input type="radio" name="area-type" onclick="ShowTypes('popup')" value="popup" <?php echo $meta->type == 'popup' ? 'checked' : '' ?>>
    			<input type="button" class="button" onclick="ShowTypes('popup')" value="Popup window" /></p>
    	</div>
    	<div id="imagemap-area-type-editors">
    		<div id="imagemap-area-popup-editor" class="area-type-editors <?php echo $meta->type == 'popup' ? 'area-type-editor-current' : '' ?>">
    		<h4>Show text and images in a popup window when user clicks the area</h4>
    		<p><label>Map Area Link <br />
    			<input type="text" name="area-tooltip-url" value="<?php echo $meta->tooltip_url; ?>"/>
    		</label></p>
    		<?php
    		if(function_exists('wp_editor')) {
    			wp_editor($post->post_content, 'content', array( 'editor_css' => '<style> body { min-height: 300px; background-color: white; } </style>' ));
    		}
    		else if(function_exists('the_editor')) {
    			the_editor($post->post_content, 'content', array( 'textarea_rows' => 8 ));
    		}
    		else {
    			echo 'Something went wrong when loading editor.';
    		}
    		?></div>
    		<div id="imagemap-area-tooltip-editor" class="area-type-editors <?php echo $meta->type == 'tooltip' ? 'area-type-editor-current' : '' ?>">
    		<h4>Show a small tooltip when users move their mouse on the area</h4>
    
    			<p><label>Tooltip text <br />
    				<textarea name="area-tooltip-text" cols="50" rows="6"><?php echo $meta->tooltip_text; ?></textarea>
    			</label></p>
    			<p>HTML elements such as links and images are allowed. Javascript not so much.</p>
    			<p><label>Map Area Link <br />
    			<input type="text" name="area-tooltip-url" value="<?php echo $meta->tooltip_url; ?>"/>
    		</label></p>
    		</div>
    		<div id="imagemap-area-link-editor" class="area-type-editors <?php echo $meta->type == 'link' ? 'area-type-editor-current' : '' ?>">
    		<h4>Select where users should be redirected when they click the area</h4>
    			<table>
    				<tr>
    			<td><label><input type="radio" name="area-link-type" value="post" <?php echo $meta->link_type == 'post' ? 'checked' : ''; ?>> Link to an existing post:</label></td>
    			<td>
    				<select name="area-link-post"><?php
    				$posts = get_posts(array('numberposts' => -1));
    				foreach($posts as $post) { echo '<option value="'.$post->ID.'" '.($meta->link_post == $post->ID ? 'selected' : '').'>'.(strlen($post->post_title) ? $post->post_title : '(untitled, id: '.$post->ID.')').'</option>'; }
    				?></select>
    			</td>
    			<tr><td><label><input type="radio" name="area-link-type" value="page" <?php echo $meta->link_type == 'page' ? 'checked' : ''; ?>> Link to an existing page:</label></td><td><?php wp_dropdown_pages(array('name' => 'area-link-page', 'selected' => $meta->link_page)); ?></td></tr>
    			<tr><td><label><input type="radio" name="area-link-type" value="absolute" <?php echo $meta->link_type == 'absolute' ? 'checked' : ''; ?>> Link to an url address:</label></td><td><input type="text" name="area-link-url" value="<?php echo $meta->link_url; ?>"></td></tr>
    			</tr>
    			</table>
    		</div>
    		<div id="wp-content-media-buttons" class="wp-media-buttons">
    			<a href="#" class="button insert-media add_media" data-editor="content" title="Add Media">
    				<span class="wp-media-buttons-icon"></span> Add Media
    			</a>
    		</div>
    	</div>
    	<br style="clear:both">
    <?php }

    1. Imagemapper.php // in plugin directory
    change this function as bellow,

    function imgmap_area_form_types($post) {
    	// Get area variables from post meta
    	$meta = imgmap_get_imgmap_area_vars($post->ID);
    	$meta->type = isset($meta->type) ? $meta->type : 'tooltip';
    	$meta->tooltip_text = isset($meta->tooltip_text) ? $meta->tooltip_text : '';
    	$meta->link_url = isset($meta->link_url) ? $meta->link_url : '';
    	$meta->link_type = isset($meta->link_type) ? $meta->link_type : 'absolute';
    	$meta->link_page = isset($meta->link_page) ? $meta->link_page : -1;
    	?>
    	<div style="width: 20%; float: left;" id="area-form-types">
    		<p><input type="radio" name="area-type" onclick="ShowTypes('link')" value="link" <?php echo $meta->type == 'link' ? 'checked' : '' ?>>
    			<input type="button" class="button" onclick="ShowTypes('link')" value="Link" /></p>
    		<p><input type="radio" name="area-type" onclick="ShowTypes('tooltip')" value="tooltip" <?php echo $meta->type == 'tooltip' ? 'checked' : '' ?>>
    			<input type="button" class="button" onclick="ShowTypes('tooltip')" value="Tooltip" /></p>
    		<p><input type="radio" name="area-type" onclick="ShowTypes('popup')" value="popup" <?php echo $meta->type == 'popup' ? 'checked' : '' ?>>
    			<input type="button" class="button" onclick="ShowTypes('popup')" value="Popup window" /></p>
    	</div>
    	<div id="imagemap-area-type-editors">
    		<div id="imagemap-area-popup-editor" class="area-type-editors <?php echo $meta->type == 'popup' ? 'area-type-editor-current' : '' ?>">
    		<h4>Show text and images in a popup window when user clicks the area</h4>
    		<p><label>Map Area Link <br />
    			<input type="text" name="area-tooltip-url" value="<?php echo $meta->tooltip_url; ?>"/>
    		</label></p>
    		<?php
    		if(function_exists('wp_editor')) {
    			wp_editor($post->post_content, 'content', array( 'editor_css' => '<style> body { min-height: 300px; background-color: white; } </style>' ));
    		}
    		else if(function_exists('the_editor')) {
    			the_editor($post->post_content, 'content', array( 'textarea_rows' => 8 ));
    		}
    		else {
    			echo 'Something went wrong when loading editor.';
    		}
    		?></div>
    		<div id="imagemap-area-tooltip-editor" class="area-type-editors <?php echo $meta->type == 'tooltip' ? 'area-type-editor-current' : '' ?>">
    		<h4>Show a small tooltip when users move their mouse on the area</h4>
    
    			<p><label>Tooltip text <br />
    				<textarea name="area-tooltip-text" cols="50" rows="6"><?php echo $meta->tooltip_text; ?></textarea>
    			</label></p>
    			<p>HTML elements such as links and images are allowed. Javascript not so much.</p>
    			<p><label>Map Area Link <br />
    			<input type="text" name="area-tooltip-url" value="<?php echo $meta->tooltip_url; ?>"/>
    		</label></p>
    		</div>
    		<div id="imagemap-area-link-editor" class="area-type-editors <?php echo $meta->type == 'link' ? 'area-type-editor-current' : '' ?>">
    		<h4>Select where users should be redirected when they click the area</h4>
    			<table>
    				<tr>
    			<td><label><input type="radio" name="area-link-type" value="post" <?php echo $meta->link_type == 'post' ? 'checked' : ''; ?>> Link to an existing post:</label></td>
    			<td>
    				<select name="area-link-post"><?php
    				$posts = get_posts(array('numberposts' => -1));
    				foreach($posts as $post) { echo '<option value="'.$post->ID.'" '.($meta->link_post == $post->ID ? 'selected' : '').'>'.(strlen($post->post_title) ? $post->post_title : '(untitled, id: '.$post->ID.')').'</option>'; }
    				?></select>
    			</td>
    			<tr><td><label><input type="radio" name="area-link-type" value="page" <?php echo $meta->link_type == 'page' ? 'checked' : ''; ?>> Link to an existing page:</label></td><td><?php wp_dropdown_pages(array('name' => 'area-link-page', 'selected' => $meta->link_page)); ?></td></tr>
    			<tr><td><label><input type="radio" name="area-link-type" value="absolute" <?php echo $meta->link_type == 'absolute' ? 'checked' : ''; ?>> Link to an url address:</label></td><td><input type="text" name="area-link-url" value="<?php echo $meta->link_url; ?>"></td></tr>
    			</tr>
    			</table>
    		</div>
    		<div id="wp-content-media-buttons" class="wp-media-buttons">
    			<a href="#" class="button insert-media add_media" data-editor="content" title="Add Media">
    				<span class="wp-media-buttons-icon"></span> Add Media
    			</a>
    		</div>
    	</div>
    	<br style="clear:both">
    <?php }

    2. In same page change other function, which i have mentioned bellow.

    function imgmap_save_meta($id = false) {
    
    	if(get_post_type($id) == IMAGEMAP_POST_TYPE) {
    
    		if(isset($_FILES['imgmap_image'])) {
    			$uploadedFile = $_FILES['imgmap_image'];
    			if($uploadedFile['error'] == 0){
    
    				$file = wp_handle_upload($uploadedFile, array('test_form' => FALSE));
    
    				if(!strpos('image/', $file['type']) == 0)
    				wp_die('This is not an image!');
    
    				update_post_meta($id, 'imgmap_image', $file['url']);
    			}
    		}
    	}
    	if(get_post_type($id) == IMAGEMAP_AREA_POST_TYPE) {
    		$area_vars = imgmap_get_imgmap_area_vars($id);
    		$area_vars->type = $_POST['area-type'];
    		$area_vars->tooltip_text = wp_kses_post($_POST['area-tooltip-text']);
    		$area_vars->tooltip_url = wp_kses_post($_POST['area-tooltip-url']);
    		$area_vars->title_attribute = esc_attr($_POST['area-title-attribute']);
    		$area_vars->link_url = esc_url($_POST['area-link-url']);
    		$area_vars->link_type = esc_attr($_POST['area-link-type']);
    		$area_vars->link_post = esc_attr($_POST['area-link-post']);
    		$area_vars->link_page = esc_attr($_POST['area-link-page']);
    		// Save area settings in JSON format.
    		// Basically when you need one of them, you need all others as well, so it's inefficient to save them in separate columns.
    		update_post_meta($id, 'imgmap_area_vars', $area_vars);
    	}
    }

    3. Update below function in same page

    function imgmap_create_area_element($id, $title) {
    	$imgmap_colors = get_option('imgmap_colors');
    	$meta = imgmap_get_imgmap_area_vars($id);
    
    	if($meta === null)
    		$meta = new StdClass();
    
    	if(!isset($meta->color) || !isset($imgmap_colors['colors'][$meta->color]))
    		$meta->color = $imgmap_colors['last_chosen'];
    
    	if(!isset($imgmap_colors['colors'][$meta->color]))
    		$color = array( 'fillColor' => 'fefefe', 'strokeColor' => 'fefefe', 'fillOpacity' => 0.3, 'strokeOpacity' => 0.6, 'strokeWidth' => 1);
    	else
    		$color = $imgmap_colors['colors'][$meta->color];
    
    	$meta->type = isset($meta->type) ? $meta->type : '';
    	$meta->tooltip_text = isset($meta->tooltip_text) ? $meta->tooltip_text : '';
    	$link = imgmap_get_link_url($meta);
    
    	$meta->title_attribute = isset($meta->title_attribute) ? $meta->title_attribute : '';
    
    	if($link == "" || $link == "#"){
    		$newTooltip = $meta->tooltip_text;
    	} else {
    		$newTooltip = '<a href="'.esc_attr($link).'" target="_blank">'.$meta->tooltip_text.'</a>';
    	}	
    
    	return '<area data-type="'.esc_attr($meta->type).'" data-tooltip="'.esc_attr($meta->type == 'tooltip' ? $newTooltip : false ). '" data-fill-color="'.esc_attr(str_replace('#', '', $color['fillColor'])).'" data-fill-opacity="'.esc_attr($color['fillOpacity']).'" data-stroke-color="'.esc_attr(str_replace('#', '', $color['strokeColor'])).'" data-stroke-opacity="'.esc_attr($color['strokeOpacity']).'" data-stroke-width="'.esc_attr($color['strokeWidth']).'" data-mapkey="area-'.$id.'" shape="poly" coords="'.esc_attr(get_post_meta($id, 'coords', true)).'" href="'.esc_attr($link) .'" title="'.(isset($meta->title_attribute) ? $meta->title_attribute : $title).'" />';
    }

    4. Update bellow function also in same page

    function imgmap_get_link_url($meta) {
    
    	return isset($meta->tooltip_url) ? $meta->tooltip_url : '';
    	exit;
    	if($meta->type != 'link')
    		return '#'; 
    
    	switch($meta->link_type) {
    		case 'post': return get_permalink($meta->link_post);
    		case 'page': return get_permalink($meta->link_page);
    		default: return isset($meta->tooltip_url) ? $meta->tooltip_url : '';
    	}
    }

    Good luck.

    Hi,
    I did it, if you need it still, i will share code.
    Reply back to me.

Viewing 6 replies - 1 through 6 (of 6 total)