thumbnail – purabtech.in

How to display attached images of posts

Many times people create bigger post or article. Many wp developers asks me many questions daily. Most commonly I asked about showing the all the post images as slide show or only thumbs. Using following code you can fetch the wordpress thumbnails. You just need to put following code into your functions.php file.

How to display attached images of posts

Using following code you can display attached images of posts. You just need to put following code into your functions.php file and you will be done.

functions.php file you can find in your wordpress theme folder. Put following function in that file.

01function show_all_thumbs() {
02global $post;
03$post = get_post($post);
04 
05/* image code */
06$images =& get_children( 'post_type=attachment&post_mime_type=image&output=ARRAY_N&orderby=menu_order&order=ASC&post_parent='.$post->post_parent);
07if($images){
08foreach( $images as $imageID => $imagePost ){
09 
10unset($the_b_img);
11$the_b_img = wp_get_attachment_image($imageID, 'thumbnail', false);
12$thumblist .= '<a href="'.get_attachment_link($imageID).'">'.$the_b_img.'</a>';
13 
14}
15}
16return $thumblist;
17}

In index.php or single.php you can use following code.

<?php echo show_all_thumbs(); ?>

Using above code you will be able to show or display all the attached images of the posts.

how to crop uploaded image in wordpress without plugin

Many people use the scaled image for thumbnail image. Instead of that croping image the proper size and showing that is nice. Crop Uploaded image without plugin is supported by wordpress itself so do not use any third-party plugin for this.

crop uploaded image in wordpress

You can use the following code in your functions.php file:

01// Standard Size Thumbnail
02if(false === get_option("thumbnail_crop")) {
03 add_option("thumbnail_crop", "1"); }
04 else {
05 update_option("thumbnail_crop", "1");
06 }
07 
08// Medium Size Thumbnail
09if(false === get_option("medium_crop")) {
10 add_option("medium_crop", "1"); }
11 else {
12 update_option("medium_crop", "1");
13 }
14 
15// Large Size Thumbnail
16if(false === get_option("large_crop")) {
17 add_option("large_crop", "1"); }
18 else {
19 update_option("large_crop", "1");
20 }

crop uploaded image in wordpress without plugin

How to show featured image in wordpress admin panel list

Featured images are very important feature of wordpress. Many blogger use the featured images on top. With watching the featured images user got idea about blog post or your article. Some time we miss to upload the featured image.

How to show featured image in wordpress admin panel list

But in post list cannot able to see the featured image in admin panel.

I found very nice wordpress plugin which is helpful to show the featured image in admin panel.

Featured Image Column – Adds a column to the edit screen with the featured image if it exists.

This plugin has no options. It simply adds a column before the title (far left) the show’s the posts featured image if it’s supported and/or exists.

Add a defualt image simply by filtering you own image in. Use featured_image_column_default_image or filter your own CSS by using featured_image_column_css.

Add support for a custom default image

How to show featured image in admin panel list - in post list - for wordpress — How to show featured image in admin panel list – in post list – for wordpress

1function my_custom_featured_image_column_image( $image ) {
2    if ( !has_post_thumbnail() )
3        return trailingslashit( get_stylesheet_directory_uri() ) . 'images/featured-image.png';
4}
5add_filter( 'featured_image_column_default_image', 'my_custom_featured_image_column_image' );

Add your own CSS to change the size of the image.

1/**
2 * @use '.featured-image.column-featured-image img {}'
3 */
4function my_custom_featured_image_css() {
5    return trailingslashit( get_stylesheet_directory_uri() ) . 'css/featured-image.css'; //URL to your css
6}
7add_filter( 'featured_image_column_css', 'my_custom_featured_image_css' );

I found this plugin is really helpful to me. Using this plugin I can easily check the featured image.

File upload with meta box in wordpress with custom post type

Code for File upload with meta box in wordpress using custom post type using meta boxes in wordpress. From wordpress 3.0 version wordpress introduced the custom_post_type function. Many people want to attach the file field with add_meta_box function. In this tutorial I will tell you how to upload file with custom meta box and post type. I tested above code with new wordpress versions 3.9. Still code is working fine.

Code for File upload with meta box in wordpress using custom post type using meta boxes in wordpress.

In this tutorial I will show you how to create the custom post type and add custom meta boxes to that post type and upload file with custom meta box.

After digging into wordpress files and functions I created following code. Just open your functions.php file and put following code in that file for creating custom post type.

