Display height and width properties with the_post_thumbnail() or related function

by

Problem

I want the height and width properties in the img element of the Featured Image for a post, page, or custom post type.

Environment

  1. I have a custom theme based on the BlankSlate theme.
  2. The new twentyfifteen theme also does not display the properties.
  3. In Settings/Media, I have not changed the default image sizes.
  4. functions.php contains add_theme_support( 'post-thumbnails' );.
  5. I do not have custom image sizes.
  6. In Settings/Media, the box “Crop thumbnail to exact dimensions” is not checked. Therefore, I have some thumbnails that are not exactly 150 px x 150 px.
  7. Edit: I still want the other automatic properties from the Featured Image functions, such as alt and class.

Current output

From this example page on my website, the full HTML for the Featured Image is currently

<img src="http://i2.wp.com/www.hunterthinks.com/wp-content/uploads/2014/11/favicon-160x160.png?fit=150%2C150" class="attachment-thumbnail wp-post-image" alt="HunterThinks.com">

As an idealist, I would want the height and width normally, but the lack of height produces a layout problem with my current theme. As you can see, the last Featured Image overruns the end of the <section> element, and it looks terrible.

Current code

The header.php is large, so I will skip it unless someone thinks my problem is in there.

category.php

<?php get_header(); ?>
<section>
  <header><h1><?php _e( 'Main page: ', 'goldenratio' ); ?><?php single_cat_title(); ?></h1></header>
  <?php if ( '' != category_description() ) echo apply_filters( 'archive_meta', category_description() ); ?>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <?php get_template_part( 'entry', 'summary' ); ?> # FEATURED IMAGE COMES FROM HERE
  <?php endwhile; endif; ?>
  <?php get_template_part( 'nav', 'below' ); ?>
</section>
<?php get_footer(); ?>

entry-summary.php

<?php the_title( '<h1 class="clear">', '</h1>' ); ?>
<?php if ( has_post_thumbnail() ) { 
    echo '<figure class="clear-right"><a href="';
    the_permalink();
    echo '">';
    the_post_thumbnail( 'thumbnail' );
    echo '</a></figure>';
    } ?>
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" title="Go to the page">&rArr;&nbsp;Read&nbsp;&rArr;</a>

class=”clear-right”

I cannot image why this class would affect things, but just in case I am wrong, I am including it here.

.clear-right{
 clear:right;
 float:right;
 margin-bottom:1em;
 margin-left:1.827%;}

Failed attempts

  1. I tried to use wp_get_attachment_image_src() but I guess I did not code it correctly because I couldn’t even get the image to display. I don’t have a sample of the code I tried.
  2. I tried using the_post_thumbnail( $size, $attr ) and adjusting the $attr array based on the documentation in wp_get_attachment_image() but I am pretty sure that will never work.

Code, concepts, and references?

Can someone please help me with the code, concepts, and reference materials that I am missing. I have a feeling that when I learn the answer I will feel a little silly, but I do want to fix this issue.

Thanks in advance.

5 Answers
5

You can collect image attributes using “wp_get_attachment_metadata”, see below example as starting point

function mytheme_post_thumbnail( $size="post-thumbnail", $attr="", $post_id = null ) {
    if ( has_post_thumbnail( $post_id ) ) {
        $meta      = wp_get_attachment_metadata( get_post_thumbnail_id( $post_id ) );

        $args['width']  = $meta['sizes'][$size]['width'];
        $args['height'] = $meta['sizes'][$size]['height'];

        $args['alt']   = isset( $attr['alt'] ) ? $attr['alt'] : apply_filters( 'post_title', get_post( $post_id )->post_title );
        $args['title'] = isset( $attr['title'] ) ? $attr['title'] : apply_filters( 'post_title', get_post( $post_id )->post_title );
        $args['class'] = isset( $attr['class'] ) ? $attr['class'] : '';

        $thumbnail = wp_get_attachment_image( get_post_thumbnail_id( $post_id ), $size, false, $args);

        echo $thumbnail;
    } else {
        printf( '<img src="https://wordpress.stackexchange.com/questions/174019/%1$s/images/default-thumb.png" alt="%2$s" />', get_template_directory_uri(), the_title_attribute( [  'echo' => false ] ) );
    }
}

Leave a Comment