Show all image sizes

Question

This is a shortcode:

<?php

/**
 * Get all the registered image sizes along with their dimensions
 */

function show_all_image_sizes(){

    $image_sizes = wp_get_registered_image_subsizes();
    
    return '<pre>' . print_r($image_sizes) . '</pre>';
}

Using it:

Result:

Rendered HTML:

What is going on here? Namely:

1. Why the sizes are printed above Trololo? I seem to return something from the function but this return has nothing to do with this output. So, what did the output is a mystery to me.
2. Why print_r didn't return a prettified array of image sizes? And how to adjust the code to achieve the desired result?

Answer 1

1. In your function, try replacing return with echo

<?php

/**
 * Get all the registered image sizes along with their dimensions
 */

function show_all_image_sizes(){

    $image_sizes = wp_get_registered_image_subsizes();
    
    echo '<pre>',print_r($image_sizes),'</pre>';
}

2. The use of print_r here is presumably just for debugging. If you want to output the data in that array in your html, you'll need to loop over it and echo strings of html with those values.

Answer 2

I should have put

print_r($image_sizes, true);