How renderable array for an image with style should look like?

Question

I have a custom module that outputs some images. Now, I would like to render them properly.

Currently, I use theme() function, kinda similarly to the way shown here¹ and here¹:

echo theme('image_style', array(
  'path' => $image['uri'],
  'style_name' => 'product_page_thumbnail',
  'attributes' => array(
    'alt' => $image['ImageAlt'],
    'title' => $image['ImageTitle'],
  )
));

Now, the theme() docs says:

Avoid calling this function directly. It is preferable to replace direct calls to the theme() function with calls to drupal_render() by passing a render array with a #theme key to drupal_render(), which in turn calls theme().

So how would I do that?

I know renderable array for links, it's as simple as:

$link = array(
  '#type'    => 'link',
  '#title'   => $title,
  '#href'    => 'http://example.com',
  '#options' => array('html' => TRUE, 'title' => 'link'),
);

So I want the same, but for images. Somehow I can't find any documented example of it.

---

¹Internal Stack Exchange links, just for reference.

Answer 1

There's nothing specific for images, but there is for any theme function. Your old code using theme() would be equivalent to:

$build = array(
  '#theme' => 'image_style',
  '#path' => $image['uri'],
  '#style_name' => 'product_page_thumbnail',
  '#alt' => $image['ImageAlt'],
  '#title' => $image['ImageTitle'],
);

Basically you pass the named variables for the theme function as #-prefixed properties, and the render system will do the rest.