KLoning Spoon

The admin pages listing the site’s posts and pages come with various text columns (title, tags, categories, author and so on). In order to see what the featured images are, you have to visit each post or page individually. What I will show here, is how to get add a column with a reasonably sized thumbnail copy of the featured image. Please note that this only works for themes that support featured images.

Add a new image size

First we add a new image size. Full details for this function are found on the WordPress add_image_size() codex page.

add_image_size( 'admin-list-thumb', 100, 100, false );

If your theme already has a 100 x 100 image size, you can skip this step. If not, then you may end up with an image size that messes up the layout of the columns.

Add featured image column

Next up, we add the featured image column to the posts and pages list view and pull in the featured image itself using our newly defined image size.

// Dummy up theme support.
//add_theme_support( 'post-thumbnails' );

// Add the posts and pages columns filter. They can both use the same function.
add_filter('manage_posts_columns', 'tcb_add_post_thumbnail_column', 5);
add_filter('manage_pages_columns', 'tcb_add_post_thumbnail_column', 5);

// Add the column
function tcb_add_post_thumbnail_column($cols){
  $cols['tcb_post_thumb'] = __('Featured');
  return $cols;
}

// Hook into the posts an pages column managing. Sharing function callback again.
add_action('manage_posts_custom_column', 'tcb_display_post_thumbnail_column', 5, 2);
add_action('manage_pages_custom_column', 'tcb_display_post_thumbnail_column', 5, 2);

// Grab featured-thumbnail size post thumbnail and display it.
function tcb_display_post_thumbnail_column($col, $id){
  switch($col){
    case 'tcb_post_thumb':
      if( function_exists('the_post_thumbnail') )
        echo the_post_thumbnail( 'admin-list-thumb' );
      else
        echo 'Not supported in theme';
      break;
  }
}

Just copy code above to your functions.php and here the preview of result.

Few out of 20+ transition effects are shown below. startEffect : grayscale, hoverEffect : normal(For HTML5 Browsers)

and here the part 2 of css3 image styles.

Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality.

a free website optimization tool that dramatically reduces the file size of your images without any loss of quality.

Get even more compression

  • More compression controls
  • Preserve EXIF information
  • IE6 support, API access and more!

Maybe there is so many online tools for convert from image to data uri, but here i only include 2 online tools which so simply to use.

Websemantic

Dopiaza