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
- I have a custom theme based on the BlankSlate theme.
- The new twentyfifteen theme also does not display the properties.
- In Settings/Media, I have not changed the default image sizes.
- functions.php contains
add_theme_support( 'post-thumbnails' );
. - I do not have custom image sizes.
- 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.
- Edit: I still want the other automatic properties from the Featured Image functions, such as
alt
andclass
.
Current output
From this example page on my website, the full HTML for the Featured Image is currently
<img src="https://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">⇒ Read ⇒</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
- 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. - I tried using
the_post_thumbnail( $size, $attr )
and adjusting the$attr
array based on the documentation inwp_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.