jQuery Pin It Button for Images - Version 0.9

Version Description

  • Released 2013-01-28
  • Feature: Ability to use custom Pinterest button design
Download this release

Release Info

Developer mrsztuczkens
Plugin Icon wp plugin jQuery Pin It Button for Images
Version 0.9
Comparing to
See all releases

Code changes from version 0.8 to 0.9

Files changed (6) hide show
  1. css/admin.css +2 -2
  2. css/style.css +0 -3
  3. jpibfi-admin.php +164 -0
  4. jquery-pin-it-button-for-images.php +73 -113
  5. js/admin.js +19 -2
  6. readme.txt +16 -3
css/admin.css CHANGED
@@ -44,8 +44,8 @@ table.form-table th {
44
  background-color: #FFBABA;
45
  }
46
 
47
- .error-border {
48
- border: 1px solid #ff8387;
49
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
50
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
51
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
44
  background-color: #FFBABA;
45
  }
46
 
47
+ .settings-table .error-border {
48
+ border: 2px solid #ff8387;
49
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
50
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
51
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
css/style.css CHANGED
@@ -21,8 +21,5 @@
21
  left:0%;
22
  margin:20px 0 0 20px;
23
  display:block;
24
- width:65px;
25
- height:41px;
26
- background:transparent url('../images/pinit-button.png') no-repeat 0 0;
27
  text-indent:-9999em;
28
  }
21
  left:0%;
22
  margin:20px 0 0 20px;
23
  display:block;
 
 
 
24
  text-indent:-9999em;
25
  }