01<?php
02 add_action('init', 'create_product');
03 function create_product() {
04 $product_args = array(
05 'label' => __('Product'),
06 'singular_label' => __('Product'),
07 'public' => true,
08 'show_ui' => true,
09 'capability_type' => 'post',
10 'hierarchical' => false,
11 'rewrite' => true,
12 'supports' => array('title', 'editor', 'thumbnail')
13 );
14 register_post_type('product',$product_args);
15 }
16?>

For uploading the file through custom meta box use the following code. Following code will add the file field to custom meta box and you are able to upload file or image to wordpress and upload file attachment to you custom post. Following code is very helpful to many wordpress theme and plugin developer. If you are having any issues or trouble using code then get back to me.

File upload with add_meta_box or custom_post_type in wordpress File upload with meta box in wordpress

01<?php
02 
03 add_action("admin_init", "add_product");
04 add_action('save_post', 'update_purchase_url');
05 function add_product(){
06 add_meta_box("product_details", "product Options", "product_options", "product", "normal", "low");
07 }
08 function product_options(){
09 global $post;
10 $custom = get_post_custom($post->ID);
11 $purchase_url = $custom["purchase_url"][0];
12 $product_price = $custom["product_price"][0];
13 $product_image = $custom["product_image"][0];
14 $video_code = $custom["video_code"][0];
15 
16?>
17 <div id="product-options">
18 <label>Purchase URL:</label>php echo $purchase_url; ?>" />
19 
20 <label>Product Price:</label>php echo $product_price; ?>" />
21 
22 <label>Product Image:</label>php echo $product_image; ?>" />
23 <img src="<?php echo $product_image; ?>">
24 
25 </div><!--end product-options-->
26<?php
27 }
28 function update_purchase_url(){
29 global $post;
30 update_post_meta($post->ID, "purchase_url", $_POST["purchase_url"]);
31 update_post_meta($post->ID, "product_price", $_POST["product_price"]);
32 update_post_meta($post->ID, "product_image", $_POST["product_image"]);
33 
34 if(!empty($_FILES['product_image']['name'])){ //New upload
35 require_once( ABSPATH . 'wp-admin/includes/file.php' );
36 $override['action'] = 'editpost';
37 
38 $uploaded_file = wp_handle_upload($_FILES['product_image'], $override);
39 
40 $post_id = $post->ID;
41 $attachment = array(
42 'post_title' => $_FILES['product_image']['name'],
43 'post_content' => '',
44 'post_type' => 'attachment',
45 'post_parent' => $post_id,
46 'post_mime_type' => $_FILES['product_image']['type'],
47 'guid' => $uploaded_file['url']
48 );
49 // Save the data
50 $id = wp_insert_attachment( $attachment,$_FILES['product_image'][ 'file' ], $post_id );
51 wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $_FILES['product_image']['file'] ) );
52 
53update_post_meta($post->ID, "product_image", $uploaded_file['url']);
54 }
55 }
56?>

For Uploading the file your post form need to add the enctype=”multipart/form-data” type to your form. Just use the following code in your functions.php file.

[viral-lock message=”Solution code is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]

01<?php
02function fileupload_metabox_header(){
03?>
04<script type="text/javascript">
05 jQuery(document).ready(function(){
06 jQuery('form#post').attr('enctype','multipart/form-data');
07 jQuery('form#post').attr('encoding','multipart/form-data');
08 });
09</script>
10<?php }
11add_action('admin_head', 'fileupload_metabox_header');
12 
13?>

[/viral-lock]

For checking all information in edit or preview section use following code.

01<?php
02 
03add_action("manage_posts_custom_column",  "product_custom_columns");
04add_filter("manage_edit-product_columns", "product_edit_columns");
05 
06function product_edit_columns($columns){
07 $columns = array(
08 "cb" => "<input type=\"checkbox\" />",
09 "title" => "Product Title",
10 "purchase_url" => "Purchase URL",
11 "product_price" => "Product Price",
12 "product_image" => "Product Image",
13 );
14 return $columns;
15}
16function product_custom_columns($column){
17 global $post;
18 switch ($column) {
19 case "purchase_url":
20 $custom = get_post_custom();
21 echo $custom["purchase_url"][0];
22 break;
23 case "product_price":
24 $custom = get_post_custom();
25 echo $custom["product_price"][0];
26 break;
27 case "product_image":
28 $custom = get_post_custom();
29 $img_url =$custom["product_image"][0];
30 echo "<image src=".$img_url." height=100 width=100 />";
31 break;
32 }
33}
34 
35?>

Above code is useful for any type of customization. If you are having any issue with using this code then please get back to me.

How to display attached images of posts

Share Article:

crop uploaded image in wordpress

Share Article:

How to show featured image in wordpress admin panel list

Share Article:

Code for File upload with meta box in wordpress using custom post type using meta boxes in wordpress.

Share Article: