Below, you’ll find a detailed guide on how to add the Vision – Image Map Builder 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 Vision – Image Map Builder Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Vision – Image Map Builder Plugin and the shortcodes it provides:
"Vision – Image Map Builder is a WordPress plugin designed to create and manage interactive image maps. Easy to use, it enhances your website's visual appeal and user experience."
- [VISION_SHORTCODE_NAME]
Vision – Image Map Builder [VISION_SHORTCODE_NAME] Shortcode
The Vision shortcode is a powerful tool that allows you to embed interactive maps with layers, tooltips, and popovers into your WordPress posts. It fetches specific vision items based on the provided ID or slug. If the vision item is active, it generates an HTML structure with the item’s data, including layers, tooltips, and popovers. Each layer can contain different types of content, text, or an SVG file. The shortcode also handles error scenarios, displaying appropriate messages when the vision identifier attribute or the vision item is invalid.
Shortcode: [VISION_SHORTCODE_NAME]
Parameters
Here is a list of all possible VISION_SHORTCODE_NAME shortcode parameters and attributes:
id– Unique identifier of the vision itemslug– Alternate identifier for the vision itemclass– Optional class to style the vision item
Examples and Usage
Basic example – Here is a simple usage of the shortcode to display a vision plugin item by its ID.
[VISION_SHORTCODE_NAME id=1 /]For a more specific use, you can display a vision plugin item by its slug and add a CSS class to it for further customization.
[VISION_SHORTCODE_NAME slug="my-vision-item" class="my-custom-class" /]Advanced examples
Displaying a vision plugin item by its ID, but if the item is not found by ID, it will try to load by slug. Additionally, a CSS class is added for further customization.
[VISION_SHORTCODE_NAME id=1 slug="my-vision-item" class="my-custom-class" /]Another advanced usage is to display a vision plugin item only by its slug, and add a CSS class. In this case, the plugin will not try to load the item by ID, but directly by slug.
[VISION_SHORTCODE_NAME slug="my-vision-item" class="my-custom-class" /]PHP Function Code
In case you have difficulties debugging what causing issues with [VISION_SHORTCODE_NAME] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode(VISION_SHORTCODE_NAME, [$this, 'shortcode']);Shortcode PHP function:
function shortcode($atts) {
extract(shortcode_atts(['id'=>0, 'slug'=>NULL, 'class'=>NULL], $atts, VISION_SHORTCODE_NAME));
if(!$id && !$slug) {
return '<p>' . esc_html__('Error: invalid vision identifier attribute', 'vision') . '</p>';
}
$id = intval($id, 10);
$slug = sanitize_key($slug);
$class = sanitize_text_field($class);
global $wpdb;
$table = $wpdb->prefix . VISION_PLUGIN_NAME;
$upload_dir = wp_upload_dir();
$sql = ($id ? $wpdb->prepare("SELECT * FROM {$table} WHERE id=%d AND NOT deleted", $id) : $wpdb->prepare("SELECT * FROM {$table} WHERE slug=%s AND NOT deleted LIMIT 0, 1", $slug));
$item = $wpdb->get_row($sql, OBJECT);
$preview = filter_input(INPUT_GET, 'preview', FILTER_SANITIZE_NUMBER_INT);
if($item && ($item->active || (!$item->active && $preview == 1))) {
$version = strtotime(mysql2date('d M Y H:i:s', $item->modified));
$itemData = unserialize($item->data);
$id = $item->id;
$id_postfix = strtolower(wp_generate_password(5, false)); // generate unique postfix for $id to avoid clashes with multiple same shortcode use
$id_element = 'vision-' . $id . '-' . $id_postfix;
array_push($this->shortcodes, ['id' => $item->id, 'version' => $version]);
if(sizeof($this->shortcodes) == 1) {
$this->embedLoader(true, $version);
}
ob_start(); // turn on buffering
echo '<!-- vision begin -->' . PHP_EOL;
echo '<div ';
echo (property_exists($itemData, 'containerId') && $itemData->containerId ? 'id="' . esc_attr($itemData->containerId) . '" ':'');
echo 'class="vision-map vision-map-' . esc_attr($id . ($class ? ' ' . $class : '')) . '"';
echo 'data-json-src="'. VISION_PLUGIN_UPLOAD_URL . $item->id . '/config.json' . ($version ? '?ver=' . $version : '') . '" ';
echo 'data-item-id="' . esc_attr($item->id) . '" ';
echo 'tabindex="1" ';
echo 'style="display:none;" ';
echo '>' . PHP_EOL;
//=============================================
// STORE BEGIN
echo '<div class="vision-store">' . PHP_EOL;
echo '<div class="vision-layers-data">' . PHP_EOL;
foreach($itemData->layers as $layerKey => $layer) {
if(!$layer->visible) {
continue;
}
//=============================================
// LAYER BEGIN
echo '<div class="vision-layer" data-layer-id="' . esc_attr($layer->id) . '">';
if($layer->contentData) {
echo do_shortcode($layer->contentData);
}
if($layer->type == 'text') {
echo wp_kses_post($layer->text->data);
}
if($layer->type == 'svg') {
if(!$this->IsNullOrEmptyString($layer->svg->file->url)) {
$svgUrl = ($layer->svg->file->url ? ($layer->svg->file->relative ? $upload_dir['baseurl'] : '') . $layer->svg->file->url : '');
echo file_get_contents($svgUrl, FILE_USE_INCLUDE_PATH);
}
}
echo '</div>' . PHP_EOL;
// LAYER END
//=============================================
}
echo '</div>' . PHP_EOL;
echo '<div class="vision-tooltips-data">' . PHP_EOL;
foreach($itemData->layers as $layerKey => $layer) {
if(!$layer->visible) {
continue;
}
//=============================================
// TOOLTIP BEGIN
echo '<div class="vision-data" data-layer-id="' . esc_attr($layer->id) . '">';
echo do_shortcode($layer->tooltip->data);
echo '</div>' . PHP_EOL;
// TOOLTIP END
//=============================================
}
echo '</div>' . PHP_EOL;
echo '<div class="vision-popovers-data">' . PHP_EOL;
foreach($itemData->layers as $layerKey => $layer) {
if(!$layer->visible) {
continue;
}
//=============================================
// POPOVER BEGIN
echo '<div class="vision-data" data-layer-id="' . esc_attr($layer->id) . '">';
echo do_shortcode($layer->popover->data);
echo '</div>' . PHP_EOL;
// POPOVER END
//=============================================
}
echo '</div>' . PHP_EOL;
echo '</div>' . PHP_EOL;
// STORE END
//=============================================
echo '</div>' . PHP_EOL;
echo '<!-- vision end -->' . PHP_EOL;
$output = ob_get_contents(); // get the buffered content into a var
ob_end_clean(); // clean buffer
return $output;
}
return '<p>' . esc_html__('Error: the vision item can’t be found', 'vision') . '</p>';
}
Code file location:
vision/vision/includes/plugin.phpConclusion
Now that you’ve learned how to embed the Vision – Image Map Builder 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.
Leave a Reply