jpibfi-admin.php ADDED
@@ -0,0 +1,164 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ if (!empty($_SERVER['SCRIPT_FILENAME']) && 'jquery-pin-it-button-for-images.php' == basename($_SERVER['SCRIPT_FILENAME']))
3
+ die ('Stop! Hammer time!'); //settings file shouldn't be accessed directly
4
+ ?>
5
+
6
+ <div class="wrap">
7
+ <h2>jQuery Pin It Button For Images</h2>
8
+
9
+ <form method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>">
10
+ <?php wp_nonce_field("jpibfi_admin_settings", 'jpibfi_nonce'); ?>
11
+ <h3>Plugin settings</h3>
12
+
13
+ <table class="settings-table">
14
+ <tbody>
15
+ <tr>
16
+ <th scope="row"><label for="image_selector">Image selector</label></th>
17
+ <td>
18
+ <input type="text" id="image_selector" name="image_selector"
19
+ value="<?php echo esc_attr($dev_options['image_selector']);?>"/>
20
+
21
+ <p class="description">jQuery selector for all the images that should have the "Pin it" button. Set
22
+ the value to <a href="#" class="jpibfi_selector_option">div.jpibfi_container img</a> if you want
23
+ the "Pin it" button to appear only on images in content or <a href="#" class="jpibfi_selector_option">img</a>
24
+ to appear on all images on site (including sidebar, header and footer). If you know a thing or
25
+ two about jQuery, you might use your own selector. <a href="http://api.jquery.com/category/selectors/" target="_blank">Click here</a> to read
26
+ about jQuery selectors.</p>
27
+ </td>
28
+ </tr>
29
+ <tr>
30
+ <th scope="row"><label for="disabled_classes">Disabled classes</label></th>
31
+ <td>
32
+ <div class="left-element">
33
+ <textarea id="disabled_classes"
34
+ name="disabled_classes" <?php $this->print_error_class( $errors, 'disabled_classes'); ?>><?php echo esc_attr($dev_options['disabled_classes']);?></textarea>
35
+ </div>
36
+ <?php $this->print_error_div("disabled_classes_error", $errors, "disabled_classes",
37
+ "Error. Please change this setting and try submitting again."); ?>
38
+
39
+ <p class="description">Pictures with these CSS classes won't show the "Pin it" button. Please
40
+ separate multiple classes with semicolons. Spaces are not accepted.</p>
41
+ </td>
42
+ </tr>
43
+ <tr>
44
+ <th scope="row"><label for="enabled_classes">Enabled classes</label></th>
45
+ <td>
46
+ <div class="left-element">
47
+ <textarea id="enabled_classes"
48
+ name="enabled_classes" <?php $this->print_error_class( $errors, 'enabled_classes'); ?>><?php echo $dev_options['enabled_classes'];?></textarea>
49
+ </div>
50
+ <?php $this->print_error_div("enabled_classes_error", $errors, "enabled_classes",
51
+ "Error. Please change this setting and try submitting again."); ?>
52
+
53
+ <p class="description">Pictures with these CSS classes will show the "Pin it" button. Please
54
+ separate multiple classes with semicolons. If this field is empty, images with any (besides
55
+ disabled ones) classes will show the Pin It button.</p>
56
+ </td>
57
+ </tr>
58
+ <tr>
59
+ <th scope="row"><label for="description_option">Description source</label></th>
60
+ <td>
61
+ <select id="description_option" name="description_option">
62
+ <option value="1" <?php if ("1" == $dev_options['description_option']) echo "selected='selected'"; ?>>
63
+ Page title
64
+ </option>
65
+ <option value="2" <?php if ("2" == $dev_options['description_option']) echo "selected='selected'"; ?>>
66
+ Page description
67
+ </option>
68
+ <option value="3" <?php if ("3" == $dev_options['description_option']) echo "selected='selected'"; ?>>
69
+ Picture title or alt attributes
70
+ </option>
71
+ </select>
72
+
73
+ <p class="description">From where the Pinterest message should be taken.</p>
74
+ </td>
75
+ </tr>
76
+ <tr>
77
+ <th scope="row"><label for="compatibility_mode">Transparency</label></th>
78
+ <td>
79
+ <select name="compatibility_mode" id="compatibility_mode">
80
+ <option value="0" <?php echo "0" == $dev_options['compatibility_mode'] ? "selected='selected'" : "";?>>
81
+ Standard mode
82
+ </option>
83
+ <option value="1" <?php echo "1" == $dev_options['compatibility_mode'] ? "selected='selected'" : "";?>>
84
+ IE7 Compatibility mode
85
+ </option>
86
+ </select>
87
+
88
+ <p id="standard_mode_transparency" <?php echo "1" == $dev_options['compatibility_mode'] ? "style='display:none'" : "";?>>
89
+ <label for="standard_transparency">Choose transparency (between 0.00 and 1.00)</label><br/>
90
+ <input type="text" id="standard_transparency" name="standard_transparency"
91
+ value="<?php echo $dev_options['transparency_value'];?>" <?php $this->print_error_class( $errors, 'transparency_value'); ?>/>
92
+
93
+ <?php $this->print_error_div("standard_transparency_error", $errors, "transparency_value",
94
+ "The number is not valid. Please change the value and try submitting again."); ?>
95
+
96
+ </p>
97
+ <p id="compatibility_mode_transparency" <?php echo "0" == $dev_options['compatibility_mode'] ? "style='display:none'" : "";?>>
98
+ <label for="compatibility_transparency">Choose transparency</label><br/>
99
+ <select name="compatibility_transparency" id="compatibility_transparency">
100
+ <?php for ($i = 0; $i <= 1; $i += 0.1): ?>
101
+ <option value="<?php echo $i;?>" <?php if (round($i, 1) == round($dev_options['transparency_value'], 1)) echo "selected='selected'"; ?>>
102
+ <?php echo $i;?>
103
+ </option>
104
+ <?php endfor; ?>
105
+ </select>
106
+ </p>
107
+ <p class="description">If you want the plugin to work properly on IE7, meaning the image will become
108
+ transparent on hover, you need to use IE7 Compatibility mode.</p>
109
+ </td>
110
+ </tr>
111
+ <tr>
112
+ <th scope="row"><label>Use custom Pinterest button</label></th>
113
+ <td>
114
+ <input type="checkbox" id="use_custom_image" name="use_custom_image" value="1" <?php echo "1" == $dev_options["use_custom_image"] ? "checked='checked'" : "" ?> />
115
+ <label class="chbox-label" for="use_custom_image">Use custom image</label><br/>
116
+
117
+ <p><label for="custom_image_url">URL address of the image</label><br/>
118
+ <input type="text" id="custom_image_url" name="custom_image_url" value="<?php echo $dev_options["custom_image_url"]; ?>" />
119
+ </p>
120
+
121
+ <div class="left-element" style="clear:both;"><label for="custom_image_height">Height of the image (in pixels)</label><br/>
122
+ <input type="text" id="custom_image_height" name="custom_image_height" value="<?php echo $dev_options["custom_image_height"]; ?>"
123
+ <?php $this->print_error_class( $errors, 'custom_image_height'); ?> />
124
+ </div>
125
+ <?php $this->print_error_div("custom_image_height_error", $errors, "custom_image_height",
126
+ "Must be either blank or a number"); ?>
127
+
128
+ <div class="left-element" style="clear:both;"><label for="custom_image_width">Width of the image (in pixels)</label><br/>
129
+ <input type="text" id="custom_image_width" name="custom_image_width" value="<?php echo $dev_options["custom_image_width"]; ?>"
130
+ <?php $this->print_error_class( $errors, 'custom_image_width'); ?> />
131
+ </div>
132
+ <?php $this->print_error_div("custom_image_width_error", $errors, "custom_image_width",
133
+ "Must be either blank or a number"); ?>
134
+
135
+ <p class="description">Check the <b>Use custom image</b> checkbox, specify image's URL, height and width to use your own Pinterest button design.</p>
136
+ </td>
137
+ </tr>
138
+ <tr>
139
+ <th scope="row"><label>On which pages the "Pin it" button should be shown</label></th>
140
+ <td>
141
+ <input type="checkbox" id="on_home"
142
+ name="on_home" <?php echo "1" == $advanced_dev_options['on_home'] ? "checked='checked'" : "";?> value="1" /><label class="chbox-label" for="on_home"> Home page</label><br/>
143
+ <input type="checkbox" id="on_page"
144
+ name="on_page" <?php echo "1" == $advanced_dev_options['on_page'] ? "checked='checked'" : "";?> value="1" /><label class="chbox-label" for="on_page"> Pages</label><br/>
145
+ <input type="checkbox" id="on_single"
146
+ name="on_single" <?php echo "1" == $advanced_dev_options['on_single'] ? "checked='checked'" : "";?> value="1" /><label class="chbox-label" for="on_single"> Single posts</label><br/>
147
+ <input type="checkbox" id="on_category"
148
+ name="on_category" <?php echo "1" == $advanced_dev_options['on_category'] ? "checked='checked'" : "";?> value="1" /><label class="chbox-label" for="on_category"> Category pages</label>
149
+
150
+ <p class="description">Check on which pages you want the Pinterest button to show up.</p>
151
+ </td>
152
+ </tr>
153
+ <tr>
154
+ <th scope="row"></th>
155
+ <td>
156
+ <input id="submit_form" type="submit" style="padding:7px; float:right;"
157
+ name="update_jQuery_Pin_It_Button_For_Images"
158
+ value="<?php _e('Update Settings', 'jQuery_Pin_It_Button_For_Images') ?>"/>
159
+ </td>
160
+ </tr>
161
+ </tbody>
162
+ </table>
163
+ </form>
164
+ </div>
jquery-pin-it-button-for-images.php CHANGED
@@ -4,14 +4,14 @@
4
  Plugin URI: http://wordpress.org/extend/plugins/jquery-pin-it-button-for-images/
