Documentation > Developers > Filter Examples > Add Image Preview Column to the Collection Overview

Add Image Preview Column to the Collection Overview

Will add a “Preview” column in the collection overview and display a random image from the collection.

/**
 * Add image preview column.
 */
function my_picu_add_image_preview_column( $columns ) {
    $new_columns['picu_image_preview'] = _x( 'Preview', 'column header', 'my-picu' );
    $offset = 2;
    $columns = array_slice( $columns, 0, $offset, true ) + $new_columns + array_slice( $columns, $offset, NULL, true );
    return $columns;
}

add_filter( 'manage_picu_collection_posts_columns', 'my_picu_add_image_preview_column', 11 );


/**
 * Add content to image preview column.
 */
function my_picu_image_preview_column_content( $column, $post_id ) {
    if ( $column == 'picu_image_preview' ) {
        $images = get_post_meta( $post_id, '_picu_collection_gallery_ids', true );
        if ( ! empty( $images ) ) {
            $images = explode( ',', $images );
            $image = $images[rand(0,count($images)-1)];
            echo '<img src="' . wp_get_attachment_image_url( $image, 'picu-small' ) . '" style="max-width: 150px;" />';
        }
    }
}

add_action( 'manage_picu_collection_posts_custom_column' , 'my_picu_image_preview_column_content', 10, 2 );Code language: PHP (php)

Need help?

If you couldn’t find what you were looking for and need more assistance, please get in touch with us directly and we’re happy to help.