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

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))?>"  >

  • And again, off you go

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *