Skip to content

Instantly share code, notes, and snippets.

@tnorthcutt
Created January 30, 2013 23:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tnorthcutt/4678197 to your computer and use it in GitHub Desktop.
Save tnorthcutt/4678197 to your computer and use it in GitHub Desktop.
Create a headline image with overlaid text on pages that have a featured image.
<?php
function ba_header_image() {
if ( !has_post_thumbnail() ) return; //don't do anything if there's no featured image
global $post;
$post_thumbnail_id = get_post_thumbnail_id();
$post_thumbnail_url = wp_get_attachment_image_src( $post_thumbnail_id, 'ba_header_image' );
$headline = get_post_meta( $post->ID, 'ba_headline_area_headline', true );
$paragraph = get_post_meta( $post->ID, 'ba_headline_area_paragraph', true );
$link_text = get_post_meta( $post->ID, 'ba_headline_area_link_text', true );
$link_url = get_post_meta( $post->ID, 'ba_headline_area_link_url', true );
$output .= "<div id='home-headline-area'><div class='wrap'><h2>{$headline}</h2><p>{$paragraph}</p><a href='{$link_url}'>{$link_text}</a></div>";
$output .= '<img src="' . $post_thumbnail_url[0] . '" />';
$output .= '</div>';
echo $output;
}
<?php
$meta_boxes[] = array(
'id' => 'header-image-area',
'title' => 'Header Image Area',
'pages' => array('page'),
'context' => 'normal',
'priority' => 'high',
'show_names' => true,
'fields' => array(
array(
'name' => 'Headline Area',
'desc' => '',
'id' => 'ba_headline_area_header',
'type' => 'title'
),
array(
'name' => 'Headline area headline',
'desc' => '',
'id' => 'ba_headline_area_headline',
'type' => 'text_medium'
),
array(
'name' => 'Headline area paragraph',
'desc' => '',
'id' => 'ba_headline_area_paragraph',
'type' => 'textarea_small'
),
array(
'name' => 'Headline area link text',
'desc' => '',
'id' => 'ba_headline_area_link_text',
'type' => 'text_medium'
),
array(
'name' => 'Headline area link URL',
'desc' => '',
'id' => 'ba_headline_area_link_url',
'type' => 'text'
),
),
);
#home-headline-area {
position: relative;
}
#home-headline-area .wrap {
position: absolute;
top: 10%;
left: 10%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment