On 18.01.2015, the plugin was updated to fix the problems. For the new issues introduced in version 1.3 of Browser Shots see this post.
On “What we did?” page I use “Browser Shots” plugin for generating the images of the sites where I contributed in some way. Even if is not so hard to add myself the links to “mshots” site as Binary Moon told in his article about the history of the plugin, is much more convenient to add a shortcode. And all things was fine for years.
But few days ago the plugin was updated in Repository. Reading the changelog I was very eager to update the plugin. The authors promised a lot of useful improvements – possibility to change the url where the webshot link to, possibility to open the link in a new browser window/tab, support for captions, possibility to change the height of shot.
And yes, they respected their promise. Previously I used BM Shots only to generate the images, but I’ve added myself the links to third party sites. After updating the plugin I was able to change all links in an half of hour , using only the parameters of plugin. Cool!
BUT… I did all these changes in TEXT mode, as the Visual mode was killed completely after updating the plugin. For me wasn’t a problem with the plugin itself, anyway for making the changes I need to work in TEXT mode for removing my old links, but for writing my posts I need the Visual mode. So, I tried to solve the problem. Looking in browser-shots.php I found this code:
|
1 2 3 4 5 6 7 8 |
/** * Register TinyMCE Plugin */ public function add_plugin( $plugin_array ) { $plugin_array['browsershots'] = plugins_url( 'js/browser-shots.min.js' , __FILE__ ); return $plugin_array; } |
As you can see the plugin looks for browser-shots.min.js file which, guess what, simply is not packed in the plugin. Instead exist only browser-shots.js…
BEEEE-YOOOO-TIFUL!!! The problem is solved I thought… I can change the call from php file to the existing js file, or I can make a copy of js file which can be renamed as browser-shot.min.js and all things will start to works…
No, it wasn’t so simple… Yes, after I made the changes the buttons come back in their places… but Browser Shot button don’t does nothing… inserts only a closing bracket “]” on page. Not good… Editing the js file I found this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// Dialog prompt's var width = prompt("Screenshot width:", "600"); var height = prompt("Screenshot height:", "450"); var website = prompt("What's the URL of the website?", "https://www.kevinleary.net"); // Build shortcode tag if ( website != null && website != '' ) { var shortcode = '[browser-shot url="' + website + '"'; if ( width != null && width != '' ) { shortcode += ' width="' + width + '"'; } else if ( height != null && height != '' ) { shortcode += ' height="' + height + '"'; } var shortcode = ']'; ed.execCommand( 'mceInsertContent', false, shortcode ); } |
Of course, var shortcode = ']'; overwrite all the construction from above, so, we will have only a ‘]’ on the page by using the button.
In short, I changed the code with this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/* Dialog prompt's */ var width = prompt("Screenshot width:", "600"); var height = prompt("Screenshot height:", ""); var website = prompt("What's the URL of the website?", "https://www.kevinleary.net"); var bm_alt = prompt("Image alt text",""); var bm_link = prompt("URL where the image links. Left blank it will point to the website where the screenshot is being taken",""); var bm_target = confirm("Open in new browser window/tab?"); var bm_caption = prompt("Insert a caption if you want one",""); /* Build shortcode tag */ if ( website != null && website != '' ) { var shortcode = '[browser-shot url="' + website + '"'; if ( width != null && width != '' ) { shortcode += ' width="' + width + '"'; } if ( height != null && height != '' ) { shortcode += ' height="' + height + '"'; } if (bm_link != null && bm_link !='') { shortcode += ' link="' + bm_link + '"'; } if (bm_target == true) { shortcode += ' target="_blank"'; } shortcode += ' alt="' + bm_alt + '"'; shortcode += ']' + bm_caption + '[/browser-shot]'; ed.execCommand( 'mceInsertContent', false, shortcode ); } |
The code not just solve the problem of the functionality of the button, but also I’ve added support for the new parameters introduced in this new version. Now will be prompted to insert height, link, target, even a caption, so, the shortcode will be completed only by using the button. Can download the files from here: Download Browser Shots Javascript.
The zip archive contain the modified file browser-shots.js and a minified file browser-shots.min.js (I used Notepad++ for removing whitespaces). Unzip and copy the files under /plugins/browser-shots/js folder. You need only the minified file to be there, but I left the large file if someone want to forge it. Hopefully Ben Gillbanks and Kevin Leary will add a patch for the next version of the plugin.
