Below, you’ll find a detailed guide on how to add the Draw Attention 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 Draw Attention Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Draw Attention Plugin and the shortcodes it provides:
"Interactive Image Map Plugin – Draw Attention is a dynamic tool designed for WordPress that allows users to create engaging, responsive image maps that captivate and draw attention."
- [drawattention]
Draw Attention [drawattention] Shortcode
The Draw Attention shortcode is designed to create interactive images on your WordPress site. It fetches an image, adds hotspots, and applies custom styles. It supports WPML for multilingual sites, and Jetpack’s Photon for image loading. The shortcode generates an array of settings, including image ID, hotspot data, and style preferences. The image ID is used to retrieve the image and its metadata. Hotspots are interactive areas on the image, which can be shaped and assigned actions. The style settings determine the look of the hotspots. The shortcode also sets default values for layout, trigger events, and visibility. It enqueues CSS and scripts for the interactive image, and finally, it returns the output of the shortcode template.
Shortcode: [drawattention]
Examples and Usage
Basic example – Showcases the simplest implementation of the drawattention shortcode without any additional parameters.
[drawattention]PHP Function Code
In case you have difficulties debugging what causing issues with [drawattention] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'drawattention', array( $this, 'shortcode' ) );Shortcode PHP function:
function shortcode( $atts ) {
// Begin settings array
$settings = array(
'has_photon' => class_exists( 'Jetpack_Photon' ),
'url_hotspots' => array(),
'urls_only' => false,
'urls_class' => '',
);
// Get the DA image ID
$image_args = array(
'post_status' => 'any',
'post_type' => $this->cpt->post_type,
'posts_per_page' => 1,
'order' => 'DESC',
'orderby' => 'ID',
);
$image = new WP_Query($image_args);
if ( ! empty( $image->post ) ) {
$settings['image_id'] = $image->post->ID;
} else {
$latest_da = get_posts('post_type=' . $this->cpt->post_type . '&numberposts=1');
$settings['image_id'] = $latest_da[0]->ID;
}
// WPML Support
if ( function_exists ( 'icl_object_id' ) ) {
$settings['image_id'] = icl_object_id($settings['image_id'], 'da_image', true);
}
// Get and set DA settings
$settings['img_settings'] = get_metadata( 'post', $settings['image_id'], '', false );
if ( empty( $settings['img_settings']['_da_map_more_info'] ) ) {
$settings['img_settings']['_da_map_more_info'] = array( '' );
}
$settings['spot_id'] = 'hotspot-' . $settings['image_id'];
// Add hotspots to settings
$settings['hotspots'] = get_post_meta( $settings['image_id'], $this->custom_fields->prefix . 'hotspots', true );
if ( ! empty( $settings['hotspots']) ) {
foreach( $settings['hotspots'] as $hotspot_key => $hotspot ) {
if ( empty( $settings['hotspots'][$hotspot_key]['shape'] ) ) {
$settings['hotspots'][$hotspot_key]['shape'] = 'polygon';
}
}
}
$settings['hotspots'] = apply_filters( 'da_render_hotspots', $settings['hotspots'], $settings['image_id'] );
if ( empty( $settings['hotspots'] ) ) {
$settings['url_hotspots'] = array();
} else {
$settings['url_hotspots'] = array_filter($settings['hotspots'], function($var){
if ( empty( $var['action'] ) ) {
return false;
}
return $var['action'] == 'url';
});
if ( count( $settings['hotspots'] ) == count( $settings['url_hotspots'] ) ) {
$settings['urls_only'] = true;
$settings['urls_class'] = 'links-only';
}
}
// Set default values for free settings
$settings['layout'] = 'left';
$settings['event_trigger'] = 'click';
$settings['always_visible'] = 'false';
// Add styles to settings
$settings['border_width'] = $settings['img_settings'][$this->custom_fields->prefix.'map_border_width'][0];
$settings['border_opacity'] = $settings['img_settings'][$this->custom_fields->prefix.'map_border_opacity'][0];
$settings['more_info_bg'] = ( !empty( $settings['img_settings'][$this->custom_fields->prefix.'map_background_color'][0] ) ) ? $settings['img_settings'][$this->custom_fields->prefix.'map_background_color'][0] : '';
$settings['more_info_text'] = ( !empty( $settings['img_settings'][$this->custom_fields->prefix.'map_text_color'][0] ) ) ? $settings['img_settings'][$this->custom_fields->prefix.'map_text_color'][0] : '';
$settings['more_info_title'] = ( !empty( $settings['img_settings'][$this->custom_fields->prefix.'map_title_color'][0] ) ) ? $settings['img_settings'][$this->custom_fields->prefix.'map_title_color'][0] : '';
$settings['img_bg'] = ( !empty( $settings['img_settings'][$this->custom_fields->prefix.'image_background_color'][0] ) ) ? $settings['img_settings'][$this->custom_fields->prefix.'image_background_color'][0] : '#efefef';
// Create hotspot style
if ( empty( $settings['styles'] ) ) {
$settings['styles'] = array();
}
$settings['styles'][] = array(
'title' => 'default',
'map_highlight_color' => !empty( $settings['img_settings'][$this->custom_fields->prefix.'map_highlight_color'][0] ) ? $settings['img_settings'][$this->custom_fields->prefix.'map_highlight_color'][0] : '',
'map_highlight_opacity' => !empty( $settings['img_settings'][$this->custom_fields->prefix.'map_highlight_opacity'][0] ) ? $settings['img_settings'][$this->custom_fields->prefix.'map_highlight_opacity'][0] : '',
'map_border_color' => !empty( $settings['img_settings'][$this->custom_fields->prefix.'map_border_color'][0] ) ? $settings['img_settings'][$this->custom_fields->prefix.'map_border_color'][0] : '',
'_da_map_hover_color' => !empty( $settings['img_settings'][$this->custom_fields->prefix.'map_hover_color'][0] ) ? $settings['img_settings'][$this->custom_fields->prefix.'map_hover_color'][0] : '',
'_da_map_hover_opacity' => !empty( $settings['img_settings'][$this->custom_fields->prefix.'map_hover_opacity'][0] ) ? $settings['img_settings'][$this->custom_fields->prefix.'map_hover_opacity'][0] : ''
);
// Create formatted array of styles
$formatted_styles = array();
foreach ($settings['styles'] as $key => $style) {
if ( empty( $style['title'] ) ) {
$style['title'] = 'Custom';
}
$new_style = array(
'name' => 'default',
'borderWidth' => $settings['border_width'],
);
$new_style['display'] = array(
'fillColor' => '#ffffff',
'fillOpacity' => 0,
'borderColor' => '#ffffff',
'borderOpacity' => 0,
);
$new_style['hover'] = array(
'fillColor' => $style['map_highlight_color'],
'fillOpacity' => $style['map_highlight_opacity'],
'borderColor' => $style['map_border_color'],
'borderOpacity' => $settings['border_opacity'],
);
array_push($formatted_styles, $new_style);
}
// Get image post, src, and meta
$settings['img_post'] = get_post($settings['image_id']);
$settings['img_src'] = wp_get_attachment_image_src( get_post_thumbnail_id( $settings['image_id'] ), 'full' );
$settings['img_url'] = $settings['img_src'][0];
$settings['img_width'] = $settings['img_src'][1];
$settings['img_height'] = $settings['img_src'][2];
$settings['img_alt'] = get_post_meta( get_post_thumbnail_id( $settings['img_post'] ), '_wp_attachment_image_alt', true );
if ( empty( $settings['img_alt'] ) ) {
$settings['img_alt'] = get_the_title( $settings['img_post'] );
}
// Enqueue CSS and Scripts
wp_enqueue_style( $this->plugin_slug . '-plugin-styles' );
wp_enqueue_script( $this->plugin_slug . '-plugin-script' );
$this->photon_excluded_images[ $settings['image_id'] ] = $settings['img_url'];
// Create a new embed
$wp_embed = new WP_Embed();
ob_start();
require( $this->get_plugin_dir() . '/public/views/shortcode_template.php' );
return ob_get_clean();
}
Code file location:
draw-attention/draw-attention/public/class-drawattention.phpConclusion
Now that you’ve learned how to embed the Draw Attention 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