5
  Description: Highlights images on hover and adds a "Pin It" button over them for easy pinning.
6
  Author: Marcin Skrzypiec
7
- Version: 0.8
8
  Author URI: http://profiles.wordpress.org/mrsztuczkens
9
  */
10
 
11
  if (!empty($_SERVER['SCRIPT_FILENAME']) && 'jquery-pin-it-button-for-images.php' == basename($_SERVER['SCRIPT_FILENAME']))
12
  die ('Stop! Hammer time!'); //Plugin shouldn't be accessed directly
13
 
14
- define("JPIBFI_VERSION", "0.8");
15
 
16
  if (!class_exists("jQuery_Pin_It_Button_For_Images")) {
17
  class jQuery_Pin_It_Button_For_Images {
@@ -45,18 +45,42 @@
45
  }
46
  return $only_css_class_names;
47
  }
 
 
 
 
48
 
49
  //END SETTINGS VALIDATION CODE
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
 
51
  //Returns an array of basic admin options, updates settings if necessary
52
  function get_basic_options() {
53
  $admin_options = array(
54
  'image_selector' => 'div.jpibfi_container img',
55
  'disabled_classes' => 'nopin;wp-smiley',
56
- 'description_option' => '1',
57
  'enabled_classes' => '',
58
- 'compatibility_mode' => $this->description_option_values[0],
59
- 'transparency_value' => '0.5'
 
 
 
 
60
  );
61
 
62
  $dev_options = get_option( self::$admin_basic_options_name );
@@ -67,10 +91,11 @@
67
  if ( ! empty( $dev_options ) ) {
68
  foreach ( $dev_options as $key => $option ) {
69
  switch ($key) {
70
- case "image_selector":
 
71
  $admin_options[$key] = $option;
72
  break;
73
- case "disabled_classes":
74
  case "enabled_classes":
75
  if ( $this->contains_css_class_names_or_empty( $option ) )
76
  $admin_options[$key] = $option;
@@ -83,17 +108,25 @@
83
  else
84
  $changes_in_db = true;
85
  break;
86
- case "compatibility_mode":
 
87
  if ( strcmp( $option, '0') != 0 && strcmp( $option, '1') != 0 ) //invalid value in database
88
  $changes_in_db = true;
89
  else
90
  $admin_options[$key] = $option;
91
  break;
92
- case "transparency_value":
93
  if ( !is_numeric( $option ) || ( $option < 0 ) || ( $option > 1 ) )
94
  $changes_in_db = true;
95
  else
96
  $admin_options[$key] = $option;
 
 
 
 
 
 
 
97
  break;
98
  }
99
  }
@@ -205,10 +238,24 @@
205
  plugins_url( '/images/transparency/'.
206
  str_replace( '.','_', $dev_options['transparency_value'] ) . '.png', __FILE__) . "') repeat;";
207
 
 
 
 
 
 
 
 
 
 
 
208
  ?>
209
- <style type="text/css">
210
- .pinit .pinit-overlay { <?php echo $css; ?> }
211
- </style>
 
 
 
 
212
  <?php
213
  }
214
 
@@ -234,7 +281,7 @@
234
 
235
  if ( isset( $_POST['update_jQuery_Pin_It_Button_For_Images']) ) {
236
  //security check
237
- if ( !wp_verify_nonce( $_POST['jpibfi_nonce'], plugin_basename( __FILE__ ) ) )
238
  die( 'Security alert');
239
 
240
  $errors = array();
@@ -244,6 +291,12 @@
244
 
245
  if ( ! $this->contains_css_class_names_or_empty( $_POST['enabled_classes'] ) )
246
  $errors['enabled_classes'] = true;
 
 
 
 
 
 
247
 
248
  //rewrite settings that came from the POST request
249
  $dev_options['image_selector'] = sanitize_text_field( $_POST['image_selector'] );
@@ -254,6 +307,12 @@
254
  $dev_options['enabled_classes'] = $_POST['enabled_classes'];
255
  $dev_options['description_option'] = $_POST['description_option'];
256
 
 
 
 
 
 
 
257
  if ($dev_options['compatibility_mode'] =='0')
258
  if ( !is_numeric( $dev_options['transparency_value'] ) || ( $dev_options['transparency_value'] < 0.0 ) || ( $dev_options['transparency_value'] > 1.0 ) )
259
  $errors['transparency_value'] = true;
@@ -275,106 +334,7 @@
275
  <?php
276
  }
277
  }
