17

Does anyone have any tips for creating an image-centric custom post type?

To elaborate, my blog has rotating header images, shown below:

Blog header showing random images

The two images in the top left are randomized, and exist as attachments to a specific page that only exists to contain these images. I'm wondering if it's feasible to store these in a different way using custom post types. I've created a new post type, "header-image", and I'm trying to figure out where to go from here. I would like each header-image "post" to have one image attachment. Instead of pulling random images from a page, I would pull random posts from the header-image post type. Given this,

  1. How might I incorporate a simple interface to the attachment process that is available from the "New Header Image" admin page?
  2. Can I remove the post title and content input boxes to unclutter that page?

Goals are to create a better interface to the current upload process, and eventually be able to create a taxonomy to flag images as left picture/right picture. (Looking at the above image, you can see the photo on the right covers up the face in the other photo. I could avoid this by marking photos for left and/or right side display.) The latter won't be a problem if I can implement the former.

Update: based on an answer here, I was able to implement this setup. Full code is posted below.

1
  • 2
    I would suggest you give the person the person the answer that got you where you need to go the Accept Answer credit. Aug 22, 2010 at 17:46

2 Answers 2

18

goldenapple's initial answer gave me the jumpstart I needed to finish this up.

functions.php

Here is the complete code I'm using to add a new post type "header-image" and modify other admin screens accordingly:

/**
 * Register the Header Image custom post type.
 */
function sixohthree_init() {
    $labels = array(
        'name' => 'Header Images',
        'singular_name' => 'Header Image',
        'add_new_item' => 'Add Header Image',
        'edit_item' => 'Edit Header Image',
        'new_item' => 'New Header Image',
        'view_item' => 'View Header Image',
        'search_items' => 'Search Header Images',
        'not_found' => 'No Header Images found',
        'not_found_in_trash' => 'No Header Images found in Trash'
    );

    $args = array(
        'labels' => $labels,
        'public' => false,
        'show_ui' => true,
        'supports' => array('thumbnail')
    );

    register_post_type( 'header-image', $args );
}
add_action( 'init', 'sixohthree_init' );

/**
 * Modify which columns display when the admin views a list of header-image posts.
 */
function sixohthree_headerimage_posts_columns( $posts_columns ) {
    $tmp = array();

    foreach( $posts_columns as $key => $value ) {
        if( $key == 'title' ) {
            $tmp['header-image'] = 'Header Image';
        } else {
            $tmp[$key] = $value;
        }
    }

    return $tmp;
}
add_filter( 'manage_header-image_posts_columns', 'sixohthree_headerimage_posts_columns' );

/**
 * Custom column output when admin is view the header-image post list.
 */
function sixohthree_headerimage_custom_column( $column_name ) {
    global $post;

    if( $column_name == 'header-image' ) {
        echo "<a href='", get_edit_post_link( $post->ID ), "'>", get_the_post_thumbnail( $post->ID ), "</a>";
    }
}
add_action( 'manage_posts_custom_column', 'sixohthree_headerimage_custom_column' );

/**
 * Make the "Featured Image" metabox front and center when editing a header-image post.
 */
function sixohthree_headerimage_metaboxes( $post ) {
    global $wp_meta_boxes;

    remove_meta_box('postimagediv', 'header-image', 'side');
    add_meta_box('postimagediv', __('Featured Image'), 'post_thumbnail_meta_box', 'header-image', 'normal', 'high');
}
add_action( 'add_meta_boxes_header-image', 'sixohthree_headerimage_metaboxes' );

/**
 * Enable thumbnail support in the theme, and set the thumbnail size.
 */
function sixohthree_after_setup() {
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size(150, 100, true);
}
add_action( 'after_setup_theme', 'sixohthree_after_setup' );

Admin screenshots

Header Images post list

Header Images post editing

Template code

$header_images = get_posts('post_type=header-image&orderby=rand&numberposts=2');

foreach( $header_images as $idx => $post ) {
    setup_postdata($post);
    the_post_thumbnail('post-thumbnail', array('class' => 'snapshot snapshot' . ($idx+1) ) );
}
3
  • Great job! Love it! Aug 20, 2010 at 16:21
  • And how would I add a link to the thumbnail? Both in admin and template? Nice Looking! Feb 24, 2014 at 12:07
  • Could this be modified to assign an image to a page?
    – Gerico
    Sep 28, 2015 at 21:19
13
function register_header_image() {
     register_post_type( 'header-image', 
                         array( 
                             'label'=>'Header Images',
                             'name'=>'Header Images',
                             'singular_name'=>'Header Image',
                             'public'=>true,
                             'show_ui'=>true,
                             'hierarchical'=>true,
                             'supports'=>array('thumbnail') ) );
}

add_action ('init','register_header_image');
add_theme_support( 'post-thumbnails' );

That should register your post type with nothing but a field for a featured image. See the codex http://codex.wordpress.org/Function_Reference/register_post_type for a list of the arguments to pass.

2
  • 1
    A supports value of "featured-image" gives me a blank screen when creating a new header image, but "thumbnail" adds a new meta box called "Featured Image." Thanks! Aug 20, 2010 at 14:16
  • You're right. My mistake on that. Aug 20, 2010 at 17:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.