WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

My theme has an option to specify the thumbnail using custom fields.

post_thumbnail - http://domain.com/uploads/xx/xx/mythumbnail.jpg

I would like to use data uri instead of the the image in the custom field.

How can this be done?

The reason I want to do this is to reduce the http request on the blog page and the portfolio page.

Thanks :)

share|improve this question
Perhaps I don't understand the question. Paste the data uri into the custom field the same as you do with the url. I just tried it and works fine. – Charles Clarkson Aug 23 '13 at 23:48

Hook on 'save_post', and after normal saving metabox routine create the data uri using php functions base64_encode and file_get_contents.

With a bit of logic skip saving if not necessary (data uri already_saved).

In next example I assume the post thumbnail url is setted in a metabox, and the name of the field is 'post_thumbnail'.

See comments in code for some info.

add_action( 'save_post', 'post_thumb_to_data_uri' ); 

function post_thumb_to_data_uri( $post_id ) { 
    // No auto saves 
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return; 
    // make sure the current user can edit the post 
    $cap = get_post_type($post_id) == 'page' ? 'edit_page' : 'edit_post';
    if ( ! current_user_can( $cap, $post_id ) ) return;

    // assure the data are sended by the form and i a correct url
    if (
      ! isset($_POST['post_thumbnail']) ||
      ! filter_var($_POST['post_thumbnail'], 'FILTER_VALIDATE_URL')
    ) return;

   // check the nonce if you have
   if ( ! isset($_POST['nonce']) || ! wp_verify_nonce('nonce', 'nonce_value') ) return;

    // skip if data uri already saved for the url
    $now_url = get_post_meta($post_id, 'post_thumbnail', true);
    $now_data = get_post_meta($post_id, '_post_thumbnail_datauri_src', true);
    if ($now_url && $now_data && $now_url == esc_url($_POST['post_thumbnail']) ) return;

    // get the path from the url   
    $path = untrailingslashit(ABSPATH) . wp_make_link_relative($_POST['post_thumbnail']);

    // check file existence and type
    if ( ! file_exists($path) ) return;
    $mime = wp_check_filetype( $path );
    if (
      ! is_array($mime) || ! isset($mime['type']) || empty($mime['type']) ||
      ! substr_count($mime['type'], 'image') // assure is an image
    ) return;

    $datauri = base64_encode( @file_get_contents($path) );
    if ( empty($datauri) ) return;
    $src = 'data: ' . $mime['type'] . ';base64,' . $datauri;

    update_post_meta($post_id, '_post_thumbnail_datauri_src', $src);
    update_post_meta($post_id, 'post_thumbnail', esc_url($_POST['post_thumbnail']) );


An helper function will help to print it

function the_thumbnail_uri( $post = null, $echo = true ) {
   if ( empty($post) ) global $post;
   if ( is_int($post) ) $post = get_post($post);
   if ( ! is_object($post) ) return;
   $thumb = get_post_meta($post->ID, '_post_thumbnail_datauri_src', true);
   $alt = apply_filters('the_title', $post->post_title );
   if ( $thumb) 
     $img = '<img src="' . $thumb . '" alt="' . esc_attr($alt) . '"/>';
   if ( ! $echo ) return $img;
   echo $img;

In your template files:

while( have_posts() ) : the_post();



Outside of the loop:

the_thumbnail_uri( $post ); // $post can be a post object or a post id 
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.