Ask your WordPress questions! Pay money and get answers fast! (more info)

Custom headers and custom image sizes WordPress

  • SOLVED

In my theme I have <strong>add_theme_support('custom-header')</strong> and <strong>add_image_size('hero', 435, 290, true)</strong>.

When I output my custom header in a template file I would like to show the 'hero' version (435x290) of my custom header, not the original, uploaded image.

Please can somebody help me write a function to accomplish the above.

Many thanks.

Answers (5)

2012-10-02

Manoj Raj answers:

The code below is not tested... Have a backup of your own and test its working...


<?php
$custom_header = get_custom_header();
$hero_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'hero', false);

if(isset($hero_src[0])) {
?>
<div class="hero" style="background:#ddd url(<?php echo $hero_src[0]; ?>) no-repeat center center;">
<?php } else { ?>
<div class="hero" style="background:#ddd url("Add default image url here") no-repeat center center;">
<?php } ?>


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.

2012-10-01

Michael Caputo answers:

Try this:

<?php
if (has_post_thumbnail( $post->ID ) ):
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'hero' ); ?>
<img src="<?php echo $image[0]; ?>" />
<?php endif; ?>


It will check if the post has a thumbnail, Then if it does, will show the image.


designbuildtest comments:

Hi Michael, I fairly sure this won't work. Header images are not saved against or attached to a regular post. Thanks.

2012-10-01

Daniel Yoen answers:

try this :

<?php
$header_image = get_header_image();
if ($header_image):
if (function_exists('get_custom_header'))
{
$header_image_width = get_theme_support('custom-header', 'width');
}
else
{
$header_image_width = HEADER_IMAGE_WIDTH;
} ?>
<a href="<?php echo esc_url(home_url('/'));?>">
<?php
if (is_singular() && has_post_thumbnail($post->ID) && ($image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array(
$header_image_width,
$header_image_width
))) && $image[1] >= $header_image_width):
echo get_the_post_thumbnail($post->ID, 'hero');
else:
if (function_exists('get_custom_header'))
{
$header_image_width = get_custom_header()->width;
$header_image_height = get_custom_header()->height;
}
else
{
$header_image_width = HEADER_IMAGE_WIDTH;
$header_image_height = HEADER_IMAGE_HEIGHT;
} ?>
<img src="<?php
header_image(); ?>" width="<?php echo $header_image_width;?>" height="<?php echo $header_image_height; ?>" alt="" />
<?php endif; ?>
</a>
<?php endif; ?>


don't forget to regenerate thumbnails : http://wordpress.org/extend/plugins/regenerate-thumbnails/ after add/remove custom image size :)

hope this help, :)

2012-10-01

Plugarized answers:

Put this in your functions.php

add_theme_support( 'post-thumbnails' );
add_image_size( 'hero', 200, 200, true ); // Set hero post thumbnail class, true param means crop

then in your template something like

<?php the_post_thumbnail('hero', array('class' => 'hero')); ?>


Or for attachment you can do the following which is what i use

<?php $image_id = get_post_thumbnail_id(); // attachment ID
$image_attributes = wp_get_attachment_image_src( $image_id, 'hero' ); // returns an array
?>


and to retrieve the attachment

<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<img class="hero" src="<?php echo $image_attributes[0]; ?>">



<strong>Forget the above i misread the question. Here are some references.</strong>
<strong>
Custom Header</strong>
This feature enables Custom_Headers support for a theme as of Version 3.4.

add_theme_support( 'custom-header' );

Note that you can add default arguments using:

$defaults = array(
'default-image' => '',
'random-default' => false,
'width' => 0,
'height' => 0,
'flex-height' => false,
'flex-width' => false,
'default-text-color' => '',
'header-text' => true,
'uploads' => true,
'wp-head-callback' => '',
'admin-head-callback' => '',
'admin-preview-callback' => '',
);
add_theme_support( 'custom-header', $defaults );

<strong>Source: http://codex.wordpress.org/Custom_Headers</strong>

2012-10-01

Gabriel Reguly answers:

Hi designbuildtest,

Please test this code, from Twenty Eleven's header.php, changed to use 'hero' size.


// Check to see if the header image has been removed
$header_image = get_header_image();
if ( $header_image ) :
$header_image_width = get_custom_header()->width;
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php
// The header image
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() && has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
$image[1] >= $header_image_width ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'hero' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; // end check for featured image or standard header ?>
</a>
<?php endif; // end check for removed header image



Regards,
Gabriel


Gabriel Reguly comments:

Hi designbuildtest,

I forgot to say, you should include the above code in your head.php file.

Regards,
Gabriel


designbuildtest comments:

Thanks Gabriel.

Revisiting this, I've actually managed to achieve 80% of what I need by simply using inbuilt parameters...


$args = array(
'flex-width' => false,
'width' => 435,
'flex-height' => false,
'height' => 290,
'default-image' => get_template_directory_uri() . '/images/header.jpg',
);
add_theme_support( 'custom-header', $args );


My problem now is that WordPress ignores the width and height parameters if the image is uploaded via the theme customiser (see [[LINK href="http://wordpress.org/support/topic/custom-header-image-in-wp-34"]]this thread[[/LINK]]).

Does WordPress store default width and height parameters for custom headers in the database somewhere that could be overwritten perhaps?

Thanks


Gabriel Reguly comments:

Hi,

Could you post the code you are using to display the images?

I suspect you could 'force' a resize to you hero size just before displaying the image, as in

echo get_the_post_thumbnail( $post->ID, 'hero' );

Regards,
Gabriel


designbuildtest comments:

The code I'm using is:


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


As you can see I'm actually using the image as a background, hence the url needs to point directly to the resized image.

WordPress appends "cropped-" to the name of resized header images when they are uploaded via the standard custom header tool - /wp-admin/themes.php?page=custom-header

Problem is, a cropped image is not generated if the header image is uploaded via the theme customiser.