278
- ?>
279
- <div class="wrap">
280
- <h2>jQuery Pin It Button For Images</h2>
281
- <form method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>">
282
- <?php wp_nonce_field( plugin_basename( __FILE__ ), 'jpibfi_nonce' ); ?>
283
- <h3>Plugin settings</h3>
284
-
285
- <table class="settings-table">
286
- <tbody>
287
- <tr>
288
- <th scope="row"><label for="image_selector">Image selector</label></th>
289
- <td>
290
- <input type="text" id="image_selector" name="image_selector" value="<?php echo esc_attr( $dev_options['image_selector'] );?>" />
291
- <p class="description">jQuery selector for all the images that should have the "Pin it" button. Set the value to <a href="#" class="jpibfi_selector_option">div.jpibfi_container img</a> if you want the "Pin it" button to appear only on images in content or <a href="#" class="jpibfi_selector_option">img</a> to appear on all images on site (including sidebar, header and footer). If you know a thing or two about jQuery, you might use your own selector. <a href="http://api.jquery.com/category/selectors/" target="_blank">Click here</a> to read about jQuery selectors.</p>
292
- </td>
293
- </tr>
294
- <tr>
295
- <th scope="row"><label for="disabled_classes">Disabled classes</label></th>
296
- <td>
297
- <div class="left-element">
298
- <textarea id="disabled_classes" name="disabled_classes" <?php if ( !empty($errors) && array_key_exists( 'disabled_classes', $errors ) ) echo "class='error-border'"; ?>><?php echo esc_attr( $dev_options['disabled_classes'] );?></textarea>
299
- </div>
300
- <div id="disabled_classes_error" class="error-info" <?php if ( !empty($errors) && array_key_exists( 'disabled_classes', $errors ) ) echo "style='display:block;'"; ?>>
301
- Error. Please change this setting and try submitting again.
302
- </div>
303
- <p class="description">Pictures with these CSS classes won't show the "Pin it" button. Please separate multiple classes with semicolons. Spaces are not accepted.</p>
304
- </td>
305
- </tr>
306
- <tr>
307
- <th scope="row"><label for="enabled_classes">Enabled classes</label></th>
308
- <td>
309
- <div class="left-element">
310
- <textarea id="enabled_classes" name="enabled_classes" <?php if ( !empty($errors) && array_key_exists( 'enabled_classes', $errors ) ) echo "class='error-border'"; ?>><?php echo $dev_options['enabled_classes'];?></textarea>
311
- </div>
312
- <div id="enabled_classes_error" class="error-info" <?php if ( !empty($errors) && array_key_exists( 'enabled_classes', $errors ) ) echo "style='display:block;'"; ?>>
313
- Error. Please change this setting and try submitting again.
314
- </div>
315
- <p class="description">Pictures with these CSS classes will show the "Pin it" button. Please separate multiple classes with semicolons. If this field is empty, images with any (besides disabled ones) classes will show the Pin It button.</p>
316
- </td>
317
- </tr>
318
- <tr>
319
- <th scope="row"><label for="description_option">Description source</label></th>
320
- <td>
321
- <select id="description_option" name="description_option">
322
- <option value="1" <?php if ( "1" == $dev_options['description_option'] ) echo "selected='selected'"; ?>>Page title</option>
323
- <option value="2" <?php if ( "2" == $dev_options['description_option'] ) echo "selected='selected'"; ?>>Page description</option>
324
- <option value="3" <?php if ( "3" == $dev_options['description_option'] ) echo "selected='selected'"; ?>>Picture title or alt attributes</option>
325
- </select>
326
- <p class="description">From where the Pinterest message should be taken.</p>
327
- </td>
328
- </tr>
329
- <tr>
330
- <th scope="row"><label for="compatibility_mode">Transparency</label></th>
331
- <td>
332
- <select name="compatibility_mode" id="compatibility_mode">
333
- <option value="0" <?php echo "0" == $dev_options['compatibility_mode'] ? "selected='selected'" : "";?>>Standard mode</option>
334
- <option value="1" <?php echo "1" == $dev_options['compatibility_mode'] ? "selected='selected'" : "";?>>IE7 Compatibility mode</option>
335
- </select>
336
- <p id="standard_mode_transparency" <?php echo "1" == $dev_options['compatibility_mode'] ? "style='display:none'" : "";?>>
337
- <label for="standard_transparency">Choose transparency (between 0.00 and 1.00)</label><br/>
338
- <input type="text" id="standard_transparency" name="standard_transparency" value="<?php echo $dev_options['transparency_value'];?>" <?php if ( !empty($errors) && array_key_exists( 'transparency_value', $errors ) ) echo "class='error-border'"; ?>/>
339
- <div id="standard_transparency_error" class="error-info" <?php if ( !empty($errors) && array_key_exists( 'transparency_value', $errors ) ) echo "style='display:block;'"; ?>>
340
- The number is not valid. Please change the value and try submitting again.
341
- </div>
342
- </p>
343
- <p id="compatibility_mode_transparency" <?php echo "0" == $dev_options['compatibility_mode'] ? "style='display:none'" : "";?>>
344
- <label for="compatibility_transparency">Choose transparency</label><br/>
345
- <select name="compatibility_transparency" id="compatibility_transparency">
346
- <?php for($i = 0; $i <= 1; $i += 0.1): ?>
347
- <option value="<?php echo $i;?>" <?php if ( round( $i, 1 ) == round( $dev_options['transparency_value'], 1 ) ) echo "selected='selected'"; ?>>
348
- <?php echo $i;?>
349
- </option>
350
- <?php endfor; ?>
351
- </select>
352
- </p>
353
- <!-- miejsce na odpowiednią zmieniarkę-->
354
- <p class="description">If you want the plugin to work properly on IE7, meaning the image will become transparent on hover, you need to use IE7 Compatibility mode.</p>
355
- </td>
356
- </tr>
357
- <tr>
358
- <th scope="row"><label>One which pages the "Pin it" button should be shown</label></th>
359
- <td>
360
- <input type="checkbox" id="on_home" name="on_home" <?php echo "1" == $advanced_dev_options['on_home'] ? "checked='checked'" : "";?>" value="1" /><label class="chbox-label" for="on_home"> Home page</label><br/>
361
- <input type="checkbox" id="on_page" name="on_page" <?php echo "1" == $advanced_dev_options['on_page'] ? "checked='checked'" : "";?>" value="1" /><label class="chbox-label" for="on_page"> Pages</label><br/>
362
- <input type="checkbox" id="on_single" name="on_single" <?php echo "1" == $advanced_dev_options['on_single'] ? "checked='checked'" : "";?>" value="1" /><label class="chbox-label" for="on_single"> Single posts</label><br/>
363
- <input type="checkbox" id="on_category" name="on_category" <?php echo "1" == $advanced_dev_options['on_category'] ? "checked='checked'" : "";?>" value="1" /><label class="chbox-label" for="on_category"> Category pages</label>
364
- <p class="description">Check on which pages you want the Pinterest button to show up.</p>
365
- </td>
366
- </tr>
367
- <tr>
368
- <th scope="row"></th>
369
- <td>
370
- <input id="submit_form" type="submit" style="padding:7px; float:right;" name="update_jQuery_Pin_It_Button_For_Images" value="<?php _e( 'Update Settings', 'jQuery_Pin_It_Button_For_Images' ) ?>" />
371
- </td>
372
- </tr>
373
- </tbody>
374
- </table>
375
- </form>
376
- </div>
377
- <?php
378
  }//End function print_admin_page()
