ngg_edit_thumbnail

Show the interface to edit a thumbnail.

Description

ngg_edit_thumbnail( $id ); 

Parameters (1)

0. $id
Int The ID of the image.

Usage

  1. if ( !function_exists( 'ngg_edit_thumbnail' ) ) { 
  2. require_once ABSPATH . PLUGINDIR . 'nextcellent-gallery/admin/manage/actions.php'; 
  3.  
  4. // int The ID of the image. 
  5. $id = null; 
  6.  
  7. // NOTICE! Understand what this does before running. 
  8. $result = ngg_edit_thumbnail($id); 
  9.  

Defined (1)

The function is defined in the following location(s).

/admin/manage/actions.php  
  1. function ngg_edit_thumbnail( $id ) { 
  2.  
  3. /** 
  4. * @var $picture nggImage 
  5. */ 
  6. $picture = nggdb::find_image( $id ); 
  7.  
  8. $width = $picture->meta_data['width']; 
  9. $height = $picture->meta_data['height']; 
  10.  
  11. $ngg_options = get_option(ngg_options); 
  12.  
  13. $differentSizes = false; 
  14. if(isset($ngg_options['thumbDifferentSize'])) { 
  15. $differentSizes = (bool) $ngg_options['thumbDifferentSize']; 
  16.  
  17. ?> 
  18. <table style="width: 100%"> 
  19. <tr> 
  20. <td style="text-align: center; vertical-align: middle; width: 60%"> 
  21. <div style="padding: 10px"> 
  22. <button class="crop-action button button-small" data-method="zoom" data-option="0.1" type="button" title="<?php _e( 'Zoom In',  
  23. 'nggallery' ); ?>"> 
  24. <span class="dashicons dashicons-plus"></span> 
  25. </button> 
  26. <button class="crop-action button button-small" data-method="zoom" data-option="-0.1" type="button" title="<?php _e( 'Zoom Out',  
  27. 'nggallery' ); ?>"> 
  28. <span class="dashicons dashicons-minus"></span> 
  29. </button> 
  30. <button class="crop-action button button-small" data-method="rotate" data-option="-90" type="button" title="<?php _e( 'Rotate Left',  
  31. 'nggallery' ); ?>"> 
  32. <span class="dashicons dashicons-image-rotate-left"></span> 
  33. </button> 
  34. <button class="crop-action button button-small" data-method="rotate" data-option="90" type="button" title="<?php _e( 'Rotate Right',  
  35. 'nggallery' ); ?>"> 
  36. <span class="dashicons dashicons-image-rotate-right"></span> 
  37. </button> 
  38. <button class="crop-action button button-small" data-method="reset" type="button" title="<?php _e( 'Reset',  
  39. 'nggallery' ); ?>"> 
  40. <span class="dashicons dashicons-update"></span> 
  41. </button> 
  42. <button id="center-selection" class="button button-small" data-method="reset" type="button" title="<?php _e( 'Center selection',  
  43. 'nggallery' ); ?>"> 
  44. <span class="dashicons dashicons-align-center"></span> 
  45. </button> 
  46. </div> 
  47. <img src="<?php echo esc_url( $picture->imageURL ); ?>" alt="" id="imageToEdit" style="max-width: 60%; max-height: 60%; width: auto; height: auto;"/> 
  48. </td> 
  49. <td> 
  50. <div class="thumb-preview" style="max-width: 100%; width: 300px; height: 150px; overflow: hidden; margin-bottom: 10px; margin-left: auto; margin-right: auto; border: 1px solid black"> 
  51.  
  52. </div> 
  53. <!--<div id="actualThumb"> 
  54. <img src="<?php echo esc_url( $picture->thumbURL ); ?>?<?php echo time() ?>" /> 
  55. </div>--> 
  56. <table style="padding: 20px; width: 100%"> 
  57. <tr> 
  58. <th colspan="2"> 
  59. <?php _e( 'The parameters', 'nggallery' ); ?> 
  60. </th> 
  61. </tr> 
  62. <tr> 
  63. <td> 
  64. <?php /** translators: x position on a grid */ ?> 
  65. <label for="dataX"><?php _e( 'X', 'nggallery' ) ?></label> 
  66. </td> 
  67. <td style="text-align: right"> 
  68. <?php /** translators: a measurement unit, stand for pixels */ ?> 
  69. <input id="dataX" type="number" placeholder="0"> <?php _e( 'px', 'nggallery' ) ?> 
  70. </td> 
  71. </tr> 
  72. <tr> 
  73. <td> 
  74. <?php /** translators: y position on a grid */ ?> 
  75. <label for="dataY"><?php _e( 'Y', 'nggallery' ) ?></label> 
  76. </td> 
  77. <td style="text-align: right"> 
  78. <input id="dataY" type="number" placeholder="0"> <?php _e( 'px', 'nggallery' ) ?> 
  79. </td> 
  80. </tr> 
  81. <?php if($differentSizes): ?> 
  82. <tr> 
  83. <td> 
  84. <label for="dataWidth"><?php _e( 'Width', 'nggallery' ) ?></label> 
  85. </td> 
  86. <td style="text-align: right"> 
  87. <input id="dataWidth" type="number" placeholder="<?php echo $width ?>"> <?php _e( 'px', 'nggallery' ) ?> 
  88. </td> 
  89. </tr> 
  90. <tr> 
  91. <td> 
  92. <label for="dataHeight"><?php _e( 'Height', 'nggallery' ) ?></label> 
  93. </td> 
  94. <td style="text-align: right"> 
  95. <input id="dataHeight" type="number" placeholder="<?php echo $height ?>"> <?php _e( 'px', 'nggallery' ) ?> 
  96. </td> 
  97. </tr> 
  98. <tr> 
  99. <td> 
  100. <label for="dataRotate"><?php _e( 'Rotation', 'nggallery' ) ?></label> 
  101. </td> 
  102. <td style="text-align: right"> 
  103. <?php /** translators: stands for degrees, as in a rotation. Should be pretty short. */ ?> 
  104. <input id="dataRotate" type="number" placeholder="0"> <?php _e( 'deg', 'nggallery' ) ?> 
  105. </td> 
  106. </tr> 
  107. <?php endif; ?> 
  108. <tr> 
  109. <td colspan="2" style="text-align: right"> 
  110. <button class="button button-secondary" type="button" id="apply-data" title="<?php _e( 'Apply the parameters', 'nggallery' ); ?>"> 
  111. <?php _e( 'Apply', 'nggallery' ); ?> 
  112. </button> 
  113. </td> 
  114. </tr> 
  115. </table> 
  116. </td> 
  117. </tr> 
  118. <tr> 
  119. <td colspan="2"> 
  120. <div id="thumbMsg" style="display : none; float:right; width:60%; height:2em; line-height:2em;"></div> 
  121. </td> 
  122. </tr> 
  123. </table> 
  124. <script type="text/javascript"> 
  125. jQuery(document).ready(function() { 
  126.  
  127. //Some common elements we need multiple times. 
  128. var $image = jQuery('#imageToEdit'); 
  129. var $dataX = jQuery("#dataX"); 
  130. var $dataY = jQuery("#dataY"); 
  131. var $dataHeight = jQuery("#dataHeight"); 
  132. var $dataWidth = jQuery("#dataWidth"); 
  133. var $dataRotate = jQuery("#dataRotate"); 
  134.  
  135. /** 
  136. * Try and submit the new thumbnail. 
  137. */ 
  138. doAction = function() { 
  139. jQuery.ajax({ 
  140. url: ajaxurl,  
  141. type: "POST",  
  142. data: {action: 'new_thumbnail', id: <?php echo $id ?>, newData: $image.cropper('getData', true)},  
  143. cache: false,  
  144. success: function(lol, hhh, xhr) { 
  145. console.log(lol); 
  146. jQuery(".wrap").append(lol); 
  147. showMessage('<?php _e('Thumbnail updated', 'nggallery'); ?>'); 
  148. },  
  149. error function(xhr) { 
  150. console.log(xhr.responseText); 
  151. showMessage('<?php _e('Error updating thumbnail', 'nggallery'); ?>'); 
  152. }); 
  153. }; 
  154.  
  155. /** 
  156. * Properly destroy the cropper before destroying the dialog, or this gives errors. 
  157. */ 
  158. jQuery(".ngg-load-dialog").on("dialogbeforeclose", function() { 
  159. $image.cropper('destroy'); 
  160. }); 
  161.  
  162. /** 
  163. * Set the action buttons. 
  164. */ 
  165. jQuery(".crop-action").click(function() { 
  166. var $element = jQuery(this); 
  167. $image.cropper($element.data('method'), $element.data('option')); 
  168. }); 
  169.  
  170. /** 
  171. * Allow manual apply of the data. 
  172. */ 
  173. jQuery("#apply-data").click(function() { 
  174. $image.cropper('setData', { 
  175. "x": parseInt($dataX.val()),  
  176. "y": parseInt($dataY.val()),  
  177. "width": parseInt($dataWidth.val()),  
  178. "height": parseInt($dataHeight.val()),  
  179. "rotate": parseInt($dataRotate.val()) 
  180. }); 
  181. }); 
  182.  
  183. /** 
  184. * Center the selection. 
  185. */ 
  186. jQuery("#center-selection").click(function() { 
  187.  
  188. <?php if($differentSizes): ?> 
  189. var width = parseInt($dataWidth.val()); 
  190. var height = parseInt($dataHeight.val()); 
  191. <?php else: ?> 
  192. var width = <?php echo esc_js( $ngg_options['thumbwidth'] ) ?>; 
  193. var height = <?php echo esc_js( $ngg_options['thumbheight'] ) ?>; 
  194. <?php endif; ?> 
  195. var img_width = <?php echo esc_js( $width ) ?>; 
  196. var img_height = <?php echo esc_js( $height ) ?>; 
  197.  
  198. var x = Math.round((img_width - width) / 2); 
  199. var y = Math.round((img_height - height) / 2); 
  200.  
  201. $image.cropper('setData', { 
  202. "x": x,  
  203. "y": y 
  204. }); 
  205. }); 
  206.  
  207. /** 
  208. * Enable the cropper. 
  209. */ 
  210. $image.cropper({ 
  211. preview: ".thumb-preview",  
  212. crop: function(data) { 
  213. $dataX.val(Math.round(data.x)); 
  214. $dataY.val(Math.round(data.y)); 
  215. $dataHeight.val(Math.round(data.height)); 
  216. $dataWidth.val(Math.round(data.width)); 
  217. $dataRotate.val(Math.round(data.rotate)); 
  218. },  
  219. <?php if(!$differentSizes): ?> 
  220. aspectRatio: <?php echo esc_js( $ngg_options['thumbwidth'] ) ?> / <?php echo esc_js( $ngg_options['thumbheight'] ) ?> 
  221. <?php endif; ?> 
  222. }); 
  223. }); 
  224. </script> 
  225. <?php