'invalid render array key' error when using an associated array for a twig variable

Question

I have a list of images, and I want access to both the direct path to the image, and the path with an image style applied to it available to a Twig template.

I'm grabbing the images in my .theme file like so.

$images = $node->get('field_image');

foreach($images as $image){
    $image_style =Drupal\image\Entity\ImageStyle::load('photos')->buildUrl($image->entity->getFileuri()),
    $image_path = file_create_url($image->entity->getFileuri()),    
}

I want to be able to access these attributes for each image by storing them in the $variables array.

I attempted to do so by using

foreach($images as $image){
    $image_style =Drupal\image\Entity\ImageStyle::load('photos')->buildUrl($image->entity->getFileuri()),
    $image_path = file_create_url($image->entity->getFileuri()),    
    $variables['photos'][]['image_style'] = $image_style;
    $variables['photos'][]['image_path'] = $image_path;
}

However that didn't work and I received errors. After that I figured that maybe I needed to supply a more explicit associative array so I tried

    $variables['photos'] = array();
    $photo_paths = array();
    foreach($images as $image){
        $photo_paths += [
            $i => [
                'image_style' => Drupal\image\Entity\ImageStyle::load('photos')->buildUrl($image->entity->getFileuri()),
                'image_path' => file_create_url($image->entity->getFileuri()),            
            ],
        ];

        $i += 1;
    }
    $variables['photos']= $photo_paths;

But then I receive the errors

User error: "image_style" is an invalid render array key in Drupal\Core\Render\Element::children() (line 97 of core/lib/Drupal/Core/Render/Element.php).

and

User error: "image_path" is an invalid render array key in Drupal\Core\Render\Element::children() (line 97 of core/lib/Drupal/Core/Render/Element.php).

These errors continue for each image. I'm guessing that $variables can't handle nested associative arrays? Is there a way I can use an associative array inside a Twig variable? Or is there another way to accomplish the same task or storing the path and image style for each individual image to be displayed in a for loop in Twig?

Answer 1

Twig doesn't understand what you put in the keys image_style and image_path. Twig can handle only arrays when the children are renderable. And this means they have to contain a '#type' or '#theme' key with a valid render element or theme name. For image styles use the theme image_style:

$variables['photos'] = [];
foreach ($images as $image) {
  $variables['photos'][] = [
    '#theme' => 'image_style',
    '#style_name' => 'photos',
    '#uri' => $image->entity->getFileUri(),
  ];
}

Then Twig can render the images like they're supposed to be rendered without the need for custom PHP code.