I am trying to use the new responsive images feature in WordPress 4.4 but I keep running into a particular problem when trying to use the_post_thumbnail with a custom image size. It seems I cannot use custom image sizes.
The following code will produce an
img tag with the
<?php the_post_thumbnail('medium', array( 'class' => 'img-responsive' )); ?>
Here is what the
img tag looks like with the
medium size passed into the function:
<img width="300" height="225" src="path/to/image-300x225.jpg" class="img-responsive wp-post-image" alt="Image" srcset="path/to/image-300x225.jpg 300w, path/to/image-768x576.jpg 768w, path/to/image.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px">
However, when I make one change to use my custom image size, the
srcset disappears. Does anyone know what is going on here?
Here is how I added my custom image size:
add_image_size ('my-custom-size', 1050, 626, true );
Here is how it looks in the code:
<?php the_post_thumbnail('my-custom-size', array( 'class' => 'img-responsive' )); ?>
And here is what it outputs, notice that
my-custom-size is not being read and it is instead adding in
wp-post-image instead of
<img width="1024" height="626" src="path/to/image-1024x626.jpg" class="img-responsive wp-post-image" alt="Image">
Please help me understand what I am doing wrong!
There’s not enough info to be sure this answer is definitive but here’s an attempt.
Firstly make sure the image you are uploading is actually larger than the size you have defined. I see people upload images that are too small and then get this sort of result all the time.
Secondly, WP will only make up a Srcset list of image sizes with the same aspect ratio. If your custom size had a different aspect ratio to other image sizes then you can create a selection of new sizes with aspect ratios that match.
Thirdly, after changing or adding new image sizes you must always regenerate existing thumbnails. There’s a great plugin called Regenerate Thumbnails for this.