How to use and style the_post_thumbnail_caption?

  • Resolved nevertoocurious

    (@nevertoocurious)


    7 years, 9 months ago

    I have a blog that uses a custom child theme for Twenty Fifteen, with a couple modifications I added myself. Unfortunately, one of those was the featured image caption that caused a lot of crashes post 4.6, as I discovered after a search through these forums.

    Here’s what I used to have in functions.php:

    // Ensure featured image captions //
function the_post_thumbnail_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 = $thumbnail_image[0]->post_excerpt;
  }

  return $caption;
}

    And here is how it would work in content-single.php:

    <?php twentyfifteen_post_thumbnail(); 
	if(has_post_thumbnail()) {
    $caption = the_post_thumbnail_caption();
    if($caption) echo '<div class="featuredcap">' . "\n";
    
    if($caption) {
        echo '<p class="featured-caption-text">' . $caption . '</p>' . "\n";
        echo '</div>' . "\n";
    }
}
?>

    The featuredcap and featured-caption-text would then have corresponding styles in my child theme style.css

    Now, even after identifying what caused the clash after the latest update, I am no longer able to get the captions to work! At best, I can have them appear on the site, but no styling is applied.

    I have tried re-naming the original scavenged function, which does still display the captions, but for some weird reason the CSS styles would not apply any more.

    Ultimately, because the_post_thumbnail_caption now exists, I thought it would be better to just use it in content-single.php and style it accordingly. However, my php knowledge is rudimentary at best, so I haven’t been able to achieve this.

    Even if I use:

    <?php twentyfifteen_post_thumbnail(); ?>
<div class="wp-caption"><?php the_post_thumbnail_caption(); ?></div>

    the image caption is rendered, but no CSS styles are applied to it, not even the standard ones for image captions elsewhere on the site.

    Tl;dr: I can get Featured Image captions to show, but how do I style them correctly?

    The site is nevertoocurious.com/blog

    Any help would be much appreciated!

Viewing 9 replies - 1 through 9 (of 9 total)

  • Please added the css folder in your theme then added the file custom.css or anythings .css then after open the header.php and added this code <link rel=”stylesheet” href=”<?php bloginfo( ‘template_url’ ); ?>/css/custom.css” /> in your head section

    Thank you
    if any problem then contact me my Email id

    Moderator bcworkz

    (@bcworkz)

    Your last snippet can’t work without an echo statement. Otherwise I don’t see any PHP issues, so it should be a matter of applying the correct CSS. I can’t tell you what that might be without the HTML being in place. If you can restore your caption code so the caption HTML is in place, I think I can help you. It doesn’t matter if the caption is in the wrong place or if it even appears, as long as the HTML is in place.

    Thread Starter nevertoocurious

    (@nevertoocurious)

    Hi bcworkz, thanks so much for having a look!

    Of course you’re right, the second snippet would work just fine now that the_post_thumbnail has been built into WP.

    Okay, so I have just put this back into content-single.php:

    	<?php twentyfifteen_post_thumbnail(); 
	if(has_post_thumbnail()) {
    $caption = the_post_thumbnail_caption();
    if($caption) echo '<div class="featuredcap">' . "\n";
    
    if($caption) {
        echo '<p class="featured-caption-text">' . $caption . '</p>' . "\n";
        echo '</div>' . "\n";
    }
}
?>

    If you go to https://nevertoocurious.com/2015/08/15/pool-to-pond-day-362/ for example, you can see that the image caption just hangs there above the post headline, with no styles applied. (This has been driving me crazy.)

    As I’ve mentioned, I normally add any custom CSS modifications to my child theme’s style.css file. Unfortunately I have misplaced the exact styles I used for the captions on this blog, but here’s an approximation of what I used to have:

    /* Featured image caption style */
.featuredcap {
	position: relative;
}

.featured-caption-text { 
	background-color: rgba(225, 225, 225, 0.8);
	bottom: 24px;
	color: #666;
	font-size:12px;
	font-family: Lato, sans-serif;
	right:auto;
	padding: 2px 10px 2px 10px;
	position: absolute; }

    (You can actually see these styles in action on the featured image captions at https://www.pausetowonder.org/2014/05/30/the-end-of-matter/, I first used it there successfully before also using that method on my site.)

    I just can’t figure out what’s wrong.

    Moderator bcworkz

    (@bcworkz)

    Thanks for putting the caption text back in. What’s wrong is simple. Why it’s wrong, not so much. The caption text has no distinguishing container with which we can apply different styles. It’s in the same container as article text, so it’s always going to match that text. The div.featuredcap and p.featured-caption-text containers in your snippet you recently posted are no where to be found.

    Please double check your actual the_post_thumbnail_caption() function code on the server and verify it’s really returning the caption string and not echoing it. Also verify the template you placed the the recent snippet on is really the template being used. Edit the code so something obvious and unique is output, for example echo 'Hello world!';

    I know these are obvious blunders that you’re unlikely to do, but I can’t think of any other reasons the distinguishing container HTML does not exist on the page. Maybe now that you know what the problem is, this clue can lead you to the cause.

    Thread Starter nevertoocurious

    (@nevertoocurious)

    Please double check your actual the_post_thumbnail_caption() function code on the server and verify it’s really returning the caption string and not echoing it.

    Ah, well I have absolutely no idea how to do that ??

    Unlike the old version of the function that I copied from a forum somewhere on the internet and placed in the child theme’s functions.php, the built-in one lives in wp-includes/post-thumbnail-template.php
    (There’s also get_the_post_thumbnail_caption and I’m not even sure how it’s different. I basically don’t know anything about php.)
    Basically, I haven’t found any helpful documentation on how to actually use the feature, so… I adapted the old snippet I used to have in place before they included the function in 4.6. Now, that’s not working, so where did I make the mistake?

    I did, however, verify that the template content-single.php is definitely the one in use. I also verified that style.css from the child theme is being used, by shifting the placement of another element and watching the styles apply. Hope that helps eliminate things.

    Moderator bcworkz

    (@bcworkz)

    It appears now that the distinguishing containers now occur and CSS is being applied on the page you linked earlier (day 362). If this was not your doing, then the problem was likely caching of some sort.

    When developing, any sort of caching needs to be disabled or it will drive you crazy!

    Thread Starter nevertoocurious

    (@nevertoocurious)

    Aw man, they are indeed! That is so strange! (And also a huge relief.)

    Thanks so much for looking into this for me. Any tips on how to disable caching for such purposes? I’ve never had the need before.

    Moderator bcworkz

    (@bcworkz)

    It depends on where the caching is being applied. You apparently don’t have a WP caching plugin, if you did you probably wouldn’t need to ask. These have a flush setting somewhere and the entire plugin can always be deactivated ?? Check your hosting control panel for some clue. If nothing is apparent there, you’d need to ask your host.

    Thread Starter nevertoocurious

    (@nevertoocurious)

    Ah, well thanks for the tip! I really appreciate all your help looking at my issue.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to use and style the_post_thumbnail_caption?’ is closed to new replies.