ImageMapper Shortcode

Below, you’ll find a detailed guide on how to add the ImageMapper Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the ImageMapper Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the ImageMapper Plugin and the shortcodes it provides:

ImageMapper

"ImageMapper is a user-friendly WordPress plugin that allows you to create and embed responsive, interactive image maps on your site with ease. Perfect for visual storytelling!"

★★★★✩ (41) Active Installs: 3000+ Tested with: 4.3.32 PHP Version: false

Included Shortcodes:

• [imagemap]

ImageMapper [imagemap] Shortcode

The ImageMapper shortcode is designed to dynamically generate image maps. It uses the ‘imagemap’ shortcode to display an image with clickable areas, defined by the plugin. The shortcode extracts the ‘id’ attribute from the shortcode parameters to identify the image map. It then fetches the related areas from the database and generates the HTML for the image map. In addition, it handles the display of alternative links. If the option is set to ‘visible’ or ‘hidden’, it generates a list of links corresponding to the areas on the image map. These links can be shown or hidden based on the option value.

Shortcode: [imagemap]

Parameters

Here is a list of all possible imagemap shortcode parameters and attributes:

• id – The unique identifier for the image map
• element_id – Optional unique identifier for an element within the image map

Examples and Usage

Basic example – Display an image map by referencing its ID using the ‘imagemap’ shortcode.

[imagemap id=3 /]

Advanced examples

Display an image map by referencing its ID and assign a unique element ID to avoid conflicts with other image maps on the same page. This is particularly useful when having multiple image maps on the same page.

[imagemap id=3 element_id="unique_1" /]

Display multiple image maps on the same page by referencing their IDs and assigning unique element IDs to each of them to avoid conflicts.

[imagemap id=3 element_id="unique_1" /]
[imagemap id=4 element_id="unique_2" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [imagemap] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'imagemap', 'imgmap_frontend_image_shortcode' );

Shortcode PHP function:

function imgmap_frontend_image_shortcode( $atts ) {
	global $element_id_count;  // prevent duplicate maps
	$element_id_count++;		// start with 1
	$id = $atts['id'];			// get the map id from the passed-in attributes
	if (isset($atts['element_id']))
		$element_id = $atts['element_id'];
	else
		$element_id = $id . '-' . $element_id_count;    // build the unique identifier
													// carry on with the original processing
	$areas = array();
	$value = '
	<div class="imgmap-frontend-image">
	<div class="imgmap-dialog-wrapper" id="imgmap-dialog-'.$element_id.'"></div>
	<img src="'.get_post_meta($id, 'imgmap_image', true).'" usemap="#imgmap-'.$element_id.'" id="imagemap-'.$element_id.'" />
	<map name="imgmap-'.$element_id.'">';
	$areas = get_posts('post_parent='.$id.'&post_type='.IMAGEMAP_AREA_POST_TYPE.'&numberposts=-1');
	foreach($areas as $a) {
		$value .= imgmap_create_area_element($a->ID, $a->post_title);
	}
	$value .= '</map>';
	
	$altLink = get_option('imgmap-alternative-link-positions');
	
	if($altLink == 'hidden' || $altLink == 'visible') {
		
		if($altLink == 'hidden') {
			$value .= '
			<a class="altlinks-toggle" data-parent="'.$element_id.'">Show links</a>
			<div class="altlinks-container imgmap-hidden" id="altlinks-container-'.$element_id.'">';
		}
		else
			$value .= '<div class="altlinks-container">';
		
		
		foreach($areas as $a) {
			$title = $a->post_title == '' ? '(untitled)' : $a->post_title;
			$meta = imgmap_get_imgmap_area_vars($a->ID);
			$meta->type = isset($meta->type) ? $meta->type : 'popup';
			$url = $meta->type == 'link' ? ' href="'.imgmap_get_link_url($meta).'"' : '';
			$value .= '<a class="alternative-links-imagemap"'.$url.' data-key="area-'.$a->ID.'" data-type="'.$meta->type.'" data-parent="imgmap-'.$element_id.'">'.$title.'</a>, ';
		}
		$value = substr($value, 0, -2);
		$value .= '</div>';
	}
	$value .= '
	</div>';
	return $value;
}

Code file location:

imagemapper/imagemapper/imagemapper.php

Conclusion

Now that you’ve learned how to embed the ImageMapper Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.