While I was working on my WordPress project, I used the Image Hotspot – Map Image Annotation WordPress plugin. It can create hovering spots on images. It is a simple plugin. It was working fine until I got my site improvement. Then I had to add translations to it. There were several languages, all of which were European languages. I used the WPML advanced plugin to add translation to the site.
I couldn’t translate these image hotspots at that time using WPML. I don’t know the current situation. I haven’t had any updates. If this plugin now works with WPML correctly, please skip this article.
Combine WPML and Image Hotspot - Map Image Annotation
I made a simple solution to combine these two plugins, WPML and Image Hotspot. First, I inspected the Image Hotspot plugin. Then, I found a code part that triggers the shortcode. Then, I used the ‘
wpml_register_single_string‘ action hook and the ‘wpml_translate_single_string' filter of the WPML plugin.
This is the code part inside
shortcode.php in the root plugin directory. (You can edit the plugin file by going to Plugins -> Plugin File Editor and choosing the plugin that interests you.) Also, you can use FTP to edit plugin files in the wp-content -> plugins directory.
<?php
global $wpdb;
$style_table = $wpdb->prefix . 'imh_6310_style';
$cssData = [];
if ($ids) {
$styledata = $wpdb->get_row($wpdb->prepare("SELECT * FROM $style_table WHERE id = %d ", $ids), ARRAY_A);
if(!$styledata) return;
$css = explode("!!##!!", $styledata['css']);
$key = explode(",", $css[0]);
$value = explode("||##||", $css[1]);
$filterKey = [];
$filterValue = [];
for ($i = 0; $i < count($key); $i++) {
$filterKey[] = esc_attr($key[$i]);
}
for ($i = 0; $i < count($value); $i++) {
$filterValue[] = esc_attr($value[$i]);
}
$cssData = array_combine($filterKey, $filterValue);
}
$jsonData = isset($cssData['json_data']) ? json_decode(stripslashes(html_entity_decode($cssData['json_data']))) : [];
This code fetches data from the DB.
imh_6310_load_templates($js, $counter, $ids); This function triggers the template.
I added an
'init' action hook to the theme’s functions.php file. (You can edit files by going to Appearance -> Theme File Editor and choosing your currently activated theme. Or you can do this using FTP in the wp-content -> themes directory.) My function looks like this,
add_action('init', function () {
global $wpdb;
$table = $wpdb->prefix . 'imh_6310_style';
$rows = $wpdb->get_results("SELECT * FROM {$table}", ARRAY_A);
foreach ($rows as $row) {
$css = explode("!!##!!", $row['css']);
if (count($css) < 2) {
continue;
}
$key = explode(",", $css[0]);
$value = explode("||##||", $css[1]);
$cssData = array_combine($key, $value);
$jsonData = isset($cssData['json_data'])
? json_decode(stripslashes(html_entity_decode($cssData['json_data'])))
: [];
if (!empty($jsonData)) {
foreach ($jsonData as $index => $js) {
if (!empty($js->linkText)) {
do_action(
'wpml_register_single_string',
'Image Hotspots',
"Hotspot {$row['id']} #{$index} linkText",
$js->linkText
);
}
if (!empty($js->openDescription)) {
do_action(
'wpml_register_single_string',
'Image Hotspots',
"Hotspot {$row['id']} #{$index} openDescription",
$js->openDescription
);
}
}
}
}
});
What this is doing is combining all data into an array that is inside the DB column. Then, it registers all the strings that I need to translate. I fetch all the data from the database. Carefully extract the data values that you want to translate. In my case, I need
'linkText' and 'openDescription'. After I added this, the strings appeared inside WPML -> String Translation. So, we can add translations there.
After that, I needed to show them on the shortcode. For that, I found the
imh_6310_load_templates($js, $counter, $ids); function. It is inside the functions.php file in the plugin’s root directory. I found the place to put my translated strings. So, I added it like this inside the above function.
else if($js->selectedTemplate == '03') {
// Translate strings - My code - start
$newCounter = $counter - 1;
$translatedLinkText = apply_filters(
'wpml_translate_single_string',
$js->linkText ?? '',
'Image Hotspots',
"Hotspot {$ids} #{$newCounter} linkText"
);
$translatedDescription = apply_filters(
'wpml_translate_single_string',
$js->openDescription ?? '',
'Image Hotspots',
"Hotspot {$ids} #{$newCounter} openDescription"
);
// Translate strings - My code - End
echo "
<div class='imh-6310-hover-content imh-6310-hover-content-{$ids}-{$counter}' data-always-show='{$always_show}'
data-imh-6310-id='{$ids}-{$counter}' style='display:none;'>
{$anchorStart}
<div class='imh-6310-template-03-hover-content'>
<div class='imh-6310-template-01-hover-content'>
<div class='imh-6310-close-button imh-6310-close-button-mobile'></div>
<div class='imh-6310-template-03-tooltip-testimonial'>
<div class='imh-6310-template-03-tooltip-pic'>
<img src='{$js->openDesImg}' alt=''>
</div>
<div class='imh-6310-template-03-tooltip-testimonial-content'>
<div class='imh-6310-template-03-tooltip-testimonial-title'>".esc_html($translatedLinkText)."</div>
<div class='imh-6310-template-03-tooltip-description'>
".wp_kses_post($translatedDescription)."
</div>
</div>
</div>
</div>
</div>
{$anchorEnd}
</div>";
}
I change this html part,
<div class='imh-6310-template-03-tooltip-testimonial-content'>
<div class='imh-6310-template-03-tooltip-testimonial-title'>".esc_html($translatedLinkText)."</div>
<div class='imh-6310-template-03-tooltip-description'>
".wp_kses_post($translatedDescription)."
</div>
</div>
Hopefully, this helps someone. If you register a string that you did not intend, you can delete it from String Translation by filtering by the 'Image Hotspots' text domain. Then, try changing the name of the string like "Hotspot {ids} #{ newCounter} linkText v2". Or you can update the registered strings. Please refer to the WPML documentation.
Notice: When you update the plugin, your changes to the plugin will be lost. (You need a backup of the file.)
If you have a better solution, please skip this and let me know your solution. Thank you.