I also would love to achieve this, and have been searching everywhere for a solution, even on the spanish support forum…no luck so far.
Thread Starter
Mark
(@codeispoetry)
Here’s an answer. My goal was to make the Flickr Pick a Picture plugin work with an Oxygen child theme. FPP puts the attribution, including a link to the Flickr photo page, in the image post_excerpt. Alt text can’t include links so I was looking for a way to display the post_excerpt with the featured image in an unobtrusive way. I settled for a div that only appears when you hover over the image.
First, I was able to throw together a function for getting the post_excerpt() field (what I was calling the caption). Here is the function that I added to my functions.php:
function get_the_feature_caption() {
global $post;
$thumbnail_id = get_post_thumbnail_id($post->ID);
$thumbnail_image = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment'));
if ($thumbnail_image && isset($thumbnail_image[0])) {
$caption = '<span>'.$thumbnail_image[0]->post_excerpt.'</span>';
}
return $caption;
}
Then in the post.php template of my Oxygen child theme, I include the following code:
if ( current_theme_supports( 'get-the-image' ) )
$image= get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'single-thumbnail', 'link_to_post' => false, 'image_class' => 'featured', 'attachment' => false, 'width' => 470, 'height' => 260, 'echo' => false ) );
$caption = get_the_feature_caption();
if ( !empty( $image ) ) {
echo '<div class="img-feature">' . $image ;
echo '<div class="feature-caption">' . $caption . '</div></div>';
}
Finally, in style.css of my child theme I use the following CSS to display the attribution in the lower right corner of the image — on hover only.
.img-feature { position:relative; }
.img-feature .feature-caption { display:none; }
.img-feature:hover .feature-caption {
display:block;
position:absolute;
bottom:15px;
right:0px;
opacity:0.5;
background-color:#000;
padding:4px 8px;
color:#fff;
text-align:right;
}
.feature-caption a {
color:#fff;
}
.feature-caption a:hover {
color:#fff;
}
Hopefully this is helpful for others.