Featured Image in Header of Archive Pages in Twenty Eleven

To show the ‘featured image’ of the top post as header image in an archive page in the Twenty Eleven theme, edit header.php in the child theme;

change this section:

<?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, 'post-thumbnail' );
else :
// Compatibility with versions of WordPress prior to 3.4.
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; // end check for featured image or standard header ?>

to:

<?php
/*
* The header image.
* Check if this is an archive and if the latest post has a thumbnail, and if it's a big one
* or Check if this is a post or page, if it has a thumbnail, and if it's a big one
*/
if ( is_archive() ) :
the_post();
$archive_thumb = '';
if( 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 ) :
$archive_thumb = get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
endif;
rewind_posts();
endif;
if ( is_archive() && $archive_thumb ) :
echo $archive_thumb; //the featured image of the latest post in the archive
elseif ( 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, 'post-thumbnail' );
else :
// Compatibility with versions of WordPress prior to 3.4.
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; // end check for featured image or standard header ?>

Title Attribute for Post Thumbnail

two men shake hands - bronze statues in Calagary/BCThe ‘featured image’ in WordPress automatically outputs the image alt attribute, but no title attribute.

Those two attributes are used for different reasons:
– the alt attribute is used to output alternative information if the image is inaccessible, for instance if the user has opted not to show images in the site, or for screen readers for accessibility reasons;
– the title attribute would present additional information about the image, and is shown by some browsers when you hover over the image.

For a WordPress ‘featured image’, the code below is taking the image title as you see it in the media library,  to be used as the title attribute.

The influence on search engine optimisation is not clear – it seems that the alt attribute is given more importance than the title attribute.

Back to the coding – To add the image title of the featured image as the title attribute to the img tag, a little filter function is needed, added  to the  ‘post_thumbnail_html’ filter.

Instead of just adding the code to functions.php of your theme, where it would get lost when you switch themes, it is more universal to create a basic plugin:

<?php
/*
Plugin Name: Featured Image Title Attribute Output
Plugin URI: n/a
Description: adds the image title as the title attribute to the 'featured image' output.
Version: 1.0
Author: alchymyth
Author URI: http://www.transformationpowertools.com/wordpress
License: GPL2
*/

add_filter('post_thumbnail_html','add_post_thumbnail_title_attribute',10,3);

function add_post_thumbnail_title_attribute($html, $post_id, $post_thumbnail_id) {

if( $html == '' ) {
return $html;
} else {
$out = $html;
$thumbnail_image = get_posts(array('p' => $post_thumbnail_id, 'post_type' => 'attachment'));

if ($thumbnail_image && isset($thumbnail_image[0])) {

$title = $thumbnail_image[0]->post_title;
if($title) {
$output = ' title="' . esc_attr($title) . '" ';
$out = str_replace( 'class=', $output . 'class=', $html );
}
}
}
return $out;
}
?>

Upload this as a appropriately named file into the plugins folder of your WordPress installation, and activate it like any other plugin from dashboard – plugins.

Insert the Featured Image into the Post Content with Shortcode

Somebody asked today, how to insert a ‘featured image’, aka post thumbnail, into the content of a post.
Obviously this cannot be done with the usual WordPress function ‘the_post_thumbnail()’ as the php code would not get rendered in the post’s content.

For me, the best way seemed to be to programm a shortcode for this purpose;
in the most basic form this would be:

add_shortcode('thumbnail','thumbnail_in_content');
function thumbnail_in_content( $atts ) {
global $post;
return get_the_post_thumbnail( $post->ID );
}

However, this is not very user friendly and does not alllow for setting the image size and alignment.

Shortcodes allow for a number of attributes, so I integrated the attributes ‘size’ and ‘align’ to the shortcode, together with some validity checks and default values.

The usage for the [thumbnail] shortcode is, for example:

[thumbnail size=medium align=right]

or

[thumbnail size='array( 300, 200)' align=center]

Any input errors would revert to size= ‘post-thumbnail’ and/or align=’none’.

The final code – see pastebin ‘featured image in post – shortcode’

references:
http://codex.wordpress.org/Shortcode_API
http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail
http://codex.wordpress.org/Function_Reference/get_intermediate_image_sizes

Show Description for Header Images in Twenty Eleven

This code is for a child theme of Twenty Eleven, because the direct editing of the default theme is not recommended.

Since wp3.4, the function get_custom_header() takes care of some of the information of the header images, such as width, height, and also the description or attachment id.

If added in header.php of the child theme, before:

<?php endif; // end check for removed header image ?>

the code below extracts the description information and outputs it below the header image:

<?php 
if ( function_exists( 'get_custom_header' ) && is_child_theme() ) :
if( get_custom_header()->description ) {
$header_description = get_custom_header()->description;
} elseif ( is_singular() && has_post_thumbnail( $post->ID ) && ( /* $src, $width, $height */ $header_img = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, max($header_image_width,$header_image_height) ) ) ) && $header_img[1] >= $header_image_width ) {
$header_img_details = get_posts(array('p' => get_post_thumbnail_id( $post->ID ), 'post_type' => 'attachment'));
$header_description = $header_img_details[0]->post_content;
} elseif( $att_id = get_custom_header()->attachment_id ) { 
$header_img_details = get_posts(array('p' => $att_id, 'post_type' => 'attachment'));
$header_description = $header_img_details[0]->post_content;
} 
if( $header_description ) echo '<span class="header-description">' . $header_description . '</span>'; 
endif; 
?>

A commented version of the code is in pastebin http://pastebin.com/VbjxyMRF .