Как настроить данные отображения в Sonata autocomplete

Question

Я использую поле формы sonata_type_model_autocomplete и я хочу настроить отображение. Я хочу, чтобы autocompleteas в картинах:

Правильно ли я понимаю, что единственный способ сделать это, чтобы переопределить блок sonata_type_model_autocomplete_selection_format в шаблоне SonataAdminBundle: Форма/тип : sonata_type_model_autocomplete.html.twig? Как в documentation. Далее я должен создать пользовательский контроллер, который даст мне необходимые данные и заполнит маршрут. Возможно, как this.

Нет ли простого и готового решения?

Answer 1

Я нашел решение.

С опцией to_string_callback можно использовать, и в результате не дать ни одного поля записи и шаблона рендеринга.

class DemoAdmin extends Admin 
{ 
    protected function configureFormFields(FormMapper $formMapper) 
    { 
     $templating = $this->templating; 
     $formMapper 
      ->add('movie', 'sonata_type_model_autocomplete', [ 
       'property' => 'title', 
       'label' => 'Movie', 
       'multiple' => false, 
       'required' => false, 
       'container_css_class' => 'select2-image', 
       'to_string_callback' => function($entity, $property) use ($templating) { 
        return $templating->render(
         'AcmeDemoBundle:Form/Type/sonata_type_model_autocomplete:movie.html.twig', 
         ['entity' => $entity] 
        ); 
       }, 
      ]); 
    } 
} 

код шаблона:

{% spaceless %} 
    <div class="select2-image__autocomplete"> 
     <img 
      src="{{ entity.webPath | apply_filter('autocomplete') }}" 
      class="select2-image__image" 
      alt="{{ entity.title }}" 
     /> 
     <strong>{{ entity.title }}</strong> 
     <div>{{ entity.announce }}</div> 
    </div> 
{% endspaceless %} 

config.yml

avalanche_imagine: 
    filters: 
     autocomplete: 
      type: thumbnail 
      options: { size: [60, 60], mode: outbound } 

SCSS

.select2-image { 
    height: auto; 
    .select2-choice { 
    height: 72px; // height 60 + 12 padding 
    } 
    &__autocomplete { 
    clear: both; 
    height: 60px; 
    } 
    &__image { 
    float: left; 
    margin-right: 5px; 
    width: 60px; 
    height: 60px; 
    } 
} 

Результат