379
 
380
  function print_admin_page_action() {
4
  Plugin URI: http://wordpress.org/extend/plugins/jquery-pin-it-button-for-images/
5
  Description: Highlights images on hover and adds a "Pin It" button over them for easy pinning.
6
  Author: Marcin Skrzypiec
7
+ Version: 0.9
8
  Author URI: http://profiles.wordpress.org/mrsztuczkens
9
  */
10
 
11
  if (!empty($_SERVER['SCRIPT_FILENAME']) && 'jquery-pin-it-button-for-images.php' == basename($_SERVER['SCRIPT_FILENAME']))
12
  die ('Stop! Hammer time!'); //Plugin shouldn't be accessed directly
13
 
14
+ define("JPIBFI_VERSION", "0.9");
15
 
16
  if (!class_exists("jQuery_Pin_It_Button_For_Images")) {
17
  class jQuery_Pin_It_Button_For_Images {
45
  }
46
  return $only_css_class_names;
47
  }
48
+
49
+ function is_numeric_or_empty($str) {
50
+ return ( is_numeric($str) || "" === $str );
51
+ }
52
 
53
  //END SETTINGS VALIDATION CODE
54
+
55
+ //HELPERS
56
+
57
+ function print_error_class($error_array, $field_name) {
58
+ if ( !empty( $error_array ) && array_key_exists( $field_name, $error_array ) )
59
+ echo "class='error-border'";
60
+ }
61
+
62
+ function print_error_div($div_id, $error_array, $field_name, $message) {
63
+ $display_message = "";
64
+ if ( !empty($error_array) && array_key_exists($field_name, $error_array) )
65
+ $display_message = "style='display:block;'";
66
+ printf('<div id="%s" class="error-info" %s>%s</div>', $div_id, $display_message, $message);
67
+ }
68
+
69
+ //END HELPERS
70
 
71
  //Returns an array of basic admin options, updates settings if necessary
72
  function get_basic_options() {
73
  $admin_options = array(
74
  'image_selector' => 'div.jpibfi_container img',
75
  'disabled_classes' => 'nopin;wp-smiley',
76
+ 'description_option' => $this->description_option_values[0],
77
  'enabled_classes' => '',
78
+ 'compatibility_mode' => '0',
79
+ 'transparency_value' => '0.5',
80
+ 'use_custom_image' => '0',
81
+ 'custom_image_url' => '',
82
+ 'custom_image_height'=> '',
83
+ 'custom_image_width' => ''
84
  );
85
 
86
  $dev_options = get_option( self::$admin_basic_options_name );
91
  if ( ! empty( $dev_options ) ) {
92
  foreach ( $dev_options as $key => $option ) {
93
  switch ($key) {
94
+ case "image_selector": //no constraints
95
+ case "custom_image_url":
96
  $admin_options[$key] = $option;
97
  break;
98
+ case "disabled_classes": //contains list of css classes or is empty
99
  case "enabled_classes":
100
  if ( $this->contains_css_class_names_or_empty( $option ) )
101
  $admin_options[$key] = $option;
108
  else
109
  $changes_in_db = true;
110
  break;
111
+ case "compatibility_mode": //0 or 1 values
112
+ case "use_custom_image":
113
  if ( strcmp( $option, '0') != 0 && strcmp( $option, '1') != 0 ) //invalid value in database
114
  $changes_in_db = true;
115
  else
116
  $admin_options[$key] = $option;
117
  break;
118
+ case "transparency_value": //between 0 and 1
119
  if ( !is_numeric( $option ) || ( $option < 0 ) || ( $option > 1 ) )
120
  $changes_in_db = true;
121
  else
122
  $admin_options[$key] = $option;
123
+ break;
124
+ case "custom_image_width": //numeric value or empty
125
+ case "custom_image_height":
126
+ if ( $this->is_numeric_or_empty( $option ) )
127
+ $admin_options[$key] = $option;
128
+ else
129
+ $changes_in_db = true;
130
  break;
131
  }
132
  }
238
  plugins_url( '/images/transparency/'.
239
  str_replace( '.','_', $dev_options['transparency_value'] ) . '.png', __FILE__) . "') repeat;";
240
 
241
+ if ( $dev_options['use_custom_image'] == "1" ) {
242
+ $width = $dev_options['custom_image_width'];
243
+ $height = $dev_options['custom_image_height'];
244
+ $url = $dev_options['custom_image_url'];
245
+ } else {
246
+ $width = 65;
247
+ $height = 41;
248
+ $url = plugins_url( '/images/pinit-button.png', __FILE__);
249
+ }
250
+
251
  ?>
252
+ <style type="text/css">
253
+ .pinit .pinit-overlay { <?php echo $css; ?> }
254
+ .pinit .pinit-overlay a {
255
+ <?php printf('width:%spx; height:%spx; background:transparent url("%s") no-repeat 0 0;',
256
+ $width, $height, $url); ?>
257
+ }
258
+ </style>
259
  <?php
260
  }
261
 
281
 
282
  if ( isset( $_POST['update_jQuery_Pin_It_Button_For_Images']) ) {
283
  //security check
284
+ if ( !wp_verify_nonce( $_POST['jpibfi_nonce'], 'jpibfi_admin_settings' ) )
285
  die( 'Security alert');
286
 
287
  $errors = array();
291
 
292
  if ( ! $this->contains_css_class_names_or_empty( $_POST['enabled_classes'] ) )
293
  $errors['enabled_classes'] = true;
294
+
295
+ if ( !$this->is_numeric_or_empty( $_POST['custom_image_height'] ) )
296
+ $errors['custom_image_height'] = true;
297
+
298
+ if ( !$this->is_numeric_or_empty( $_POST['custom_image_width'] ) )
299
+ $errors['custom_image_width'] = true;
300
 
301
  //rewrite settings that came from the POST request
302
  $dev_options['image_selector'] = sanitize_text_field( $_POST['image_selector'] );
307
  $dev_options['enabled_classes'] = $_POST['enabled_classes'];
308
  $dev_options['description_option'] = $_POST['description_option'];
309
 
310
+ $dev_options['use_custom_image'] = $_POST['use_custom_image'] == "1" ? "1" : "0";
311
+ $dev_options['custom_image_url'] = $_POST['custom_image_url'];
312
+ $dev_options['custom_image_height'] = $_POST['custom_image_height'];
313
+ $dev_options['custom_image_width'] = $_POST['custom_image_width'];
314
+
315
+
316
  if ($dev_options['compatibility_mode'] =='0')
317
  if ( !is_numeric( $dev_options['transparency_value'] ) || ( $dev_options['transparency_value'] < 0.0 ) || ( $dev_options['transparency_value'] > 1.0 ) )
318
  $errors['transparency_value'] = true;
334
  <?php
335
  }
336
  }
337
+ include_once("jpibfi-admin.php");
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
338
  }//End function print_admin_page()
