Show thumbnail for category?

2 comments

1. There’s a great plugin called Taxonomy Images. It lets you set one image per category that you can then access in all sorts of ways.

   It’s a little funky in that it uses some custom filters to return the images, but the documentation is pretty good and you should be able to figure it out.

   == UPDATE ==
   Here’s a quick example that gets the image based on ID (I’m assuming you’ll have the $category object that you already have in your snippet:

   $images = get_option('taxonomy_image_plugin');
   $cat_id = $category->term_taxonomy_id;
   if( array_key_exists( $cat_id, $images ) ) {
       echo wp_get_attachment_image( $images[$cat_id] );
   }
   

   Here’s a slightly expanded version of that code on the support forums.

   Log in to Reply

2. I think the best way is to allow tha admin choose the featured image for a category from Media Library. This is what WooCommerce does for product categories. I checked how WooCommerce does this (in includes/admin/class-wc-admin-taxonomies.php) and here comes the reusable code (use it in functions.php or your custom plugin). It can be used with custom post types’ taxonomies.

   <?php
   /* Image thumbnail for category */
   
   /* If this CPT, use scripts and styles to display Media Library popup */
   function media_uploader() {
       global $post_type;
       if( 'YOUR_CUSTOM_POST_TYPE' == $post_type) {
           if(function_exists('wp_enqueue_media')) {
               wp_enqueue_media();
           }
           else {
               wp_enqueue_script('media-upload');
               wp_enqueue_script('thickbox');
               wp_enqueue_style('thickbox');
           }
       }
   }
   add_action('admin_enqueue_scripts', 'media_uploader');
   
   /*show the form field*/
   
   add_action( 'YOUR_CUSTOM_POST_TYPE-category_add_form_fields', 'add_image_field', 10, 2 );
   add_action( 'YOUR_CUSTOM_POST_TYPE-category_edit_form_fields', 'add_image_field', 10, 2 );
   function add_image_field($taxonomy) {
       if(is_object($taxonomy)) // edit term not add term
       $selectedimgid = get_term_meta( $taxonomy->term_id, 'YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id', true );
       
       ?>
       <div class="form-field term-thumbnail-wrap">
           <label>Thumbnail</label>
           <div id="YOUR_CUSTOM_POST_TYPE_cat_thumbnail" style="float: left; margin-right: 10px;"><img src="<?php if(isset($selectedimgid)) echo wp_get_attachment_image_src($selectedimgid)[0]; else echo "PLACEHOLDER-IMAGE-HERE.jpg";?>" width="60px" height="60px" /></div>
           <div style="line-height: 60px;">
               <input type="hidden" id="YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id" name="YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id" value="<?php if(isset($selectedimgid)) echo $selectedimgid; ?>" />
               <button type="button" class="upload_image_button button">Upload/Add image</button>
               <button type="button" class="remove_image_button button">Remove image</button>
           </div>
           <script type="text/javascript">
   
               // Only show the "remove image" button when needed
               if ( ! jQuery( '#YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id' ).val() ) {
                   jQuery( '.remove_image_button' ).hide();
               }
   
               // Uploading files
               var file_frame;
   
               jQuery( document ).on( 'click', '.upload_image_button', function( event ) {
   
                   event.preventDefault();
   
                   // If the media frame already exists, reopen it.
                   if ( file_frame ) {
                       file_frame.open();
                       return;
                   }
   
                   // Create the media frame.
                   file_frame = wp.media.frames.downloadable_file = wp.media({
                       title: 'Choose an image',
                       button: {
                           text: 'Use image'
                       },
                       multiple: false
                   });
   
                   // When an image is selected, run a callback.
                   file_frame.on( 'select', function() {
                       var attachment           = file_frame.state().get( 'selection' ).first().toJSON();
                       var attachment_thumbnail = attachment.sizes.thumbnail || attachment.sizes.full;
   
                       jQuery( '#YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id' ).val( attachment.id );
                       jQuery( '#YOUR_CUSTOM_POST_TYPE_cat_thumbnail' ).find( 'img' ).attr( 'src', attachment_thumbnail.url );
                       jQuery( '.remove_image_button' ).show();
                   });
   
                   // Finally, open the modal.
                   file_frame.open();
               });
   
               jQuery( document ).on( 'click', '.remove_image_button', function() {
                   jQuery( '#YOUR_CUSTOM_POST_TYPE_cat_thumbnail' ).find( 'img' ).attr( 'src', 'PLACEHOLDER-IMAGE-HERE.jpg' );
                   jQuery( '#YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id' ).val( '' );
                   jQuery( '.remove_image_button' ).hide();
                   return false;
               });
   
               jQuery( document ).ajaxComplete( function( event, request, options ) {
                   if ( request && 4 === request.readyState && 200 === request.status
                       && options.data && 0 <= options.data.indexOf( 'action=add-tag' ) ) {
   
                       var res = wpAjax.parseAjaxResponse( request.responseXML, 'ajax-response' );
                       if ( ! res || res.errors ) {
                           return;
                       }
                       // Clear Thumbnail fields on submit
                       jQuery( '#YOUR_CUSTOM_POST_TYPE_cat_thumbnail' ).find( 'img' ).attr( 'src', 'PLACEHOLDER-IMAGE-HERE.jpg' );
                       jQuery( '#YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id' ).val( '' );
                       jQuery( '.remove_image_button' ).hide();
                       // Clear Display type field on submit
                       jQuery( '#display_type' ).val( '' );
                       return;
                   }
               } );
   
           </script>
           <div class="clear"></div>
       </div>
       <?php
       
   }
   
   
   
   /* and save it */
   
   add_action( 'edited_YOUR_CUSTOM_POST_TYPE-category', 'YOUR_CUSTOM_POST_TYPE_extra_fields_save', 10, 2);
   add_action( 'created_YOUR_CUSTOM_POST_TYPE-category', 'YOUR_CUSTOM_POST_TYPE_extra_fields_save', 10, 2);
   function YOUR_CUSTOM_POST_TYPE_extra_fields_save( $term_id ) {
   
       if ( !isset( $_POST['YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id'] ) ) return;
       update_term_meta( $term_id, "YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id", $_POST['YOUR_CUSTOM_POST_TYPE_cat_thumbnail_id'] );
   
   }
   ?>
   

   The way to show the image in the templates will also make use of get_term_meta():

   <?php
   $termimgid = get_term_meta( $term->term_id, 'thamaterial_cat_thumbnail_id', true );
   if(isset($termimgid))
       echo '<img alt="'.$term->name.'" src="'.wp_get_attachment_image_src($termimgid)[0].'" /> '.$term->name;
   

   Log in to Reply