Sulu media display in list - symfony

Question

I created an Entity, PlayerInfo. Inside of that, I have photo field and defined MediaInterface, and use it with that. In adminUI everything is shown OK, in Frontend too, but when I got an idea to show thumbnail in list, I get empty field, and error in console that says:
Invalid type given: "number". "object" is needed. (TRANSFORMER ERROR)
Here is my list XML property code:
<property name="avatar" visibility="always" translation="sulu_admin.avatar" sortable="false">
<field-name>id</field-name>
<entity-name>SuluMediaBundle:Media</entity-name>
<joins>
<join>
<entity-name>SuluMediaBundle:Media</entity-name>
<field-name>App\Entity\PlayerInfo.photo</field-name>
</join>
</joins>
<transformer type="thumbnails"/>
</property>
What can be the problem?

Answer 1

The table adapter of the Sulu list view uses a transformer to determine what should be rendered inside of the cell based on the data returned by your API.
You have used the thumbnails transformer in your code. If you look at the ThumbnailFieldTransformer implementation, you see that the transformer expects data in a format like this:
{
"sulu-40x40":"/uploads/media/sulu-40x40/02/2-isle.jpg?v=1-0",
}
I suspect that you have used the ListBuilder component of Sulu to gather that list data in the controller that implements your API (like the sulu-demo project). The ListBuilder component uses optimized queries to load the requested data directly from the database.
Unfortunately, the ListBuilder component returns only the ID of the associated media entity and does not transform the data into the format that is expected by the ThumbnailFieldTransformer automatically. You need to construct and set the object that contains the thumbnail urls in your controller using the MediaManagerInterface::getFormatUrls method.
As an example, you can have a look at how the organization logo is handled in the AccountController that implements the API for the built-in organization list of Sulu:
$ids = \array_filter(\array_column($accounts, 'logo'));
$logos = $this->mediaManager->getFormatUrls($ids, $locale);
foreach ($accounts as $key => $account) {
if (\array_key_exists('logo', $account) && $account['logo'] && \array_key_exists($account['logo'], $logos)) {
$accounts[$key]['logo'] = $logos[$account['logo']];
}
}

Answer 2

You have to set the Image in your Entity.
Let's take a "User" Entity for example.
I think you have some kind of property like "avatar".
/**
* #var MediaInterface|null
*/
protected $avatar;
The error occurs because you have only saved the ID.
The solution is to set the avatar in the Entity before.
e.g. in the controller you call for the list.
$media = $this->container->get('sulu.repository.media')->findMediaById($user->getAvatar()->getId());
$user->setAvatar($media);