Custom headers and custom image sizes WordPress

designbuildtest comments:

Hi Manoj, your code above produces the same output as <strong>header_image()</strong> or <strong>echo get_header_image()</strong>. The problem is the Theme Customiser is not saving a cropped version of the header image at upload time (this is a known issue noted in Trac).

Is it possible to perhaps explode the output of get_header_image(), grab the file name and extension and reassemble a new variable in the format http://path-to-file/imagename-435x290.fileextension

Any other suggestions much appreciated.

Thanks

designbuildtest comments:

Okay, I think I've answered my own question...

function hero_home() {
$header_image = get_header_image();
$header_image = explode('.' , $header_image);
$header_image = $header_image[0].'-435x290.'.$header_image[1];
echo $header_image;
}

is a nasty hack, but produces the desired result. It all falls down unfortunately when a smallish image is uploaded as a custom header and there is in fact not image of <strong>filename-435x290.ext</strong> saved in file uploads directory.

If anyone can suggest a more elegant solution, would be much appreciated. Hopefully the core team will add a patch to support cropping in the Theme Customiser in 3.5

Manoj Raj comments:

Hi designbuildtest,

I have tried my code in twenty-eleven theme and it correctly outputs the hero version of the custom header image.... I have sent you the working site URL through a personal message...

This is the code used in twenty-eleven theme supporting custom header.... Have a look at it

// This theme uses Featured Images (also known as post thumbnails) for per-post/per-page Custom Header images
add_theme_support( 'post-thumbnails' );

// Add support for custom headers.
$custom_header_support = array(
// The default header text color.
'default-text-color' => '000',
// The height and width of our custom header.
'width' => apply_filters( 'twentyeleven_header_image_width', 1000 ),
'height' => apply_filters( 'twentyeleven_header_image_height', 288 ),
// Support flexible heights.
'flex-height' => true,
// Random image rotation by default.
'random-default' => true,
// Callback for styling the header.
'wp-head-callback' => 'twentyeleven_header_style',
// Callback for styling the header preview in the admin.
'admin-head-callback' => 'twentyeleven_admin_header_style',
// Callback used to display the header preview in the admin.
'admin-preview-callback' => 'twentyeleven_admin_header_image',
);

add_theme_support( 'custom-header', $custom_header_support );

if ( ! function_exists( 'get_custom_header' ) ) {
// This is all for compatibility with versions of WordPress prior to 3.4.
define( 'HEADER_TEXTCOLOR', $custom_header_support['default-text-color'] );
define( 'HEADER_IMAGE', '' );
define( 'HEADER_IMAGE_WIDTH', $custom_header_support['width'] );
define( 'HEADER_IMAGE_HEIGHT', $custom_header_support['height'] );
add_custom_image_header( $custom_header_support['wp-head-callback'], $custom_header_support['admin-head-callback'], $custom_header_support['admin-preview-callback'] );
add_custom_background();
}

// We'll be using post thumbnails for custom header images on posts and pages.
// We want them to be the size of the header image that we just defined
// Larger images will be auto-cropped to fit, smaller ones will be ignored. See header.php.
set_post_thumbnail_size( $custom_header_support['width'], $custom_header_support['height'], true );

// Add Twenty Eleven's custom image sizes.
// Used for large feature (header) images.
add_image_size( 'large-feature', $custom_header_support['width'], $custom_header_support['height'], true );
// Used for featured posts if a large-feature doesn't exist.
add_image_size( 'small-feature', 500, 300 );

designbuildtest comments:

Thanks Manoj.

Your code does indeed work - great stuff - thank you.

I've adapted what you provided and now have:

function hero_home() {
$custom_header = get_custom_header();
$hero_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'hero', false);
if ($hero_src[0] != '') { echo $hero_src[0]; }
else { echo get_template_directory_uri() . '/images/header.jpeg'; }
}

and:

<div class="hero" style="background:#ddd url(<?php hero_home(); ?>) no-repeat center center;">

Thanks for your help.