I have set image sizes in my functions.php, such as

add_image_size( 'article-lede', 500, 600 );

It shows up in Regenerate Thumbnails, and I regenerated them. So I upload an image to the media library which is 934x1200.

My template code is set to use the "article-lede"image:

<?php the_post_thumbnail('artcle-lede', ['class' => 'featured-image img-fluid']);?>

But the page shows a full-size image. And the img tag in the resulting HTML has the height and width set to the large size, and an SRCSET of sizes, none being the article-lede size I specified:

<img src="http://mysite/wp-content/uploads/2019/11/keiltys.jpg" class="featured-image img-fluid wp-post-image" alt="" srcset="http://mysite/wp-content/uploads/2019/11/keiltys.jpg 934w, http://mysite/wp-content/uploads/2019/11/keiltys-234x300.jpg 234w, http://mysite/wp-content/uploads/2019/11/keiltys-797x1024.jpg 797w, http://mysite/wp-content/uploads/2019/11/keiltys-768x987.jpg 768w, http://mysite/wp-content/uploads/2019/11/keiltys-467x600.jpg 467w, http://mysite/wp-content/uploads/2019/11/keiltys-311x400.jpg 311w" sizes="(max-width: 934px) 100vw, 934px">

How I do get it to display the 500x600 version?

I have set image sizes in my functions.php, such as

add_image_size( 'article-lede', 500, 600 );

It shows up in Regenerate Thumbnails, and I regenerated them. So I upload an image to the media library which is 934x1200.

My template code is set to use the "article-lede"image:

<?php the_post_thumbnail('artcle-lede', ['class' => 'featured-image img-fluid']);?>

But the page shows a full-size image. And the img tag in the resulting HTML has the height and width set to the large size, and an SRCSET of sizes, none being the article-lede size I specified:

<img src="http://mysite/wp-content/uploads/2019/11/keiltys.jpg" class="featured-image img-fluid wp-post-image" alt="" srcset="http://mysite/wp-content/uploads/2019/11/keiltys.jpg 934w, http://mysite/wp-content/uploads/2019/11/keiltys-234x300.jpg 234w, http://mysite/wp-content/uploads/2019/11/keiltys-797x1024.jpg 797w, http://mysite/wp-content/uploads/2019/11/keiltys-768x987.jpg 768w, http://mysite/wp-content/uploads/2019/11/keiltys-467x600.jpg 467w, http://mysite/wp-content/uploads/2019/11/keiltys-311x400.jpg 311w" sizes="(max-width: 934px) 100vw, 934px">

How I do get it to display the 500x600 version?

• customization
• images
• post-thumbnails
• responsive

1 Answer 1

Good question as I know that this can be a pain in the butthole. Please see this page; https://developer.wordpress/reference/functions/get_the_post_thumbnail_url/.

From the docs:

get_the_post_thumbnail_url($id, 'image-size')

So in your case:

$img = get_the_post_thumbnail_url($post, 'article-lede');
echo "<img src='{$img}' class='featured-image img-fluid' />";