339
 
340
  function print_admin_page_action() {
js/admin.js CHANGED
@@ -7,8 +7,8 @@ jQuery(document).ready(function($) {
7
 
8
  $('#submit_form').click(function(e){
9
  var error = false;
10
- var areas = ["#disabled_classes", "#enabled_classes"];
11
-
12
  for (var i = 0; i < areas.length; i++) {
13
  if ( !contains_css_class_names_or_empty( $(areas[i]).val() ) ) {
14
  $(areas[i]).addClass('error-border');
@@ -35,6 +35,19 @@ jQuery(document).ready(function($) {
35
  $("#standard_transparency_error").hide();
36
  }
37
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
38
 
39
  if (error)
40
  e.preventDefault();
@@ -72,4 +85,8 @@ jQuery(document).ready(function($) {
72
  }
73
  return only_css_class_names;
74
  }
 
 
 
 
75
  });
7
 
8
  $('#submit_form').click(function(e){
9
  var error = false;
10
+
11
+ var areas = ["#disabled_classes", "#enabled_classes"];
12
  for (var i = 0; i < areas.length; i++) {
13
  if ( !contains_css_class_names_or_empty( $(areas[i]).val() ) ) {
14
  $(areas[i]).addClass('error-border');
35
  $("#standard_transparency_error").hide();
36
  }
37
  }
38
+
39
+ var number_values = ['#custom_image_width', '#custom_image_height']
40
+ for (var i = 0; i < number_values.length; i++) {
41
+ var field = $(number_values[i]);
42
+ if ( !contains_number_or_empty(field.val()) ) {
43
+ field.addClass('error-border');
44
+ $(number_values[i] + "_error").show();
45
+ error = true;
46
+ } else {
47
+ field.removeClass('error-border');
48
+ $(number_values[i] + "_error").hide();
49
+ }
50
+ }
51
 
52
  if (error)
53
  e.preventDefault();
85
  }
86
  return only_css_class_names;
87
  }
88
+
89
+ function contains_number_or_empty(value){
90
+ return value.length == 0 || /^(\d+)\s*$/.test(value);
91
+ }
92
  });
readme.txt CHANGED
@@ -2,9 +2,9 @@
2
  Contributors: mrsztuczkens
3
  Donate link: http://bit.ly/Uw2mEP
4
  Tags: pinterest, pin it, button, image, images, pinit, social media, hover, click, photo, photos
5
- Requires at least: 3.0.0
6
  Tested up to: 3.5
7
- Stable tag: 0.8
8
  License: GPLv2 or later
9
 
10
  Highlights images on hover and adds a Pinterest "Pin It" button over them for easy pinning.
@@ -20,6 +20,7 @@ The plugin allows you to:
20
  * choose if you want to show the "Pin it" button on home page, single posts, single pages or category pages
21
  * disable showing the button on certain posts and pages (works only on single posts and single pages)
22
  * choose transparency level depending on your needs
 
23
 
24
  Once you activate the plugin, it's ready to go with the typical settings - button appears on all images within the body of your posts/pages that aren't marked with "nopin" or "wp-smiley" classes.
25
 
@@ -51,8 +52,13 @@ On the plugin settings page, there is a "Enabled classes" setting. Please enter
51
  = How do I disable the button on specific images? =
52
  Use the "Disabled classes" setting on the settings page - add there specific classes or use the "nopin" class.
53
 
 
 
 
 
 
54
  = Where do I report bugs, improvements and suggestions? =
55
- Please report them in the plugin's support forum.
56
 
57
  == Screenshots ==
58
 
@@ -63,6 +69,10 @@ Please report them in the plugin's support forum.
63
 
64
  == Changelog ==
65
 
 
 
 
 
66
  = 0.8 =
67
  * Released 2013-01-12
68
  * Feature: Ability to choose transparency level depending on one's needs
@@ -88,6 +98,9 @@ Please report them in the plugin's support forum.
88
 
89
  == Upgrade Notice ==
90
 
 
 
 
91
  = 0.8 =
92
  Additional feature and added support for basic image positioning.
93
 
2
  Contributors: mrsztuczkens
3
  Donate link: http://bit.ly/Uw2mEP
4
  Tags: pinterest, pin it, button, image, images, pinit, social media, hover, click, photo, photos
5
+ Requires at least: 3.3.0
6
  Tested up to: 3.5
7
+ Stable tag: 0.9
8
  License: GPLv2 or later
9
 
10
  Highlights images on hover and adds a Pinterest "Pin It" button over them for easy pinning.
20
  * choose if you want to show the "Pin it" button on home page, single posts, single pages or category pages
21
  * disable showing the button on certain posts and pages (works only on single posts and single pages)
22
  * choose transparency level depending on your needs
23
+ * use your own Pinterest button design
24
 
25
  Once you activate the plugin, it's ready to go with the typical settings - button appears on all images within the body of your posts/pages that aren't marked with "nopin" or "wp-smiley" classes.
26
 
52
  = How do I disable the button on specific images? =
53
  Use the "Disabled classes" setting on the settings page - add there specific classes or use the "nopin" class.
54
 
55
+ = Can I use my own "Pin it" button design? =
56
+ Yes. On the settings page, there's a section named "Use custom Pinterest button". You need to check the Use custom image checkbox and provide a URL address of the image, image's width and height.
57
+
58
+ To upload you own image, you can use **Media Library** on your Wordpress installation or an image hosting service like **Photobucket**. Make sure you provide the proper address, width and height of the image. Otherwise, the button won't be displayed properly, or won't be displayed at all.
59
+
60
  = Where do I report bugs, improvements and suggestions? =
61
+ Please report them in the plugin's support forum on Wordpress.org.
62
 
63
  == Screenshots ==
64
 
69
 
70
  == Changelog ==
71
 
72
+ = 0.9 =
73
+ * Released 2013-01-28
74
+ * Feature: Ability to use custom Pinterest button design
75
+
76
  = 0.8 =
77
  * Released 2013-01-12
78
  * Feature: Ability to choose transparency level depending on one's needs
98
 
99
  == Upgrade Notice ==
100
 
101
+ = 0.9 =
102
+ New feature: using custom Pinterest button design
103
+
104
  = 0.8 =
105
  Additional feature and added support for basic image positioning.
106