WordPress : Upload images in post meta

Word press image upload is nice and perfectly integrated in the wysiwyg editor. If you need to specify clearly where the image will appear, you can use the post thumnbail feature that attaches a specific image to a post. But if you need to duisplay more than image per post, then you’re better off using custom fields, and a few plugins are available to let you upload image directly to a custom field

• tip : using the wordpress uploader in your plugin or theme
• Plugin : Verve meta boxes (image above)
• Plugin : Custom Field Templates, this one has the great advantage of allowing custom field per template. A bit tricky to configure but really efficient. Amateurs will like our little trick below provides a simple lightbox on images thumbnail to display full image preview
• Plugin : multi edit plugin, with nice tabbed interface, only allows wysiwyg custom fields
• Plugin : Simple fields with repeatable fields feature

Bonus : Custom Field Template Hack  displays full size image on custom image thumbnail in post / page edit in backend and additional function to automate image display in templates

You love the verve meta boxes image preview of custom fields, but would like to use advanced features from the custom field Template plugin  ? Well the Custom Field Template plugin seems really powerful and strong enough to make you have a look inside and add a simple preview function for uploaded custom images.

Note : this hack is based on Custom Field Templates 1.6.5

Backend : full size image preview in lightbox

• open custom-field-template/custom-field-template.php  and go to line 1887, find the  following line
  if ( ( $value = intval($value) ) && $thumb_url = get_attachment_icon_src( $value ) ) :
• add the following line :

  $full_src=    wp_get_attachment_url  (   $value) ;  // Webmasterbulletin Hack

• scroll a few lines below and alter the out HTML code to display the lightbox enabled link :

  $out .= '<p><label for="'.$name . '_delete' . $sid . '"><input type="checkbox" name="'.$name . '_delete[' . $sid . '][' . $cftnum . ']" id="'.$name . '_delete' . $sid . '" value="1" class="delete_file_checkbox" />' . __('Delete', 'custom-field-template') . '</label>';
  $out .= '<a href="' . $full_src .'?TB_iframe=1" class="thickbox" >'     ;
  $out .=' <img src="'.$thumb_url.'" width="32" height="32" style="vertical-align:middle;" /> ' . $title . ' </a></p>';
  $out .= '<input type="hidden" name="'.$name . '[' . $sid . '][' . $cftnum . ']" value="' . $value . '" />';

• And off you go

Frontend : easy template function for Custom Field Template images

• this function is a simple shortcut to getting the id of the file and displaying the full image. add the function at the bottom of custom-field-template/custom-field-template.php, inside the class (before the closing })

      // webmasterbulletin.net hack add function to get images
   function get_post_meta_image($post_id, $key, $single = false)
   {
         $imageId= get_post_meta($post_id, $key, $single);
          if ($imageId)
              $imageHtml = wp_get_attachment_url($imageId);
          else $imageHtml="";
         return $imageHtml;
   } 

• use in your templates with same arguments from get_post_meta
  

  <img src="<?= custom_field_template::get_post_meta_image(get_the_ID(),"Header Image", true))?>"  >