How to get all featured image sizes and their URLs?

Question

Is there a standard way to get all the registered sizes of the featured images? One can register different sizes with add_image_size(). What I need, is to get all the sizes of a featured image of a post. Something like this:

$sizes = get_post_feature_image_sizes($postid);

...which will return an array of objects like this (here in JSON format):

[
{width: 200, height: 300, url: 'http://.........../wp-content/uploads/2015/10/file-200x300.jpg'},
{width: 300, height: 400, url: 'http://.........../wp-content/uploads/2015/10/file.jpg'},
]

Is there anything like this, or I will have to scan all the upload folder file names with regex?

Answer 1

I don't remember a function that will do precisely that, but it is easily achieved with API overall:

1. Retrieve attachment ID with get_post_thumbnail_id()
2. Retrieve available sizes with get_intermediate_image_sizes()
3. For each size use wp_get_attachment_image_src(), which gives precisely data you need (URL and dimensions).

Answer 2

After you get it's ID ( get_post_thumbnail_id($YOUR_POST_ID) ) you need to know the uploads base url and the attachment meta data.

Uploads base url can be found in an array returned by wp_upload_dir().

Attachment meta data can be retrieved by wp_get_attachment_metadata().

Here is a handy function I wrote that prepares the url data for any image attachment, not just featured.

function prepareImageData( $attachment_id ){
  $uploads_baseurl = wp_upload_dir()['baseurl'];

  $prepared = [];
  $data = wp_get_attachment_metadata($attachment_id);
  $prepared = [
    'mime_type' => get_post_mime_type($attachment_id),
    'url' => $uploads_baseurl.'/'.$data['file'],
    'sizes' => [],
  ];

  foreach( $data['sizes'] as $size => $sizeInfo ){
    $prepared['sizes'][$size] = [
      'url' => $uploads_baseurl.'/'.$sizeInfo['file'],
    ];
  }

  return $prepared;
}

Answer 3

To get image according to size you can use wordpres pre-defined function that is the_post_thumbnail( $size, $attr ).

you can use predefined media sizes.

the_post_thumbnail();                 

the_post_thumbnail( 'thumbnail' );       // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' );          // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'large' );           // Large resolution (default 640px x 640px max)
the_post_thumbnail( 'full' );            // Full resolution (original size uploaded)

the_post_thumbnail( array(100, 100) );

This might help you.