Posted By

nbpurohit on 05/01/15


Tagged

wordpress


Versions (?)

Wordpress add multiple image upload custom field to any post type


 / Published in: PHP
 

Hi, here i implement multiple image upload custom field to page post type if you want it for another post type just change post type name.

Add this following code to your current theme’s function.php file. Go to your pages from wordpress admin and check that multiple image upload custom field is added to each page.

  1. <?php
  2.  
  3. add_action( 'admin_init', 'add_post_gallery_so_14445904' );
  4. add_action( 'admin_head-post.php', 'print_scripts_so_14445904' );
  5. add_action( 'admin_head-post-new.php', 'print_scripts_so_14445904' );
  6. add_action( 'save_post', 'update_post_gallery_so_14445904', 10, 2 );
  7.  
  8. /**
  9.  * Add custom Meta Box to Posts post type
  10. */
  11. function add_post_gallery_so_14445904()
  12. {
  13. add_meta_box(
  14. 'post_gallery',
  15. 'Studio Image Uploader',
  16. 'post_gallery_options_so_14445904',
  17. 'page',// here you can set post type name
  18. 'normal',
  19. 'core'
  20. );
  21. }
  22.  
  23. /**
  24.  * Print the Meta Box content
  25.  */
  26. function post_gallery_options_so_14445904()
  27. {
  28. global $post;
  29. $gallery_data = get_post_meta( $post->ID, 'gallery_data', true );
  30.  
  31. // Use nonce for verification
  32. wp_nonce_field( plugin_basename( __FILE__ ), 'noncename_so_14445904' );
  33. ?>
  34.  
  35. <div id="dynamic_form">
  36.  
  37. <div id="field_wrap">
  38. <?php
  39. if ( isset( $gallery_data['image_url'] ) )
  40. {
  41. for( $i = 0; $i < count( $gallery_data['image_url'] ); $i++ )
  42. {
  43. ?>
  44.  
  45. <div class="field_row">
  46.  
  47. <div class="field_left">
  48. <div class="form_field">
  49. <label>Image URL</label>
  50. <input type="text"
  51. class="meta_image_url"
  52. name="gallery[image_url][]"
  53. value="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>"
  54. />
  55. </div>
  56. </div>
  57.  
  58. <div class="field_right image_wrap">
  59. <img src="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>" height="48" width="48" />
  60. </div>
  61.  
  62. <div class="field_right">
  63. <input class="button" type="button" value="Choose File" onclick="add_image(this)" /><br />
  64. <input class="button" type="button" value="Remove" onclick="remove_field(this)" />
  65. </div>
  66.  
  67. <div class="clear" /></div>
  68. </div>
  69. <?php
  70. } // endif
  71. } // endforeach
  72. ?>
  73. </div>
  74.  
  75. <div style="display:none" id="master-row">
  76. <div class="field_row">
  77. <div class="field_left">
  78. <div class="form_field">
  79. <label>Image URL</label>
  80. <input class="meta_image_url" value="" type="text" name="gallery[image_url][]" />
  81. </div>
  82. </div>
  83. <div class="field_right image_wrap">
  84. </div>
  85. <div class="field_right">
  86. <input type="button" class="button" value="Choose File" onclick="add_image(this)" />
  87. <br />
  88. <input class="button" type="button" value="Remove" onclick="remove_field(this)" />
  89. </div>
  90. <div class="clear"></div>
  91. </div>
  92. </div>
  93.  
  94. <div id="add_field_row">
  95. <input class="button" type="button" value="Add Field" onclick="add_field_row();" />
  96. </div>
  97.  
  98. </div>
  99.  
  100. <?php
  101. }
  102.  
  103. /**
  104.  * Print styles and scripts
  105.  */
  106. function print_scripts_so_14445904()
  107. {
  108. // Check for correct post_type
  109. global $post;
  110. if( 'page' != $post->post_type )// here you can set post type name
  111. return;
  112. ?>
  113. <style type="text/css">
  114. .field_left {
  115. float:left;
  116. }
  117.  
  118. .field_right {
  119. float:left;
  120. margin-left:10px;
  121. }
  122.  
  123. .clear {
  124. clear:both;
  125. }
  126.  
  127. #dynamic_form {
  128. width:580px;
  129. }
  130.  
  131. #dynamic_form input[type=text] {
  132. width:300px;
  133. }
  134.  
  135. #dynamic_form .field_row {
  136. border:1px solid #999;
  137. margin-bottom:10px;
  138. padding:10px;
  139. }
  140.  
  141. #dynamic_form label {
  142. padding:0 6px;
  143. }
  144. </style>
  145.  
  146. <script type="text/javascript">
  147. function add_image(obj) {
  148. var parent=jQuery(obj).parent().parent('div.field_row');
  149. var inputField = jQuery(parent).find("input.meta_image_url");
  150.  
  151. tb_show('', 'media-upload.php?TB_iframe=true');
  152.  
  153. window.send_to_editor = function(html) {
  154. var url = jQuery(html).find('img').attr('src');
  155. inputField.val(url);
  156. jQuery(parent)
  157. .find("div.image_wrap")
  158. .html('<img src="'+url+'" height="48" width="48" />');
  159.  
  160. // inputField.closest('p').prev('.awdMetaImage').html('<img height=120 width=120 src="'+url+'"/><p>URL: '+ url + '</p>');
  161.  
  162. tb_remove();
  163. };
  164.  
  165. return false;
  166. }
  167.  
  168. function remove_field(obj) {
  169. var parent=jQuery(obj).parent().parent();
  170. //console.log(parent)
  171. parent.remove();
  172. }
  173.  
  174. function add_field_row() {
  175. var row = jQuery('#master-row').html();
  176. jQuery(row).appendTo('#field_wrap');
  177. }
  178. </script>
  179. <?php
  180. }
  181.  
  182. /**
  183.  * Save post action, process fields
  184.  */
  185. function update_post_gallery_so_14445904( $post_id, $post_object )
  186. {
  187. // Doing revision, exit earlier **can be removed**
  188. if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
  189. return;
  190.  
  191. // Doing revision, exit earlier
  192. if ( 'revision' == $post_object->post_type )
  193. return;
  194.  
  195. // Verify authenticity
  196. if ( !wp_verify_nonce( $_POST['noncename_so_14445904'], plugin_basename( __FILE__ ) ) )
  197. return;
  198.  
  199. // Correct post type
  200. if ( 'page' != $_POST['post_type'] ) // here you can set post type name
  201. return;
  202.  
  203. if ( $_POST['gallery'] )
  204. {
  205. // Build array for saving post meta
  206. $gallery_data = array();
  207. for ($i = 0; $i < count( $_POST['gallery']['image_url'] ); $i++ )
  208. {
  209. if ( '' != $_POST['gallery']['image_url'][ $i ] )
  210. {
  211. $gallery_data['image_url'][] = $_POST['gallery']['image_url'][ $i ];
  212. }
  213. }
  214.  
  215. if ( $gallery_data )
  216. update_post_meta( $post_id, 'gallery_data', $gallery_data );
  217. else
  218. delete_post_meta( $post_id, 'gallery_data' );
  219. }
  220. // Nothing received, all fields are empty, delete option
  221. else
  222. {
  223. delete_post_meta( $post_id, 'gallery_data' );
  224. }
  225. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: sukhisaini on October 28, 2015

how to show images in frontend

Posted By: sukhisaini on October 28, 2015

multiple image upload custom field to any post type show in frontend please reply urgent

Posted By: emmanuel31 on November 5, 2015

hello i try your script in my theme , i have multiple image scrolling for slider. 1-all work fine in the upload, but when you update the page , nothing stay. 2- after , in front witch variable can we use to see the img in front page? thank for your code and answer emmanuel

You need to login to post a comment.