Show thumbnail for category?

Question

I currently have a code where, in my category.php, it checks if the specific category has subcategories, and if it does, show them using wp_list_categories.

I'd love to have these wp_list_categories to show thumbnails, so I created a new walker, but I cannot figure out how to show thumbnails.

I'd be fine with having it show the featured image of my latest custom post type in this category, or using a plugin.

I currently have the following walker in my functions.php:

 class Walker_Category_Parents extends Walker_Category {



function start_el(&$output, $category, $depth, $args) {
    global $wpdb;
    extract($args);


    $link2 = ''.$category->slug.'';
    $cat_name = esc_attr( $category->name );
    $cat_name = apply_filters( 'list_cats', $cat_name, $category );
    $link = '<a href="' . esc_attr( get_term_link($category) ) . '" ';
    $link .= 'title="' . esc_attr( strip_tags( apply_filters( 'category_description', $category->description, $category ) ) ) . '"';
    $link .= 'rel="'.$category->slug.'" ';
    $link .= '>';
    $link .= $cat_name . '</a>';
    if ( 'list' == $args['style'] ) {
        $output .= "\t<li";

        $children = $wpdb->get_results( "SELECT term_id FROM $wpdb->term_taxonomy WHERE parent=".$category->term_id );

        $children_count = count($children);

        $has_children = ($children_count != 0) ? ' parent-category' : '';

        $class = 'cat-item cat-item-' . $category->term_id . $has_children;
        if ( !empty($current_category) ) {
            $_current_category = get_term( $current_category, $category->taxonomy );
            if ( $category->term_id == $current_category )
                $class .=  ' current-cat';
            elseif ( $category->term_id == $_current_category->parent )
                $class .=  ' current-cat-parent';
        }
        $output .=  ' class="' . $class . '"';
        $output .= ">$link\n";
        $output .= "<img src='http://localhost/wp-content/themes/vom13/images/producten/";
        $output .= "$link2.png'>\n";
    } else {
        $output .= "\t$link<br />\n";
    }
}




}

As you can see, it currently looks for the image in a folder, but this is absolutely not ideal, because I'm not the only one adding categories, but I don't want to give everybody FTP access.

Any solutions?

Thanks!

Answer 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.

Answer 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;