Below, you’ll find a detailed guide on how to add the ImageLinks Interactive Image Builder for WordPress 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 ImageLinks Interactive Image Builder for WordPress Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the ImageLinks Interactive Image Builder for WordPress Plugin and the shortcodes it provides:
"ImageLinks Interactive Image Builder for WordPress is a powerful plugin allowing users to create interactive images. With this tool, enhance your site's visuals and user engagement effortlessly."
- [IMAGELINKS_SHORTCODE_NAME]
ImageLinks Interactive Image Builder for WordPress [IMAGELINKS_SHORTCODE_NAME] Shortcode
The Imagelinks Interactive Image Builder Lite plugin shortcode enables users to embed interactive images on their WordPress site. It validates attributes, fetches data from the database, and generates HTML code for interactive images.
Shortcode: [IMAGELINKS_SHORTCODE_NAME]
Parameters
Here is a list of all possible IMAGELINKS_SHORTCODE_NAME shortcode parameters and attributes:
id– Unique identifier for the specific imagelinks instance.class– Optional CSS class to customize the imagelinks instance’s appearance.
Examples and Usage
Basic example – Display an interactive image map using the imagelinks shortcode. This shortcode uses the ID of the image map as a parameter.
[imagelinks id="5" /]Advanced examples
Display an interactive image map with a specific CSS class. The class parameter allows you to add custom styles to your image map.
[imagelinks id="5" class="my-custom-class" /]Display multiple interactive image maps in the same page. To avoid clashes, each shortcode should have a unique ID.
[imagelinks id="5" /]
[imagelinks id="6" /]
[imagelinks id="7" /]Please note that the ID parameter is required for the shortcode to work. If an invalid ID is provided, an error message will be displayed. Also, make sure that the image map with the given ID is active and visible.
PHP Function Code
In case you have difficulties debugging what causing issues with [IMAGELINKS_SHORTCODE_NAME] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode(IMAGELINKS_SHORTCODE_NAME, array($this, 'shortcode'));Shortcode PHP function:
function shortcode($atts) {
$keys_valid = ['id', 'class'];
$atts_valid = array_filter($atts, function($key) use ($keys_valid) {
return in_array($key, $keys_valid);
}, ARRAY_FILTER_USE_KEY);
extract(shortcode_atts(['id' => 0, 'class' => NULL], $atts_valid, IMAGELINKS_SHORTCODE_NAME));
if(!$id) {
return '<p>' . esc_html__('Error: invalid imagelinks shortcode attributes', 'imagelinks') . '</p>';
}
$id = intval($id, 10);
$class = sanitize_text_field($class);
global $wpdb;
$table = $wpdb->prefix . IMAGELINKS_PLUGIN_NAME;
$upload_dir = wp_upload_dir();
$query = $wpdb->prepare("SELECT * FROM {$table} WHERE id=%s", $id);
$item = $wpdb->get_row($query, OBJECT);
if($item) {
if(!$item->active) {
return;
}
$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 = 'imgl-' . $id . '-' . $id_postfix;
array_push($this->shortcodes, ['id' => $item->id, 'version' => $version]);
if(sizeof($this->shortcodes) == 1) {
$plugin_url = plugin_dir_url(dirname(__FILE__));
wp_enqueue_script('imagelinks_loader_js', $plugin_url . 'assets/js/loader.min.js', ['jquery'], IMAGELINKS_PLUGIN_VERSION, true);
$globals = [
'plan' => IMAGELINKS_PLUGIN_PLAN,
'version' => $version,
'fontawesome_url' => $plugin_url . 'assets/css/font-awesome.min.css',
'effects_url' => $plugin_url . 'assets/js/lib/imagelinks/imagelinks-effects.min.css',
'theme_base_url' => $plugin_url . 'assets/themes/',
'plugin_base_url' => $plugin_url . 'assets/js/lib/imagelinks/',
'plugin_upload_base_url' => IMAGELINKS_PLUGIN_UPLOAD_URL
];
wp_localize_script('imagelinks_loader_js', 'imagelinks_globals', $globals);
}
ob_start(); // turn on buffering
echo '<!-- imagelinks begin -->' . PHP_EOL;
echo '<div ';
echo 'id="' . esc_attr($id_element) . '" ';
echo 'class="imgl-map imgl-map-' . esc_attr($id . ' ' . ($class ? ' ' . $class : '')) . '"'; // $class from shortcode
echo 'data-json-src="'. esc_url(IMAGELINKS_PLUGIN_UPLOAD_URL . $item->id . '/config.json?ver=' . $version) . '" ';
echo 'data-item-id="' . esc_attr($item->id) . '" ';
echo 'style="display:none;" ';
echo '>' . PHP_EOL;
//=============================================
// STORE BEGIN
echo '<div class="imgl-store">' . PHP_EOL;
$markerId = 0;
foreach($itemData->markers as $markerKey => $marker) {
if(!$marker->visible) {
continue;
}
$markerId++;
//=============================================
// MARKER BEGIN
echo '<div class="imgl-pin imgl-pin-' . esc_attr($markerId) . '" data-id="' . esc_attr($markerId) . '">' . PHP_EOL;
if($marker->view->pulse->active) {
echo '<div class="imgl-pin-pulse"></div>' . PHP_EOL;
}
echo '<div class="imgl-pin-data">' . PHP_EOL;
if(!$this->IsNullOrEmptyString($marker->view->icon->name) || !$this->IsNullOrEmptyString($marker->view->icon->label)) {
echo '<div class="imgl-ico-wrap">' . PHP_EOL;
if(!$this->IsNullOrEmptyString($marker->view->icon->name)) {
echo '<div class="imgl-ico"><i class="fa ' . esc_attr($marker->view->icon->name) . '"></i></div>' . PHP_EOL;
}
if(!$this->IsNullOrEmptyString($marker->view->icon->label)) {
echo '<div class="imgl-ico-lbl">' . esc_html($marker->view->icon->label) . '</div>' . PHP_EOL;
}
echo '</div>' . PHP_EOL;
}
echo '</div>' . PHP_EOL;
echo '</div>' . PHP_EOL;
// MARKER END
//=============================================
}
$markerId = 0;
foreach($itemData->markers as $markerKey => $marker) {
if(!$marker->visible) {
continue;
}
$markerId++;
//=============================================
// TOOLTIP BEGIN
echo '<div ';
echo 'class="imgl-tt imgl-tt-' . esc_attr($markerId) . '" ';
echo 'data-id="' . esc_attr($markerId) . '" ';
echo '>' . PHP_EOL;
echo do_shortcode($marker->tooltip->data);
echo '</div>' . PHP_EOL;
// TOOLTIP END
//=============================================
}
echo '</div>' . PHP_EOL;
// STORE END
//=============================================
echo '</div>' . PHP_EOL;
echo '<!-- imagelinks end -->' . PHP_EOL;
$output = ob_get_contents(); // get the buffered content into a var
ob_end_clean(); // clean buffer
return $output;
} else {
return '<p>' . esc_html__('Error: invalid imagelinks database record', 'imagelinks') . '</p>';
}
}
Code file location:
imagelinks-interactive-image-builder-lite/imagelinks-interactive-image-builder-lite/includes/plugin.phpConclusion
Now that you’ve learned how to embed the ImageLinks Interactive Image Builder for WordPress 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